@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #0f1420;
  --bg-soft: #161d2e;
  --card: #1b2333;
  --card-2: #212b3f;
  --border: #2a3548;
  --text: #eef1f7;
  --text-dim: #97a2b8;
  --primary: #6c5ce7;
  --primary-2: #8b7cf6;
  --accent: #22c55e;
  --danger: #ef4444;
  --warn: #f59e0b;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(1200px 600px at 20% -10%, #22294a 0%, var(--bg) 55%) fixed;
  color: var(--text);
  font-family: 'Poppins','Cairo',sans-serif;
  min-height:100vh;
}
[dir="rtl"] body{ font-family:'Cairo','Poppins',sans-serif; }

a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0 0 6px;}
p{margin:0 0 8px;color:var(--text-dim);}

.wrap{max-width:1180px;margin:0 auto;padding:18px;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:linear-gradient(180deg,var(--card),var(--bg-soft));
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;}
.brand .logo{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.topbar-actions{display:flex;align-items:center;gap:10px;}

.btn{
  border:none;border-radius:12px;padding:10px 16px;font-weight:600;cursor:pointer;
  font-family:inherit;font-size:14px;transition:.15s transform,.15s opacity;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;}
.btn-ghost{background:var(--card-2);color:var(--text);border:1px solid var(--border);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-success{background:var(--accent);color:#06240f;}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.lang-toggle{
  display:flex;background:var(--card-2);border:1px solid var(--border);border-radius:999px;overflow:hidden;
}
.lang-toggle button{
  background:none;border:none;color:var(--text-dim);padding:8px 14px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
}
.lang-toggle button.active{background:var(--primary);color:#fff;}

/* ---------- Cards & Grid ---------- */
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{font-size:15px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}

/* ---------- Employee ID Card ---------- */
.id-card{
  border-radius:20px;
  padding:22px;
  background:linear-gradient(135deg,#302b63 0%, #24243e 60%, #1b1b34 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.id-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(300px 150px at 100% 0%, rgba(108,92,231,.35), transparent);
}
.id-card-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;}
.id-card .badge-app{font-weight:800;font-size:13px;letter-spacing:1px;opacity:.8;}
.id-card-body{display:flex;gap:16px;align-items:center;margin-top:18px;position:relative;z-index:1;}
.avatar{
  width:78px;height:78px;border-radius:18px;object-fit:cover;border:2px solid rgba(255,255,255,.25);
  background:var(--card-2);
}
.id-card-name{font-size:21px;font-weight:800;}
.id-card-role{color:var(--text-dim);font-size:13px;margin-top:2px;}
.status-pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:700;margin-top:8px;
}
.status-pill.on{background:rgba(34,197,94,.15);color:#4ade80;}
.status-pill.off{background:rgba(148,163,184,.15);color:#94a3b8;}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.dot.pulse{animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6);}70%{box-shadow:0 0 0 8px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}

.id-card-actions{display:flex;gap:10px;margin-top:20px;position:relative;z-index:1;}

/* ---------- Leaderboard / top performer ---------- */
.top-performer{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.03));
  border:1px solid rgba(245,158,11,.35);
  border-radius:16px;padding:14px 18px;
}
.top-performer .crown{font-size:28px;}
.top-performer .name{font-weight:800;font-size:18px;}
.top-performer .sub{color:var(--text-dim);font-size:13px;}

/* ---------- Lists / tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--border);}
th{color:var(--text-dim);font-weight:700;font-size:12px;text-transform:uppercase;}
tr:hover td{background:rgba(255,255,255,.02);}

.staff-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.staff-row:last-child{border-bottom:none;}
.staff-row img{width:36px;height:36px;border-radius:10px;object-fit:cover;background:var(--card-2);}
.staff-row .name{font-weight:600;font-size:14px;}
.staff-row .meta{font-size:12px;color:var(--text-dim);}

/* ---------- Forms ---------- */
label{display:block;font-size:13px;color:var(--text-dim);margin:12px 0 6px;font-weight:600;}
input,select{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-family:inherit;font-size:14px;
}
input:focus,select:focus{outline:none;border-color:var(--primary);}

.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;}
.auth-card{width:100%;max-width:420px;}
.auth-logo{text-align:center;margin-bottom:18px;}
.auth-logo .logo{width:56px;height:56px;margin:0 auto 10px;border-radius:16px;font-size:22px;}

.error-msg{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5;padding:10px 12px;border-radius:10px;font-size:13px;margin-top:10px;}
.ok-msg{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#86efac;padding:10px 12px;border-radius:10px;font-size:13px;margin-top:10px;}

/* ---------- Face capture ---------- */
.face-box{position:relative;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--border);}
.face-box video, .face-box canvas{width:100%;display:block;}
.face-box canvas{position:absolute;top:0;left:0;}
.face-hint{font-size:12px;color:var(--text-dim);text-align:center;margin-top:8px;}

/* ---------- Sidebar (admin) ---------- */
.admin-shell{display:flex;min-height:100vh;}
.sidebar{
  width:230px;flex-shrink:0;background:var(--card);border-inline-end:1px solid var(--border);
  padding:18px 12px;position:sticky;top:0;height:100vh;
}
.sidebar a{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;color:var(--text-dim);
  font-weight:600;font-size:14px;margin-bottom:4px;
}
.sidebar a.active, .sidebar a:hover{background:var(--card-2);color:var(--text);}
.admin-content{flex:1;padding:22px;min-width:0;}
@media(max-width:820px){
  .admin-shell{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;display:flex;overflow-x:auto;gap:6px;}
  .sidebar a{white-space:nowrap;}
}

.badge{padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;}
.badge-green{background:rgba(34,197,94,.15);color:#4ade80;}
.badge-gray{background:rgba(148,163,184,.15);color:#94a3b8;}
.badge-red{background:rgba(239,68,68,.15);color:#f87171;}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:16px;
}
.modal-backdrop.show{display:flex;}
.modal{width:100%;max-width:460px;max-height:90vh;overflow-y:auto;}

.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;}
.gap-12{gap:12px;}
.mt-16{margin-top:16px;}
.text-dim{color:var(--text-dim);}
.small{font-size:12px;}
.center{text-align:center;}
[dir="rtl"] .icon-flip{transform:scaleX(-1);}