/* ============================================================
   CLOCKIFY — Premium UI v3.0
   Dot-grid bg · Animated radar sweep · Gradient clock hero
   JetBrains Mono · Inter · Pure CSS, no frameworks
   ============================================================ */

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

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --page:        #060b15;
  --surface:     #0b1120;
  --card:        rgba(11, 17, 32, 0.88);
  --card-hover:  rgba(14, 22, 42, 0.92);
  --input-bg:    rgba(6, 10, 18, 0.8);

  --indigo-3: #a5b4fc;
  --indigo-4: #818cf8;
  --indigo-5: #6366f1;
  --indigo-6: #4f46e5;
  --violet-4: #a78bfa;
  --violet-5: #8b5cf6;

  --green-4:  #4ade80;
  --green-5:  #22c55e;
  --amber-4:  #fbbf24;
  --amber-5:  #f59e0b;
  --red-4:    #f87171;
  --red-5:    #ef4444;

  --t1: #f1f5f9;   /* primary text   */
  --t2: #94a3b8;   /* secondary text */
  --t3: #475569;   /* tertiary text  */
  --t4: #1e293b;   /* disabled       */

  --b1: rgba(255,255,255,0.05);
  --b2: rgba(255,255,255,0.09);
  --b3: rgba(255,255,255,0.15);

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 9999px;

  --ui: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --out:    cubic-bezier(0.16,1,0.3,1);
  --inout:  cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  background: var(--page);
  color: var(--t1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── AMBIENT BACKGROUND ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 15% -5%,  rgba(99,102,241,.13) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 85% 105%, rgba(139,92,246,.09) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%,  rgba(59,130,246,.04) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* dot-grid */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none; z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* ── NAVBAR ──────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  height: 60px;
  background: rgba(6,11,21,.82);
  backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid var(--b1);
  position: sticky; top: 0; z-index: 500;
}
.navbar::after {
  content: '';
  position: absolute; inset-x: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.4), transparent);
}

.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
}
.brand-logo-img {
  width: 32px; height: 32px; border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(99,102,241,.3);
  box-shadow: 0 0 16px rgba(99,102,241,.22);
}
.brand-wordmark {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; color: var(--t1);
}
.brand-wordmark em {
  font-style: normal;
  background: linear-gradient(135deg, var(--indigo-4), var(--violet-4));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-tag {
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--indigo-4);
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25);
  padding: .12rem .4rem; border-radius: var(--r-pill);
}

.nav-actions { display: flex; align-items: center; gap: .5rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--t2); text-decoration: none; font-size: .84rem;
  font-weight: 500; padding: .38rem .85rem; border-radius: var(--r-sm);
  border: 1px solid transparent; transition: all .2s var(--inout);
}
.nav-link:hover { color: var(--t1); background: var(--b1); border-color: var(--b2); }
.nav-link-accent {
  color: var(--indigo-4);
  background: rgba(99,102,241,.09);
  border-color: rgba(99,102,241,.22);
}
.nav-link-accent:hover {
  color: var(--indigo-3); background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.4);
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
  width: 100%; max-width: 680px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 5rem;
  display: flex; flex-direction: column; gap: 1rem;
}

/* ── GLASS CARD ──────────────────────────────────────────── */
.card {
  background: var(--card);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 28px rgba(0,0,0,.45);
  position: relative; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}

/* gradient-border variant */
.card-glow {
  border-color: transparent;
}
.card-glow::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(99,102,241,.45) 0%,
    rgba(139,92,246,.2) 50%,
    rgba(99,102,241,.06) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ── EMPLOYEE BAR ────────────────────────────────────────── */
.employee-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.2rem;
  background: rgba(11,17,32,.7);
  backdrop-filter: blur(14px);
  border: 1px solid var(--b1); border-radius: var(--r-lg);
  transition: border-color .2s;
}
.employee-bar:hover { border-color: var(--b2); }

.employee-info { display: flex; align-items: center; gap: .85rem; }

.avatar {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-5), var(--violet-5));
  display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--page), 0 0 0 3.5px rgba(99,102,241,.5),
              0 0 18px rgba(99,102,241,.28);
}
.avatar::after {
  content: '';
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green-5); border: 2px solid var(--page);
  box-shadow: 0 0 8px rgba(34,197,94,.6);
}

