/* ============================================================
   ATPLUS Key Server — Admin Design System
   Palette: deep space navy + electric violet + signal teal
   Type:    Space Grotesk (display) / Inter (UI) / JetBrains Mono (codes)
   Signature: the "keycard" — license keys render like badge chips
              with a status-colored edge, echoing the physical
              key-card metaphor of the product itself.
   ============================================================ */

:root{
  --bg:        #0B1120;
  --surface:   #131B2E;
  --surface-2: #1B2540;
  --surface-3: #212C4A;
  --border:    rgba(148,163,197,.14);
  --border-strong: rgba(148,163,197,.28);

  --text:      #E7EAF3;
  --muted:     #8993AA;
  --muted-2:   #647089;

  --accent:    #7C5CFC;
  --accent-2:  #6247E0;
  --teal:      #22D3B8;
  --amber:     #F5A623;
  --coral:     #FF5D5D;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  --glow-accent: 0 0 0 1px rgba(124,92,252,.25), 0 8px 24px -8px rgba(124,92,252,.45);
  --glow-teal: 0 0 0 1px rgba(34,211,184,.25), 0 8px 24px -8px rgba(34,211,184,.45);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(124,92,252,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34,211,184,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3,h4,.display{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-.01em;
  margin:0;
}

.mono, code, .keycard .key-value, td.mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.02em;
}

a{ color:inherit; text-decoration:none; }

/* ---------- Layout shell ---------- */
.shell{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:248px;
  flex-shrink:0;
  background:linear-gradient(180deg, var(--surface) 0%, #0F1626 100%);
  border-right:1px solid var(--border);
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:sticky;
  top:0;
  height:100vh;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 22px 10px;
}
.brand .mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--teal));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;font-family:'Space Grotesk',sans-serif;
  box-shadow:var(--glow-accent);
  flex-shrink:0;
}
.brand .name{ font-weight:600; font-size:15px; line-height:1.15; }
.brand .name small{ display:block; color:var(--muted); font-weight:400; font-size:11px; }

.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:14px; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.nav-link svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{
  background:linear-gradient(90deg, rgba(124,92,252,.18), rgba(124,92,252,.02));
  color:#fff;
  box-shadow:inset 2px 0 0 var(--accent);
}
.nav-link.danger:hover{ color:var(--coral); background:rgba(255,93,93,.08); }

.sidebar-footer{
  margin-top:auto;
  padding:12px 10px;
  color:var(--muted-2);
  font-size:11px;
}

