/* ═══════════════════════════════════════
   KAYAAN — Employee Clock Page
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #080a0f; --bg2: #0d0f17; --surface: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.09); --primary: #f97316; --primary-dim: rgba(249,115,22,0.14);
  --text: #f1f5f9; --text-muted: #8892b0; --text-faint: #3d4460;
  --green: #22c55e; --yellow: #eab308; --red: #ef4444;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body {
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.5rem; overflow-x:hidden;
}

/* Background orbs */
.orb-c {
  position:fixed; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0;
}
.orb-c1 { width:500px;height:500px; background:radial-gradient(circle,rgba(249,115,22,0.14) 0%,transparent 70%); top:-150px;right:-150px; animation:orbF 14s ease-in-out infinite; }
.orb-c2 { width:400px;height:400px; background:radial-gradient(circle,rgba(59,130,246,0.1) 0%,transparent 70%); bottom:-100px;left:-100px; animation:orbF 18s ease-in-out infinite reverse; }
@keyframes orbF { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-30px)} }

.clock-wrapper { position:relative; z-index:1; width:100%; max-width:440px; }

/* ── Code Entry Screen ── */
.code-screen {
  background:rgba(13,15,23,0.9); border:1px solid rgba(255,255,255,0.1);
  border-radius:24px; padding:2.5rem; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  backdrop-filter:blur(20px);
}
.code-logo { display:flex; align-items:center; justify-content:center; gap:.65rem; margin-bottom:2rem; }
.code-logo img { width:38px; border-radius:10px; }
.code-logo span { font-size:1.2rem; font-weight:800; color:var(--primary); }
.code-screen h2 { font-size:1.35rem; font-weight:700; margin-bottom:.4rem; }
.code-screen p { font-size:.87rem; color:var(--text-muted); margin-bottom:2rem; line-height:1.6; }

.code-input-group { position:relative; margin-bottom:1rem; }
.code-input {
  width:100%; background:rgba(255,255,255,0.06);
  border:1px solid var(--border); border-radius:12px;
  padding:1rem 1.2rem; font-size:1.5rem; font-weight:800;
  color:var(--text); text-align:center; letter-spacing:.3em;
  text-transform:uppercase; font-family:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.code-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-dim); }
.code-input::placeholder { font-size:1rem; letter-spacing:.05em; color:var(--text-faint); }

.name-input {
  width:100%; background:rgba(255,255,255,0.06);
  border:1px solid var(--border); border-radius:12px;
  padding:.85rem 1.1rem; font-size:1rem; font-weight:500;
  color:var(--text); font-family:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s; margin-bottom:1rem;
}
.name-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-dim); }

.btn-enter {
  width:100%; background:var(--primary); color:#fff;
  border:none; border-radius:12px; padding:1rem;
  font-size:.97rem; font-weight:700; cursor:pointer;
  font-family:inherit; transition:all .2s;
  box-shadow:0 0 30px rgba(249,115,22,0.3);
  text-transform:uppercase; letter-spacing:.04em;
}
.btn-enter:hover { background:#fb923c; transform:translateY(-2px); box-shadow:0 0 50px rgba(249,115,22,0.45); }
.btn-enter:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.code-error {
  color:var(--red); font-size:.82rem; margin-top:.5rem;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2);
  border-radius:8px; padding:.5rem .85rem; display:none;
}
.code-error.show { display:block; }
.code-link { margin-top:1.25rem; font-size:.76rem; color:var(--text-faint); }
.code-link a { color:var(--primary); }

/* ── Clock Screen ── */
.clock-screen {
  background:rgba(13,15,23,0.92); border:1px solid rgba(255,255,255,0.1);
  border-radius:24px; padding:2.25rem;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  backdrop-filter:blur(20px); display:none;
}
.clock-screen.active { display:block; }

