/* =========================================================
   HUB APP UI - AXYS
   Tokens e componentes para auth/dashboard
   hub/static/css/hub.app.css
========================================================= */

:root{
  --axys-bg:#0b0f14;
  --axys-surface:#101620;
  --axys-surface-alt:#0f1824;
  --axys-text:#e9edf2;
  --axys-text-muted:#a3adba;
  --axys-primary:#2f80ff;
  --axys-primary-contrast:#071019;
  --axys-border:#1b2432;
  --axys-success:#22c55e;
  --axys-warning:#f59e0b;
  --axys-danger:#ef4444;
  --axys-info:#38bdf8;
  --axys-radius:16px;
  --axys-shadow:0 22px 80px rgba(0,0,0,.45);
  --axys-max-width:1360px;
}

/* Aliases para o hub.base.css (mantem compatibilidade) */
:root{
  --bg:var(--axys-bg);
  --panel:var(--axys-surface);
  --border:var(--axys-border);
  --text:var(--axys-text);
  --muted:var(--axys-text-muted);
  --accent:var(--axys-primary);
  --accent2:var(--axys-info);
  --radius:var(--axys-radius);
  --max:var(--axys-max-width);
}

html[data-theme="light"],
body[data-theme="light"]{
  --axys-bg:#f6f8fc;
  --axys-surface:#ffffff;
  --axys-surface-alt:#f1f5fb;
  --axys-text:#101826;
  --axys-text-muted:#4b5563;
  --axys-primary:#2563eb;
  --axys-primary-contrast:#ffffff;
  --axys-border:#d6dde6;
  --axys-info:#06b6d4;
  --axys-shadow:0 14px 40px rgba(15,23,42,.12);
  --header-bg: rgba(255,255,255,.9);
}

html[data-theme="light"],
body[data-theme="light"]{
  background:var(--axys-bg);
}

body[data-theme="light"] .axys-app-root{
  background:var(--axys-bg);
}

.axys-app-root{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.axys-main{
  flex:1;
  padding:56px 0 72px;
}

.axys-container{
  max-width:var(--axys-max-width);
  margin:0 auto;
  padding:0 22px;
}

.axys-card{
  border-radius:var(--axys-radius);
  border:1px solid var(--axys-border);
  background:linear-gradient(180deg, rgba(16,22,32,.95), rgba(16,22,32,.7));
  box-shadow:var(--axys-shadow);
  padding:22px;
}

body[data-theme="light"] .axys-card{
  background:#ffffff;
}

.axys-grid{
  display:grid;
  gap:18px;
}

.axys-grid-cards{
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}

.axys-grid-2{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

.axys-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--axys-border);
  font-size:14px;
  font-weight:700;
  background:var(--surface-1);
  color:var(--axys-text);
  cursor:pointer;
  text-decoration:none;
}

.axys-btn:hover{
  border-color:rgba(47,128,255,.55);
}

.axys-btn-primary{
  background:linear-gradient(135deg, var(--axys-primary), var(--axys-info));
  color:var(--axys-primary-contrast);
  border:none;
}

.axys-btn-ghost{
  background:transparent;
}

.axys-btn-secondary{
  background:var(--surface-1);
  color:var(--axys-text);
}

.axys-btn.is-disabled{
  opacity:.6;
  pointer-events:none;
}

.axys-form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.axys-label{
  font-size:13px;
  font-weight:700;
  color:var(--axys-text);
}

.axys-input{
  border-radius:12px;
  border:1px solid var(--axys-border);
  background:var(--axys-surface-alt);
  padding:12px 14px;
  color:var(--axys-text);
  font-size:14px;
}

.axys-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.axys-input-wrap .axys-input{
  padding-right:48px;
  width:100%;
}

.axys-input-toggle{
  position:absolute;
  right:10px;
  border:none;
  background:transparent;
  color:var(--axys-text-muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  padding:6px 6px;
}

.axys-input-toggle:hover{
  color:var(--axys-text);
}

.axys-input::placeholder{
  color:rgba(163,173,186,.75);
}

.axys-input:focus{
  outline:none;
  border-color:rgba(47,128,255,.55);
  box-shadow:0 0 0 3px rgba(47,128,255,.18);
}

.axys-badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  border:1px solid transparent;
}

