/* ============================================================
   Axiomverse HRMS — Modern 3D / Glassmorphism UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg-0:#0b1020; --bg-1:#0f172a; --bg-2:#131c33;
  --card:rgba(255,255,255,.06); --card-solid:#141d33;
  --stroke:rgba(255,255,255,.10); --stroke-2:rgba(255,255,255,.16);
  --txt:#eaf0ff; --muted:#9aa6c4; --muted-2:#6f7ca0;
  --brand:#6d5efc; --brand-2:#8b7bff; --accent:#22d3ee; --accent-2:#38bdf8;
  --green:#34d399; --amber:#fbbf24; --red:#fb7185; --pink:#f472b6;
  --grad:linear-gradient(135deg,#6d5efc 0%,#22d3ee 100%);
  --grad-soft:linear-gradient(135deg,rgba(109,94,252,.22),rgba(34,211,238,.14));
  --shadow-lo:0 2px 8px rgba(4,8,20,.35);
  --shadow:0 18px 40px -18px rgba(4,8,20,.75);
  --shadow-3d:0 10px 24px -10px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  --r:18px; --r-sm:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--txt);
  background:
    radial-gradient(1100px 600px at 12% -10%,rgba(109,94,252,.22),transparent 55%),
    radial-gradient(900px 600px at 100% 0%,rgba(34,211,238,.16),transparent 50%),
    radial-gradient(800px 800px at 50% 120%,rgba(139,123,255,.12),transparent 55%),
    var(--bg-0);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand{font-family:'Sora',sans-serif;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:20px}

/* ---------- LAYOUT ---------- */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;padding:22px 16px;
  background:linear-gradient(180deg,rgba(20,29,51,.85),rgba(11,16,32,.92));
  backdrop-filter:blur(18px);border-right:1px solid var(--stroke);
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
}
.logo{display:flex;align-items:center;gap:12px;padding:6px 8px 18px}
.logo .mark{
  width:42px;height:42px;border-radius:13px;background:var(--grad);
  display:grid;place-items:center;font-family:'Sora';font-weight:800;color:#fff;
  box-shadow:0 8px 18px -6px rgba(109,94,252,.7),inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateZ(0);
}
.logo b{font-family:'Sora';font-size:16px}
.logo small{display:block;color:var(--muted-2);font-size:11px;font-weight:500}
.nav-label{color:var(--muted-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;margin:14px 10px 4px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  color:var(--muted);font-weight:500;font-size:14px;transition:.18s;border:1px solid transparent;
}
.nav a .ico{width:20px;height:20px;flex:0 0 20px;opacity:.9}
.nav a:hover{background:var(--card);color:var(--txt);transform:translateX(2px)}
.nav a.active{
  background:var(--grad-soft);color:#fff;border-color:var(--stroke-2);
  box-shadow:var(--shadow-3d);
}
.nav a.active .ico{opacity:1}

.main{padding:26px 30px 60px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.topbar h1{font-size:24px;font-weight:700}
.topbar .sub{color:var(--muted);font-size:13px;margin-top:3px}
.top-actions{display:flex;align-items:center;gap:12px}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  font-weight:700;color:#fff;box-shadow:var(--shadow-3d);font-size:15px;
}
.chip{
  padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--stroke);
  font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

/* ---------- CARDS (3D) ---------- */
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--stroke);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px);position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.grid{display:grid;gap:18px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}