.cs-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem; padding-bottom:1.25rem;
  border-bottom:1px solid var(--border);
}
.cs-company { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--primary); }
.cs-employee { font-size:.95rem; font-weight:600; color:var(--text); margin-top:.15rem; }
.cs-logout {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2);
  color:var(--red); padding:.3rem .75rem; border-radius:8px;
  font-size:.75rem; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .18s;
}
.cs-logout:hover { background:var(--red); color:#fff; }

/* Big time display */
.cs-time {
  font-size:3.8rem; font-weight:900; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; line-height:1;
  text-align:center; margin-bottom:.3rem;
  background:linear-gradient(135deg,#f1f5f9,#cbd5e1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.cs-date { text-align:center; font-size:.8rem; color:var(--text-faint); margin-bottom:.5rem; }
.cs-location {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:.74rem; color:var(--text-muted); margin-bottom:1.75rem;
}
.cs-location svg { flex-shrink:0; opacity:.6; }

/* Status badge */
.cs-status {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:10px;
  font-size:.82rem; font-weight:700; margin-bottom:1.5rem;
  transition:all .3s;
}
.cs-status.out  { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:var(--red); }
.cs-status.in   { background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2); color:var(--green); }
.cs-status.brk  { background:rgba(234,179,8,.08); border:1px solid rgba(234,179,8,.2); color:var(--yellow); }
.status-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  animation:sdPulse 2s ease-in-out infinite;
}
.cs-status.out  .status-dot { background:var(--red); }
.cs-status.in   .status-dot { background:var(--green); }
.cs-status.brk  .status-dot { background:var(--yellow); }
@keyframes sdPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }

.cs-duration { font-size:.78rem; color:var(--text-faint); margin-left:.25rem; }

/* Action buttons */
.cs-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1.5rem; }
.cs-btn {
  padding:.85rem .5rem; border-radius:12px; border:none;
  font-size:.8rem; font-weight:700; cursor:pointer;
  text-transform:uppercase; letter-spacing:.05em;
  transition:all .2s; font-family:inherit; display:flex;
  flex-direction:column; align-items:center; gap:.3rem;
}
.cs-btn .btn-icon { font-size:1.35rem; }
.cs-btn:disabled { opacity:.3; cursor:not-allowed; transform:none !important; }
.cs-btn:not(:disabled):hover { transform:translateY(-3px); filter:brightness(1.2); }

.btn-in  { background:rgba(34,197,94,.12);  border:1px solid rgba(34,197,94,.3);  color:var(--green); }
.btn-brk { background:rgba(234,179,8,.12);  border:1px solid rgba(234,179,8,.3);  color:var(--yellow); }
.btn-out { background:rgba(239,68,68,.12);  border:1px solid rgba(239,68,68,.3);  color:var(--red); }
.btn-in:not(:disabled):hover  { box-shadow:0 0 20px rgba(34,197,94,.25); }
.btn-brk:not(:disabled):hover { box-shadow:0 0 20px rgba(234,179,8,.25); }
.btn-out:not(:disabled):hover { box-shadow:0 0 20px rgba(239,68,68,.25); }

/* Today's log */
.cs-log-title {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-faint); margin-bottom:.75rem;
}
.cs-log { max-height:180px; overflow-y:auto; }
.log-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.5rem .1rem; border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.8rem;
}
.log-item:last-child { border-bottom:none; }
.log-type {
  width:70px; text-align:center; padding:.18rem .4rem;
  border-radius:6px; font-size:.68rem; font-weight:700; flex-shrink:0;
}
.lt-in  { background:rgba(34,197,94,.12); color:var(--green); }
.lt-out { background:rgba(239,68,68,.12); color:var(--red); }
.lt-brk { background:rgba(234,179,8,.12); color:var(--yellow); }
.lt-brke { background:rgba(59,130,246,.12); color:#3b82f6; }
.log-time { color:var(--text-muted); flex-shrink:0; font-variant-numeric:tabular-nums; }
.log-loc { color:var(--text-faint); font-size:.73rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.log-empty { font-size:.82rem; color:var(--text-faint); text-align:center; padding:1rem 0; }

/* Today summary */
.cs-summary {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1rem;
  padding-top:1rem; border-top:1px solid var(--border);
}
.summary-item { text-align:center; }
.summary-val { font-size:1rem; font-weight:700; color:var(--text); }
.summary-lbl { font-size:.65rem; color:var(--text-faint); margin-top:.15rem; text-transform:uppercase; letter-spacing:.05em; }

/* Saving indicator */
.cs-saving {
  font-size:.72rem; color:var(--text-faint); text-align:center;
  margin-bottom:.5rem; min-height:1.2em; transition:opacity .3s;
}

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:99px; }

@media (max-width:480px) {
  body { padding:1rem; }
  .cs-time { font-size:3rem; }
  .cs-btns { gap:.5rem; }
}