/* ============================================================
   WRONIX admin — mission control styling
   Original work for wronix.com
   ============================================================ */

.admin-body{background:var(--bg)}
.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100svh}
@media(max-width:860px){.admin-shell{grid-template-columns:minmax(0,1fr)}.admin-side{flex-direction:row !important;flex-wrap:wrap;align-items:center}}

.admin-side{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.6rem 1.1rem;border-right:1px solid var(--line);
  background:var(--bg-2);position:sticky;top:0;height:100svh;
}
@media(max-width:860px){.admin-side{position:static;height:auto}}
.admin-nav{display:flex;flex-direction:column;gap:.3rem}
@media(max-width:860px){.admin-nav{flex-direction:row;flex-wrap:wrap}}
.admin-nav a{
  color:var(--ink-dim);font-weight:600;font-size:.93rem;
  padding:.65rem .9rem;border-radius:12px;transition:all .18s;
}
.admin-nav a:hover{background:var(--panel);color:var(--ink);text-decoration:none}
.admin-nav a.active{background:var(--cyan-soft);color:var(--cyan)}
.admin-logout{
  background:transparent;border:1px solid var(--line-strong);color:var(--ink-dim);
  border-radius:12px;padding:.6rem 1rem;font-weight:600;width:100%;transition:all .18s;
}
.admin-logout:hover{color:var(--red);border-color:var(--red)}

.admin-main{padding:2.4rem clamp(1.2rem,4vw,3rem);max-width:1180px;width:100%;min-width:0}
.admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.8rem}
.admin-head h1{font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.3rem);margin:.3rem 0}

.admin-flash{
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.45);color:var(--green);
  border-radius:14px;padding:.8rem 1.2rem;font-weight:600;margin-bottom:1.4rem;
  animation:flashIn .5s ease;
}
@keyframes flashIn{from{opacity:0;transform:translateY(-12px)}}
.admin-error{
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.45);color:var(--red);
  border-radius:14px;padding:.8rem 1.2rem;font-weight:600;width:100%;
}

.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.6rem}
.a-stat{
  border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  transition:transform .25s,border-color .25s;
}
.a-stat:hover{transform:translateY(-4px);border-color:var(--cyan)}
.a-stat span{color:var(--ink-faint);font-size:.74rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.a-stat b{display:block;font-family:var(--font-display);font-size:2.3rem;color:var(--cyan);margin-top:.2rem}
.a-stat.moving b{color:var(--amber)}
.a-stat.done b{color:var(--green)}

.admin-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media(max-width:980px){.admin-cols{grid-template-columns:minmax(0,1fr)}}

.table-wrap{overflow-x:auto}
.a-table{width:100%;border-collapse:collapse;font-size:.9rem}
.a-table th{
  text-align:left;color:var(--ink-faint);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.6rem .8rem;border-bottom:1px solid var(--line);
}
.a-table td{padding:.8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.a-table tr:hover td{background:rgba(130,160,255,.04)}
.muted-cell{color:var(--ink-dim);font-size:.84rem}
.code-link{font-weight:700;color:var(--cyan);letter-spacing:.03em}

.stage-badge{
  display:inline-block;border-radius:999px;padding:.22rem .7rem;font-size:.74rem;font-weight:700;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--ink-dim);white-space:nowrap;
}
.stage-badge.st-3,.stage-badge.st-4,.stage-badge.st-5{color:var(--amber);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.stage-badge.st-6{color:var(--green);border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.stage-badge.st-2{color:var(--cyan);border-color:rgba(34,211,238,.4);background:var(--cyan-soft)}
.mini-bar{display:block;height:4px;border-radius:4px;background:var(--panel-2);margin-top:.4rem;overflow:hidden;min-width:90px}
.mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:4px}

.a-feed{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.a-feed li{border-left:3px solid var(--cyan);padding-left:.9rem;display:flex;flex-direction:column;gap:.1rem}
.a-feed b{font-size:.93rem}
.a-feed time{color:var(--ink-faint);font-size:.75rem;font-weight:600}

/* forms */
.admin-form{display:flex;flex-direction:column;gap:1.2rem}
.form-card h2{font-size:1.15rem;margin-bottom:1rem}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld span{color:var(--ink-faint);font-size:.72rem;letter-spacing:.14em;font-weight:700;text-transform:uppercase}
.fld input,.fld select,.fld textarea{
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:12px;
  color:var(--ink);padding:.75rem .9rem;font:inherit;outline:none;transition:border-color .18s,box-shadow .18s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}
.check{display:flex;gap:.6rem;align-items:center;margin-top:1rem;color:var(--ink-dim);font-weight:600;font-size:.9rem}
.check input{width:18px;height:18px;accent-color:var(--cyan)}

.btn.danger{background:transparent;color:var(--red);border:1px solid rgba(248,113,113,.5)}
.btn.danger:hover{box-shadow:0 0 20px rgba(248,113,113,.3)}

/* connectors */
.connector-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.connector-logo{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;
  background:linear-gradient(135deg,var(--cyan-soft),rgba(139,92,246,.15));
  border:1px solid var(--line-strong);box-shadow:0 0 22px rgba(34,211,238,.25);
}
.conn-badge{
  margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  border-radius:999px;padding:.4rem 1rem;font-size:.76rem;font-weight:700;letter-spacing:.1em;
}
.conn-badge .dot{width:9px;height:9px;border-radius:50%}
.conn-badge.on{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.45)}
.conn-badge.on .dot{background:var(--green);animation:blink 1.6s infinite}
.conn-badge.off{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.45)}
.conn-badge.off .dot{background:var(--red)}
.conn-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem}
.conn-stats .g{border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;background:var(--panel-2)}
.conn-stats .g span{display:block;color:var(--ink-faint);font-size:.66rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.conn-stats .g b{display:block;margin-top:.3rem;font-size:1rem;font-family:var(--font-display)}

/* login */
.login-wrap{min-height:100svh;display:grid;place-items:center;padding:2rem 1.2rem;
  background:radial-gradient(ellipse 60% 50% at 50% 20%,rgba(34,211,238,.08),transparent),var(--bg)}
.login-card{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;animation:fadeUp .7s both}