/* =========================================================
   AffiliaUp — assets/style.css
   Design System: Dark Navy + Gold (Lovable-inspired)
   ========================================================= */

:root{
  /* ===== Core palette ===== */
  --bg:        #05080f;
  --bg-subtle: #0a0f1a;
  --card:      #0c1220;
  --card-hover:#101828;

  --text:      #f8fafc;
  --text-secondary: #94a3b8;
  --muted:     #64748b;

  --stroke:    rgba(148,163,184,.12);
  --stroke-light: rgba(148,163,184,.08);
  --shadow:    0 18px 40px rgba(0,0,0,.35);

  --input-bg:  #0f1729;
  --input-stroke: rgba(148,163,184,.18);

  /* ===== Gold accent ===== */
  --gold:      #d4a017;
  --gold-light:#e8b830;
  --gold-soft: rgba(212,160,23,.12);
  --gold-glow: rgba(212,160,23,.25);

  /* ===== Blue accent ===== */
  --blue:      #3b82f6;
  --blue-soft: rgba(59,130,246,.12);

  /* ===== Semantic ===== */
  --success:   #22c55e;
  --success-soft: rgba(34,197,94,.12);
  --danger:    #ef4444;
  --danger-soft: rgba(239,68,68,.12);
  --warning:   #f59e0b;
  --warning-soft: rgba(245,158,11,.12);
  --info:      #0ea5e9;
  --info-soft: rgba(14,165,233,.12);

  --r:  8px;
  --r12:12px;
  --r16:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  color:var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea{
  font-family:inherit;
}

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

i{ font-style: normal; }

/* =========================================================
   AUTH LAYOUT (LOGIN/REGISTRO)
   ========================================================= */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px 14px;
  background:
    radial-gradient(800px 400px at 50% 80%, rgba(212,160,23,.06), transparent 60%),
    linear-gradient(180deg, #05080f 0%, #0a0f1a 100%);
}

.auth-wrap{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Branding */
.auth-brand{
  margin: 0 auto 22px;
  text-align:center;
}

.auth-brand .brand-logo{
  height:72px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

.auth-brand .brand-title{
  font-size:36px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1;
  margin:0;
  color: var(--gold);
}

.auth-brand .brand-subtitle{
  margin-top:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================
   AUTH CARD
   ========================================================= */
.auth-card{
  width:min(440px, 100%);
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  box-shadow: 0 25px 50px rgba(0,0,0,.4);
  padding:28px 24px 22px;
  text-align:left;
}

.auth-card h2{
  margin:0 0 18px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.25px;
  color:var(--text);
}

/* =========================================================
   FORM
   ========================================================= */
.auth-card form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0;
}

.auth-card label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--text-secondary);
  margin:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.auth-card a.forgot,
.auth-card .forgot{
  font-size:12px;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
}
.auth-card a.forgot:hover{ color:var(--gold-light); text-decoration:none; }

/* Inputs */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="tel"],
.auth-card input[type="number"],
.auth-card .input{
  width:100%;
  height:46px;
  padding:0 16px;
  border-radius:var(--r12);
  border:1px solid var(--input-stroke);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
  font-size:14px;
  font-weight:500;
  transition:.2s ease;
}

.auth-card input::placeholder{
  color:var(--muted);
  font-size:14px;
  font-weight:500;
}

.auth-card input:focus{
  background: #111d35;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Primary Button */
.auth-card button,
.auth-card input[type="submit"],
.auth-card .auth-btn,
.auth-card .btn{
  width:100%;
  height:48px;
  border-radius:var(--r12);
  border:0;
  cursor:pointer;
  background: var(--gold);
  color:#05080f;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  margin-top:8px;
  box-shadow: 0 12px 28px rgba(212,160,23,.25);
  transition:.2s ease;
}

.auth-card button:hover,
.auth-card input[type="submit"]:hover,
.auth-card .auth-btn:hover,
.auth-card .btn:hover{
  background: var(--gold-light);
  box-shadow: 0 16px 32px rgba(212,160,23,.35);
  transform: translateY(-1px);
}

/* Footer */
.auth-foot{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  margin-top:4px;
}

.auth-foot a{
  color:var(--gold);
  font-weight:700;
}
.auth-foot a:hover{ color:var(--gold-light); text-decoration:none; }

.auth-footer{
  margin-top:14px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
}
.auth-footer .foot-main{ margin-bottom:6px; }
.auth-footer .devby{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  opacity:.7;
}
.auth-footer .dev-logo{
  height:18px;
  width:auto;
  display:inline-block;
  filter: brightness(0) invert(1);
  opacity:.5;
}

/* =========================================================
   ALERTS
   ========================================================= */
.alert{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:var(--r12);
  font-weight:600;
  font-size:13px;
  border:1px solid transparent;
}
.alert.error,
.note.error{
  background: var(--danger-soft);
  border-color: rgba(239,68,68,.25);
  color:#fca5a5;
}
.alert.success,
.note.success{
  background: var(--success-soft);
  border-color: rgba(34,197,94,.25);
  color:#86efac;
}
.alert.info,
.note.info{
  background: var(--info-soft);
  border-color: rgba(14,165,233,.25);
  color:#7dd3fc;
}
.alert.warning{
  background: var(--warning-soft);
  border-color: rgba(245,158,11,.25);
  color:#fcd34d;
}

/* =========================================================
   HELPER (paragraph in auth)
   ========================================================= */
.helper{
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  margin:0 0 14px;
}

/* =========================================================
   FORM GROUP (used in 2FA page)
   ========================================================= */
.form-group{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:520px){
  .auth-brand .brand-title{ font-size:30px; }
  .auth-brand .brand-logo{ height:56px; }
  .auth-card{ padding:22px 18px 18px; }
}

/* =========================================================
   DASHBOARD BASE (fallback)
   ========================================================= */
.g8-app{ display:flex; min-height:100vh; background:var(--bg); }
.g8-sidebar{ width:270px; background:var(--card); border-right:1px solid var(--stroke); }
.g8-main{ flex:1; padding:22px 24px 34px; }

/* Nav icon resets */
.nav .ic{
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:transparent !important;
  border:0 !important;
}
.nav .ic img{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
  filter: brightness(0) invert(.65);
  transition:.15s ease;
}
.nav a.active .ic img{
  filter: brightness(0) invert(1);
}
.nav a:hover .ic img{
  filter: brightness(0) invert(.85);
}
.nav a.active .ic{
  background:transparent !important;
  border:0 !important;
}

/* =========================================================
   SCROLLBAR (dark)
   ========================================================= */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,.35); }

/* =========================================================
   SELECTION
   ========================================================= */
::selection{ background:var(--gold-soft); color:var(--text); }