/* stat card */
.stat{display:flex;flex-direction:column;gap:10px;transition:.25s;cursor:default}
.stat:hover{transform:translateY(-4px);box-shadow:0 26px 50px -20px rgba(4,8,20,.9)}
.stat .icn{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid var(--stroke-2);box-shadow:var(--shadow-3d);
}
.stat .icn svg{width:24px;height:24px}
.stat .val{font-family:'Sora';font-size:30px;font-weight:800;line-height:1}
.stat .lbl{color:var(--muted);font-size:13px;font-weight:500}
.stat .trend{font-size:11.5px;color:var(--green);font-weight:600}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;
  font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--stroke-2);
  background:var(--card);color:var(--txt);transition:.18s;font-family:'Inter';
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lo)}
.btn-primary{
  background:var(--grad);border:none;color:#fff;
  box-shadow:0 12px 26px -12px rgba(109,94,252,.85),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{box-shadow:0 18px 34px -12px rgba(109,94,252,1)}
.btn-danger{background:linear-gradient(135deg,#fb7185,#f43f5e);border:none;color:#fff}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%;justify-content:center}

/* big 3D timer button */
.punch{
  width:210px;height:210px;border-radius:50%;border:none;cursor:pointer;position:relative;
  font-family:'Sora';font-weight:800;font-size:20px;color:#fff;letter-spacing:.02em;
  background:radial-gradient(circle at 32% 28%,#8b7bff,#6d5efc 55%,#4c3ff0);
  box-shadow:0 30px 60px -20px rgba(109,94,252,.9),inset 0 3px 8px rgba(255,255,255,.4),inset 0 -10px 22px rgba(0,0,0,.35);
  transition:.2s;display:grid;place-items:center;
}
.punch:hover{transform:translateY(-3px) scale(1.02)}
.punch:active{transform:translateY(2px) scale(.99)}
.punch.stop{background:radial-gradient(circle at 32% 28%,#fda4af,#fb7185 55%,#f43f5e);
  box-shadow:0 30px 60px -20px rgba(244,63,94,.85),inset 0 3px 8px rgba(255,255,255,.4),inset 0 -10px 22px rgba(0,0,0,.35)}
.punch small{display:block;font-size:12px;font-weight:600;opacity:.9;margin-top:4px}
.timer{font-family:'Sora';font-size:52px;font-weight:800;letter-spacing:.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--stroke)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
thead th{
  text-align:left;padding:14px 16px;color:var(--muted);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--stroke);white-space:nowrap;
}
tbody td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--txt)}
tbody tr{transition:.15s}
tbody tr:hover{background:rgba(255,255,255,.04)}
tbody tr:last-child td{border-bottom:none}
.t-name{display:flex;align-items:center;gap:11px}
.t-avatar{width:34px;height:34px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--stroke-2);
  display:grid;place-items:center;font-weight:700;font-size:13px}

/* badges */
.badge{padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{color:#6ee7b7;background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.25)}
.b-amber{color:#fcd34d;background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.25)}
.b-red{color:#fda4af;background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.25)}
.b-blue{color:#7dd3fc;background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.25)}
.b-grey{color:#cbd5e1;background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.25)}

/* ---------- FORMS ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:12.5px;color:var(--muted);font-weight:600}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke-2);
  background:rgba(9,13,26,.6);color:var(--txt);font-family:'Inter';font-size:14px;transition:.16s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(109,94,252,.18);background:rgba(9,13,26,.85)
}
select option{background:#131c33}
textarea{resize:vertical;min-height:90px}

/* ---------- FLASH ---------- */
.flash-wrap{position:fixed;top:20px;right:20px;z-index:99;display:flex;flex-direction:column;gap:10px;max-width:340px}
.flash{padding:14px 18px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow);
  border:1px solid var(--stroke-2);backdrop-filter:blur(14px);animation:slideIn .3s ease}
.flash.success{background:rgba(52,211,153,.14);color:#a7f3d0;border-color:rgba(52,211,153,.4)}
.flash.error{background:rgba(251,113,133,.14);color:#fecdd3;border-color:rgba(251,113,133,.4)}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ---------- LOGIN ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:420px;padding:38px 34px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--stroke-2);box-shadow:0 40px 90px -30px rgba(0,0,0,.8);backdrop-filter:blur(20px);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:var(--grad);filter:blur(70px);opacity:.5;top:-90px;right:-60px}
.auth-logo{width:60px;height:60px;border-radius:18px;background:var(--grad);display:grid;place-items:center;
  font-family:'Sora';font-weight:800;font-size:24px;color:#fff;margin:0 auto 18px;box-shadow:var(--shadow-3d)}
.section-title{font-size:15px;font-weight:700;margin:2px 0 16px;display:flex;align-items:center;gap:9px}
.section-title .bar{width:4px;height:18px;border-radius:3px;background:var(--grad)}
.muted{color:var(--muted)} .small{font-size:12.5px}
.divider{height:1px;background:var(--stroke);margin:20px 0}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:13.5px}
.kv b{font-weight:600}
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.mt{margin-top:18px}.mb{margin-bottom:18px}.flex{display:flex;gap:12px;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

@media(max-width:960px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-280px;z-index:50;transition:.25s;width:264px}
  .sidebar.open{left:0}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3,.g-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .menu-btn{display:inline-flex!important}
}
.menu-btn{display:none}