.main{
  flex:1;
  min-width:0;
  padding:28px 32px 48px;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; gap:16px; flex-wrap:wrap;
}
.topbar h1{ font-size:22px; }
.topbar .sub{ color:var(--muted); font-size:13px; margin-top:4px; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.card-pad{ padding:22px 24px; }
.card-header{
  padding:18px 24px;
  border-bottom:1px solid var(--border);
  font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px;
  color:var(--text);
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
  margin-bottom:22px;
}
.stat{
  padding:20px 22px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  background:var(--surface);
}
.stat::after{
  content:"";
  position:absolute; inset:auto -20% -60% auto;
  width:140px;height:140px;border-radius:50%;
  filter:blur(10px); opacity:.35;
}
.stat.total::after{ background:var(--accent); }
.stat.active::after{ background:var(--teal); }
.stat.locked::after{ background:var(--coral); }
.stat .label{ color:var(--muted); font-size:12.5px; font-weight:500; margin-bottom:8px; position:relative; }
.stat .value{ font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:600; position:relative; }
.stat .trend{ font-size:11.5px; color:var(--muted-2); margin-top:6px; position:relative; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; }
table.grid{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.grid th{
  text-align:left; padding:12px 16px; color:var(--muted);
  font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.grid td{
  padding:13px 16px; border-bottom:1px solid var(--border);
  vertical-align:middle; color:var(--text);
}
table.grid tr:last-child td{ border-bottom:none; }
table.grid tr:hover td{ background:rgba(255,255,255,.015); }

/* keycard-chip: the signature element, echoing a physical badge */
.keycard{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 12px 6px 10px;
  border-radius:9px;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-left:3px solid var(--muted-2);
}
.keycard.on{ border-left-color:var(--teal); }
.keycard.off{ border-left-color:var(--coral); }
.keycard .key-value{ font-size:12.5px; color:var(--text); }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600;
}
.badge .dot{ width:6px;height:6px;border-radius:50%; }
.badge.on{ background:rgba(34,211,184,.12); color:var(--teal); }
.badge.on .dot{ background:var(--teal); box-shadow:0 0 8px var(--teal); }
.badge.off{ background:rgba(255,93,93,.12); color:var(--coral); }
.badge.off .dot{ background:var(--coral); }

/* ---------- Forms / buttons ---------- */
label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; font-weight:500; }
.field{ margin-bottom:16px; }
input[type=text], input[type=password], input[type=datetime-local], select, textarea{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  color:var(--text);
  border-radius:10px;
  padding:11px 13px;
  font-size:14px;
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,92,252,.18);
}
::placeholder{ color:var(--muted-2); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px;
  border-radius:10px;
  font-size:13.5px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .1s ease, filter .15s ease, background .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--glow-accent); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-teal{ background:linear-gradient(135deg,var(--teal),#189d89); color:#04241f; box-shadow:var(--glow-teal); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-danger{ background:rgba(255,93,93,.12); color:var(--coral); border-color:rgba(255,93,93,.3); }
.btn-danger:hover{ background:rgba(255,93,93,.2); }
.btn-sm{ padding:7px 11px; font-size:12.5px; border-radius:8px; }
.btn-block{ width:100%; }

.actions{ display:flex; gap:6px; flex-wrap:wrap; }

.alert{
  padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px;
  border:1px solid transparent;
}
.alert-danger{ background:rgba(255,93,93,.1); border-color:rgba(255,93,93,.28); color:#ffb4b4; }
.alert-success{ background:rgba(34,211,184,.1); border-color:rgba(34,211,184,.28); color:#8ff0e0; }

.pagination{ display:flex; gap:6px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.pagination a{
  padding:8px 13px; border-radius:8px; font-size:13px;
  border:1px solid var(--border-strong); color:var(--muted);
}
.pagination a.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination a:hover:not(.active){ background:var(--surface-2); color:var(--text); }

.search-bar{ display:flex; gap:10px; }
.search-bar input{ flex:1; }

/* ---------- Login page ---------- */
.login-shell{
  min-height:100vh; display:flex;
}
.login-aside{
  flex:1.1;
  background:
    radial-gradient(700px 500px at 20% 20%, rgba(124,92,252,.35), transparent 60%),
    radial-gradient(600px 500px at 80% 80%, rgba(34,211,184,.25), transparent 55%),
    #0A0F1D;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px;
  position:relative;
  overflow:hidden;
}
.login-aside .badge-strip{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;
}
.ghost-key{
  font-family:'JetBrains Mono',monospace;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.55);
  padding:8px 12px; border-radius:9px; font-size:12px;
  background:rgba(255,255,255,.03);
}
.login-form-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:32px;
}
.login-card{ width:100%; max-width:380px; }
.login-card .kicker{ color:var(--teal); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.login-card h2{ font-size:26px; margin-bottom:6px; }
.login-card .hint{ color:var(--muted); font-size:13.5px; margin-bottom:26px; }
.login-footnote{ text-align:center; color:var(--muted-2); font-size:12px; margin-top:20px; }

@media (max-width:900px){
  .login-aside{ display:none; }

  .shell{ flex-direction:column; }
  .sidebar{
    position:sticky; top:0; z-index:40;
    width:100%; height:auto;
    flex-direction:row;
    align-items:center;
    padding:10px 10px;
    gap:2px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .sidebar .brand{ display:none; }
  .sidebar .nav-link{
    flex-shrink:0;
    padding:9px 13px;
    white-space:nowrap;
  }
  .sidebar-footer{
    margin-top:0;
    margin-left:auto;
    padding:0;
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .sidebar-footer .nav-link{ padding:9px 13px; }
  .sidebar-footer .copyright{ display:none; }

  .main{ padding:16px; }
}

/* ============================================================
   Motion system — subtle, purposeful, never gratuitous
   ============================================================ */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-3%,4%) scale(1.06); }
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 0 rgba(34,211,184,.5); }
  50%{ box-shadow:0 0 0 5px rgba(34,211,184,0); }
}
@keyframes shimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
@keyframes toastIn{
  from{ opacity:0; transform:translateY(-8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}

.main > *{
  animation:fadeUp .45s cubic-bezier(.16,.9,.3,1) both;
}
.main > *:nth-child(1){ animation-delay:0s; }
.main > *:nth-child(2){ animation-delay:.04s; }
.main > *:nth-child(3){ animation-delay:.08s; }
.main > *:nth-child(4){ animation-delay:.12s; }
.main > *:nth-child(5){ animation-delay:.16s; }

.bg-blob{
  position:fixed; z-index:-1; border-radius:50%;
  filter:blur(60px); opacity:.28; pointer-events:none;
  animation:drift 16s ease-in-out infinite;
}
.bg-blob.b1{ width:420px;height:420px; background:var(--accent); top:-120px; left:-100px; }
.bg-blob.b2{ width:380px;height:380px; background:var(--teal); bottom:-140px; right:-80px; animation-delay:-8s; }

.stat{ transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.stat:hover{ transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.stat .dot-live{
  position:absolute; top:20px; right:22px; width:8px; height:8px; border-radius:50%;
  background:var(--teal); animation:pulseDot 2s infinite;
}

.card{ transition:border-color .2s ease; }
table.grid tr{ transition:background .12s ease; }
table.grid tr td{ animation:none; }

.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.btn:hover::after{ opacity:1; }

.nav-link{ position:relative; }
.nav-link.active::before{
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:3px; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}

/* skeleton shimmer, for future async-loaded pieces */
.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:8px;
}

/* ---------- Toast notifications ---------- */
#toast-stack{
  position:fixed; top:18px; right:18px; z-index:200;
  display:flex; flex-direction:column; gap:10px;
}
.toast{
  min-width:240px; max-width:340px;
  padding:13px 16px; border-radius:12px;
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
  font-size:13.5px; font-weight:500;
  display:flex; align-items:center; gap:10px;
  animation:toastIn .3s ease both;
}
.toast.success{ border-color:rgba(34,211,184,.4); }
.toast.success .toast-ico{ color:var(--teal); }
.toast.danger{ border-color:rgba(255,93,93,.4); }
.toast.danger .toast-ico{ color:var(--coral); }
.toast-ico{ font-size:16px; flex-shrink:0; }

/* ---------- Mini analytics chart ---------- */
.chart-card{ padding:22px 24px; }
.chart-legend{ display:flex; gap:16px; font-size:12px; color:var(--muted); margin-top:10px; flex-wrap:wrap; }
.chart-legend .item{ display:flex; align-items:center; gap:6px; }
.chart-legend .dot{ width:8px;height:8px;border-radius:50%; }
.sparkline-wrap{ width:100%; overflow:hidden; }
.sparkline-wrap svg{ width:100%; height:auto; display:block; }

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center; padding:56px 20px; color:var(--muted);
}
.empty-state .emoji{ font-size:34px; margin-bottom:10px; }
.empty-state .title{ color:var(--text); font-weight:600; margin-bottom:4px; font-size:15px; }
.empty-state .hint{ font-size:13px; }

/* ---------- Section title with accent bar ---------- */
.section-title{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:28px 0 14px;
}
.section-title::before{
  content:""; width:16px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--teal));
}

/* ---------- Quick-action tiles ---------- */
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.tile{
  padding:18px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column; gap:10px;
  transition:transform .18s ease, border-color .18s ease;
}
.tile:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.tile .icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; box-shadow:var(--glow-accent);
}
.tile .icon.teal{ background:linear-gradient(135deg,var(--teal),#189d89); box-shadow:var(--glow-teal); color:#04241f; }
.tile .icon.amber{ background:linear-gradient(135deg,var(--amber),#c9820f); box-shadow:0 0 0 1px rgba(245,166,35,.25),0 8px 24px -8px rgba(245,166,35,.45); }
.tile .t{ font-weight:600; font-size:14px; }
.tile .d{ font-size:12px; color:var(--muted); }

/* ---------- Login page motion ---------- */
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.login-card{ animation:fadeUp .5s cubic-bezier(.16,.9,.3,1) both; }
.login-aside > *{ animation:fadeUp .5s cubic-bezier(.16,.9,.3,1) both; }
.login-aside .badge-strip{ animation-delay:.1s; }
.ghost-key{ display:inline-block; animation:floatY 3.2s ease-in-out infinite; }
.ghost-key:nth-child(2){ animation-delay:.35s; }
.ghost-key:nth-child(3){ animation-delay:.7s; }
.login-aside::before{
  content:"";
  position:absolute; inset:-20%;
  background:radial-gradient(500px 400px at 30% 40%, rgba(124,92,252,.18), transparent 60%);
  animation:drift 14s ease-in-out infinite;
  pointer-events:none;
}