.employee-text h3 { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.employee-text p  { font-size: .75rem; color: var(--t2); margin-top: .08rem; }

.btn-switch {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; color: var(--indigo-4);
  border: 1px solid rgba(99,102,241,.28);
  padding: .38rem .9rem; border-radius: var(--r-sm);
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .2s; font-family: var(--ui); white-space: nowrap;
}
.btn-switch:hover {
  background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.5);
  transform: translateY(-1px);
}

/* ── CLOCK HERO ──────────────────────────────────────────── */
.clock-card {
  padding: 2.75rem 2rem 2.25rem;
  text-align: center;
  background: rgba(8,12,24,.92);
}

/* subtle grid lines inside clock card */
.clock-card::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(99,102,241,.025) 0, rgba(99,102,241,.025) 1px,
      transparent 1px, transparent 56px),
    repeating-linear-gradient(90deg,
      rgba(99,102,241,.025) 0, rgba(99,102,241,.025) 1px,
      transparent 1px, transparent 56px);
}

.clock-eyebrow {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .15em; color: var(--indigo-4); opacity: .8;
  margin-bottom: .75rem; position: relative; z-index: 1;
}

.digital-clock {
  font-family: var(--mono);
  font-size: 5.75rem; font-weight: 700;
  line-height: 1; letter-spacing: -.05em;
  background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 40%, #a5b4fc 70%, #818cf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(99,102,241,.22));
  margin-bottom: .65rem;
  position: relative; z-index: 1;
}

.date-display {
  font-size: .9rem; color: var(--t2); font-weight: 400;
  position: relative; z-index: 1;
}

/* bottom gradient fade line */
.clock-card .glow-line {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 55%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.45), transparent);
}

/* ── RADAR SECTION ───────────────────────────────────────── */
.radar-card {
  display: flex; align-items: center; gap: 1.75rem;
  padding: 1.5rem 1.75rem;
}

/* ─ Radar Circle ─ */
.radar-wrap {
  position: relative; width: 168px; height: 168px; flex-shrink: 0;
}

/* outermost ring — acts as clip container */
.radar-bg {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(8,12,22,.7);
  border: 1.5px solid rgba(99,102,241,.22);
  overflow: hidden;
}

/* inner concentric rings */
.radar-bg::before,
.radar-bg::after {
  content: ''; position: absolute; border-radius: 50%; border-style: solid;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.radar-bg::before {
  width: 66%; height: 66%;
  border: 1px solid rgba(99,102,241,.13);
}
.radar-bg::after {
  width: 36%; height: 36%;
  border: 1px solid rgba(99,102,241,.1);
}

/* crosshairs */
.radar-ch {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  pointer-events: none;
}
.radar-ch::before,
.radar-ch::after {
  content: ''; position: absolute; background: rgba(99,102,241,.1);
}
.radar-ch::before { left: 8%; right: 8%; top: 50%; height: 1px; transform: translateY(-50%); }
.radar-ch::after  { top: 8%; bottom: 8%; left: 50%; width: 1px; transform: translateX(-50%); }

/* spinning layer (beam + trailing glow) */
.radar-spin {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  animation: radarSpin 3s linear infinite;
}
.radar-spin::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 50%; height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(99,102,241,.95), rgba(99,102,241,.05));
}
.radar-spin::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    from -55deg,
    rgba(99,102,241,.14) 0deg,
    rgba(99,102,241,.0)  55deg
  );
}

@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* status tint layers (swapped in by JS) */
.radar-wrap.is-inside  .radar-bg { border-color: rgba(34,197,94,.28); }
.radar-wrap.is-inside  .radar-bg::before { border-color: rgba(34,197,94,.15); }
.radar-wrap.is-inside  .radar-spin::before { background: linear-gradient(90deg, rgba(34,197,94,.9), transparent); }
.radar-wrap.is-inside  .radar-spin::after  { background: conic-gradient(from -55deg, rgba(34,197,94,.14) 0deg, rgba(34,197,94,0) 55deg); }

.radar-wrap.is-outside .radar-bg { border-color: rgba(239,68,68,.28); }
.radar-wrap.is-outside .radar-bg::before { border-color: rgba(239,68,68,.15); }
.radar-wrap.is-outside .radar-spin::before { background: linear-gradient(90deg, rgba(239,68,68,.9), transparent); }
.radar-wrap.is-outside .radar-spin::after  { background: conic-gradient(from -55deg, rgba(239,68,68,.14) 0deg, rgba(239,68,68,0) 55deg); }