.axys-badge-lock{
  background:rgba(239,68,68,.12);
  color:#fecaca;
  border-color:rgba(239,68,68,.35);
}

.axys-badge-open{
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
  border-color:rgba(34,197,94,.35);
}

.axys-badge-coming{
  background:rgba(245,158,11,.12);
  color:#fde68a;
  border-color:rgba(245,158,11,.35);
}

/* ================= AUTH ================= */
.axys-auth{
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(47,128,255,.22), transparent 55%),
    radial-gradient(800px 600px at 90% 10%, rgba(56,189,248,.18), transparent 55%),
    var(--axys-bg);
}

body[data-theme="light"] .axys-auth{
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(800px 600px at 90% 10%, rgba(6,182,212,.14), transparent 55%),
    var(--axys-bg);
}

.axys-auth .axys-main{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:80px 0;
}

.axys-auth-card{
  max-width:420px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.axys-auth-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.axys-auth-logo{
  width:140px;
  height:auto;
}

.axys-auth-title{
  text-align:center;
  font-size:22px;
  letter-spacing:-.2px;
}

.axys-auth-subtitle{
  text-align:center;
  color:var(--axys-text-muted);
  font-size:14px;
}

.axys-auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.axys-auth-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.axys-auth-link{
  font-size:13px;
  color:var(--axys-text-muted);
  text-align:center;
}

.axys-alert{
  border-radius:12px;
  border:1px solid transparent;
  padding:10px 12px;
  font-size:13px;
}

.axys-alert-danger{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.35);
  color:#fecaca;
}

/* ================= DASHBOARD ================= */
.axys-dashboard-header{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
}

.axys-dashboard-header h1{
  font-size:26px;
  letter-spacing:-.2px;
}

.axys-dashboard-header p{
  color:var(--axys-text-muted);
  font-size:14px;
}

.axys-account-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color:var(--axys-text-muted);
}

.axys-account-list strong{
  color:var(--axys-text);
}

.axys-section{
  margin-top:28px;
}

.axys-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
}

.axys-section-head h2{
  font-size:20px;
  letter-spacing:-.2px;
}

.axys-system-card{
  position:relative;
  padding:18px;
  border-radius:var(--axys-radius);
  border:1px solid var(--axys-border);
  background:linear-gradient(180deg, rgba(16,22,32,.9), rgba(16,22,32,.6));
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:190px;
  overflow:hidden;
}

body[data-theme="light"] .axys-system-card{
  background:#ffffff;
}

.axys-system-card.is-locked{
  opacity:.7;
}

.axys-system-card-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.axys-system-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(47,128,255,.18);
  border:1px solid rgba(47,128,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--axys-text);
  text-transform:uppercase;
}

body[data-theme="light"] .axys-system-icon{
  background:rgba(37,99,235,.1);
  border-color:rgba(37,99,235,.3);
}

.axys-system-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.axys-system-meta h3{
  font-size:16px;
}

.axys-system-meta p{
  font-size:13px;
  color:var(--axys-text-muted);
  word-break:break-word;
}

.axys-system-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.axys-system-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:14px;
  background:linear-gradient(160deg, rgba(11,15,20,.05), rgba(11,15,20,.55));
  pointer-events:none;
}

body[data-theme="light"] .axys-system-overlay{
  background:linear-gradient(160deg, rgba(255,255,255,.0), rgba(15,23,42,.08));
}

.axys-lock{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(11,15,20,.6);
  border:1px solid rgba(239,68,68,.4);
  color:#fecaca;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}

body[data-theme="light"] .axys-lock{
  background:rgba(255,255,255,.8);
  color:#991b1b;
}

.axys-lock svg{
  width:14px;
  height:14px;
  fill:currentColor;
}

@media(max-width:720px){
  .axys-auth-card{
    max-width:100%;
  }
}