/* centre origin pip */
.radar-origin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--indigo-4);
  box-shadow: 0 0 10px rgba(99,102,241,.9); z-index: 3;
}

/* user position dot */
.radar-user {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber-4);
  box-shadow: 0 0 10px rgba(251,191,36,.8);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  transition: all 1.2s var(--out); z-index: 4;
}
.radar-user.dot-inside  { background: var(--green-4); box-shadow: 0 0 12px rgba(74,222,128,.8), 0 0 24px rgba(74,222,128,.3); }
.radar-user.dot-outside { background: var(--red-4);   box-shadow: 0 0 12px rgba(248,113,113,.8), 0 0 24px rgba(248,113,113,.3); }

/* ─ Status Panel ─ */
.radar-info { flex: 1; display: flex; flex-direction: column; gap: .85rem; }

.radar-eyebrow {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--t3);
}

/* Status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .85rem; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid; width: fit-content;
}
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  animation: pillpulse 1.6s ease-in-out infinite;
}
@keyframes pillpulse {
  0%,100% { transform: scale(.85); opacity: .7; }
  50%      { transform: scale(1.3); opacity: 1; }
}
.pill-checking { color: var(--amber-4); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); }
.pill-checking .pill-dot { background: var(--amber-4); box-shadow: 0 0 6px var(--amber-4); }
.pill-inside   { color: var(--green-4); border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); }
.pill-inside   .pill-dot { background: var(--green-4); box-shadow: 0 0 6px var(--green-4); }
.pill-outside  { color: var(--red-4);   border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
.pill-outside  .pill-dot { background: var(--red-4);   box-shadow: 0 0 6px var(--red-4); }

.distance-fig {
  font-family: var(--mono); font-size: 1.8rem; font-weight: 600;
  color: var(--t1); letter-spacing: -.03em; line-height: 1;
}
.distance-cap { font-size: .75rem; color: var(--t3); line-height: 1.55; }

/* ── ACTION BUTTON ───────────────────────────────────────── */
.action-wrap { display: flex; flex-direction: column; }

.btn-action {
  width: 100%; height: 64px;
  border: none; border-radius: var(--r-lg);
  font-size: 1rem; font-weight: 700; letter-spacing: .025em;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  font-family: var(--ui);
  background: linear-gradient(135deg, var(--indigo-6) 0%, var(--indigo-5) 50%, #818cf8 100%);
  box-shadow: 0 0 0 1px rgba(99,102,241,.4),
              0 4px 28px rgba(99,102,241,.38),
              inset 0 1px 0 rgba(255,255,255,.12);
  position: relative; overflow: hidden;
  transition: transform .25s var(--out), box-shadow .25s var(--out);
}

/* shimmer sweep */
.btn-action::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -120%; width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: skewX(-18deg);
  animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%      { left: -120%; }
  55%,100%{ left: 130%; }
}

.btn-action:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(99,102,241,.55),
              0 10px 40px rgba(99,102,241,.55),
              inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-action:active:not(:disabled) { transform: translateY(0); }

.btn-action:disabled {
  opacity: .35; cursor: not-allowed;
  filter: saturate(.25); box-shadow: none;
}
.btn-action:disabled::before { display: none; }

/* CLOCK OUT state */
.btn-clock-out {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #f87171 100%);
  box-shadow: 0 0 0 1px rgba(239,68,68,.4),
              0 4px 28px rgba(239,68,68,.32),
              inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-clock-out:hover:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(239,68,68,.55),
              0 10px 40px rgba(239,68,68,.5),
              inset 0 1px 0 rgba(255,255,255,.12);
}

/* ready-to-clockin glow pulse */
.btn-action.btn-ready {
  animation: readyGlow 2.5s ease-in-out infinite;
}
@keyframes readyGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(99,102,241,.4), 0 4px 28px rgba(99,102,241,.38); }
  50%     { box-shadow: 0 0 0 1px rgba(99,102,241,.6), 0 4px 40px rgba(99,102,241,.6), 0 0 60px rgba(99,102,241,.18); }
}

/* ── SHIFT SUMMARY ───────────────────────────────────────── */
.shift-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.sum-card {
  padding: 1.2rem 1.25rem;
  background: rgba(11,17,32,.8); border: 1px solid var(--b1);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: .3rem;
  position: relative; overflow: hidden;
  transition: border-color .2s;
}
.sum-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
}
.sum-card:hover { border-color: var(--b2); }

.sum-icon  { font-size: .9rem; line-height: 1; margin-bottom: .05rem; }
.sum-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--t3);
}
.sum-value {
  font-family: var(--mono); font-size: 1.55rem; font-weight: 600;
  color: var(--t1); letter-spacing: -.03em; line-height: 1;
}

/* ── HISTORY ─────────────────────────────────────────────── */
.history-card { padding: 1.5rem; }

.history-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.history-ttl {
  font-size: .88rem; font-weight: 700;
  display: flex; align-items: center; gap: .5rem;
}
.history-ttl-ic {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2);
  display: grid; place-items: center; font-size: .72rem;
}
.history-cnt {
  font-size: .68rem; font-weight: 600; color: var(--t3);
  background: var(--b1); border: 1px solid var(--b1);
  padding: .16rem .5rem; border-radius: var(--r-pill);
}

.history-list { display: flex; flex-direction: column; gap: .45rem; }

.h-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem .95rem; border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: all .15s var(--inout); cursor: default;
}
.h-item:hover { background: rgba(255,255,255,.03); border-color: var(--b1); }

.h-left { display: flex; align-items: center; gap: .8rem; }

.h-date-box {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.16);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.h-day { font-size: .85rem; font-weight: 700; color: var(--t1); line-height: 1; }
.h-mon {
  font-size: .5rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--indigo-4); line-height: 1.4;
}

.h-info {}
.h-date-str { font-size: .82rem; font-weight: 600; color: var(--t1); line-height: 1.3; }
.h-times { font-family: var(--mono); font-size: .69rem; color: var(--t3); margin-top: .1rem; }

.h-badge {
  font-size: .63rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .2rem .6rem;
  border-radius: var(--r-pill); border: 1px solid; white-space: nowrap;
}
.h-ontime { color: var(--green-4); border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.07); }
.h-late   { color: var(--amber-4); border-color: rgba(251,191,36,.3);  background: rgba(251,191,36,.07); }

/* empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.25rem 1rem; color: var(--t3); }
.empty-ic  { font-size: 2rem; opacity: .45; }
.empty-msg { font-size: .85rem; font-weight: 500; color: var(--t2); }

/* ── TOAST ───────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .55rem;
  z-index: 9999; max-width: 360px; width: calc(100vw - 3rem);
}
.toast {
  display: flex; align-items: center; gap: .75rem;
  padding: .82rem 1.1rem; border-radius: var(--r-lg);
  border: 1px solid var(--b2);
  background: rgba(11,17,35,.96); backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  font-size: .84rem; color: var(--t1);
  animation: toastIn .38s var(--spring);
}
@keyframes toastIn { from { opacity:0; transform: translateX(100%) scale(.85); } to { opacity:1; transform: translateX(0) scale(1); } }
.t-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: .84rem; flex-shrink: 0;
}
.toast.success { border-color: rgba(34,197,94,.3); }
.toast.success .t-icon { background: rgba(34,197,94,.1); }
.toast.error   { border-color: rgba(239,68,68,.3); }
.toast.error   .t-icon { background: rgba(239,68,68,.1); }
.toast.warning { border-color: rgba(251,191,36,.3); }
.toast.warning .t-icon { background: rgba(251,191,36,.1); }

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72); backdrop-filter: blur(14px);
  display: none; place-items: center; z-index: 1000; padding: 1.25rem;
}
.modal-overlay.open { display: grid; }

.modal-box {
  background: #0d1526;
  border: 1px solid var(--b2); border-radius: var(--r-xl);
  width: 100%; max-width: 420px;
  box-shadow: 0 28px 72px rgba(0,0,0,.75), 0 0 0 1px rgba(99,102,241,.08);
  overflow: hidden;
  animation: modalPop .3s var(--spring);
}
@keyframes modalPop { from { opacity:0; transform: scale(.88) translateY(18px); } to { opacity:1; transform: scale(1) translateY(0); } }

.modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--b1);
}
.modal-hd h3 {
  font-size: .95rem; font-weight: 700;
  display: flex; align-items: center; gap: .45rem;
}
.modal-x {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--b1); border: 1px solid var(--b1);
  color: var(--t2); cursor: pointer;
  display: grid; place-items: center; font-size: 1.05rem;
  transition: all .15s; line-height: 1;
}
.modal-x:hover { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: var(--red-4); }

.modal-search-wrap { padding: .8rem 1rem; border-bottom: 1px solid var(--b1); }
.modal-search {
  width: 100%; background: var(--input-bg); border: 1px solid var(--b1);
  border-radius: var(--r-sm); padding: .6rem .9rem;
  color: var(--t1); font-size: .875rem; outline: none; font-family: var(--ui);
  transition: border-color .2s, box-shadow .2s;
}
.modal-search::placeholder { color: var(--t3); }
.modal-search:focus { border-color: rgba(99,102,241,.5); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

.modal-list {
  display: flex; flex-direction: column; padding: .6rem;
  max-height: 320px; overflow-y: auto; gap: .2rem;
  scrollbar-width: thin; scrollbar-color: var(--b2) transparent;
}
.modal-list::-webkit-scrollbar { width: 4px; }
.modal-list::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px; }

.emp-opt {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem .9rem; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; transition: all .15s;
}
.emp-opt:hover { background: rgba(255,255,255,.04); border-color: var(--b1); }
.emp-opt.active { background: rgba(99,102,241,.09); border-color: rgba(99,102,241,.25); }

.emp-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-5), var(--violet-5));
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.emp-name { font-size: .875rem; font-weight: 600; color: var(--t1); line-height: 1.3; }
.emp-meta { font-size: .7rem; color: var(--t3); margin-top: .08rem; }
.emp-arrow { margin-left: auto; color: var(--t3); font-size: .75rem; transition: color .15s; }
.emp-opt:hover .emp-arrow, .emp-opt.active .emp-arrow { color: var(--indigo-4); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .navbar { padding: 0 1rem; height: 54px; }
  .brand-tag { display: none; }
  .container { padding: 1.25rem .9rem 4rem; gap: .85rem; }
  .digital-clock { font-size: 3.8rem; }
  .clock-card { padding: 2.25rem 1.5rem 1.75rem; }
  .radar-card { gap: 1.25rem; }
  .radar-wrap { width: 144px; height: 144px; }
  .distance-fig { font-size: 1.5rem; }
  .sum-value { font-size: 1.3rem; }
  .btn-action { height: 58px; }
  .toast-container { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; width: auto; }
}
@media (max-width: 380px) {
  .digital-clock { font-size: 3rem; }
  .radar-card { flex-direction: column; align-items: center; }
  .radar-wrap { width: 160px; height: 160px; }
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--b3); }
::selection { background: rgba(99,102,241,.25); color: var(--t1); }

/* ── AUTH LOGIN GATES ───────────────────────────────────── */
.auth-gate-wrap {
  width: 100%;
  max-width: 440px;
  margin: 2.5rem auto;
  animation: authPop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes authPop {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-gate-card {
  background: var(--surface);
  border: 1px solid var(--b2);
  border-radius: var(--r-xl);
  padding: 2.25rem 2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.1);
  position: relative;
  overflow: hidden;
}
.auth-gate-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--indigo-5), var(--violet-5), var(--pink-5));
}
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(99,102,241,.12);
  color: var(--indigo-3);
  border: 1px solid rgba(99,102,241,.25);
  margin-bottom: 1rem;
}
.auth-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}
.auth-sub {
  font-size: .84rem;
  color: var(--t2);
  line-height: 1.5;
  margin-bottom: 1.75rem;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.auth-label {
  font-size: .76rem;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.auth-input, .auth-select {
  height: 44px;
  padding: 0 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--b2);
  border-radius: var(--r-md);
  color: var(--t1);
  font-size: .9rem;
  font-family: inherit;
  transition: all .2s;
  outline: none;
}
.auth-input:focus, .auth-select:focus {
  border-color: var(--indigo-5);
  background: rgba(99,102,241,.04);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.auth-select option {
  background: #0d1526;
  color: #f1f5f9;
}
.auth-btn {
  height: 48px;
  margin-top: .5rem;
  background: linear-gradient(135deg, var(--indigo-6), var(--violet-6));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: all .2s;
  box-shadow: 0 8px 24px rgba(99,102,241,.3);
}
.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(99,102,241,.45);
}
.auth-btn:active {
  transform: translateY(0);
}
.auth-note {
  font-size: .76rem;
  color: var(--t3);
  text-align: center;
  margin-top: 1rem;
  line-height: 1.45;
}