/* css/components.css */

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-ui); font-weight:700;
  font-size:0.88rem; letter-spacing:1.8px; text-transform:uppercase;
  padding:13px 32px; border-radius:var(--radius-sm);
  border:none; transition:var(--transition); cursor:pointer;
}
.btn-primary {
  background:var(--orange); color:var(--dark);
  box-shadow:0 4px 28px rgba(255,107,0,0.35);
}
.btn-primary:hover {
  background:var(--orange-bright);
  transform:translateY(-2px);
  box-shadow:0 8px 38px rgba(255,107,0,0.5);
}
.btn-secondary {
  background:transparent; color:var(--white);
  border:1px solid rgba(255,255,255,0.2);
}
.btn-secondary:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
.btn-discord  { background:var(--blue); color:#fff; box-shadow:0 4px 24px rgba(88,101,242,0.35); }
.btn-discord:hover { filter:brightness(1.15); transform:translateY(-2px); }
.btn-save {
  font-family:var(--font-ui); font-weight:700;
  font-size:0.82rem; letter-spacing:2px; text-transform:uppercase;
  padding:10px 26px; border-radius:var(--radius-sm);
  background:var(--orange); color:var(--dark); border:none;
  transition:var(--transition);
}
.btn-save:hover { background:var(--orange-bright); }
.btn-danger {
  font-family:var(--font-ui); font-weight:700;
  font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 16px; border-radius:var(--radius-sm);
  background:rgba(255,59,59,0.1); color:var(--red);
  border:1px solid rgba(255,59,59,0.3); transition:var(--transition);
}
.btn-danger:hover { background:rgba(255,59,59,0.22); }

/* ---- BADGES ---- */
.badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-family:var(--font-ui); font-weight:700;
  font-size:0.68rem; letter-spacing:1px; text-transform:uppercase;
}
.badge-green  { background:rgba(0,255,136,0.08);  color:var(--green); border:1px solid rgba(0,255,136,0.2); }
.badge-orange { background:rgba(255,107,0,0.08);  color:var(--orange);border:1px solid rgba(255,107,0,0.2); }
.badge-gray   { background:rgba(255,255,255,0.05);color:var(--gray);  border:1px solid var(--border); }
.badge-blue   { background:rgba(88,101,242,0.1);  color:#7b8ff5;      border:1px solid rgba(88,101,242,0.25); }

/* ---- ONLINE DOT ---- */
.online-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green);
  animation:pulse 2s infinite; flex-shrink:0;
}

/* ---- FORMS ---- */
.form-group  { margin-bottom:18px; }
.form-label  {
  display:block; font-family:var(--font-ui); font-weight:600;
  font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gray); margin-bottom:7px;
}
.form-input, .form-textarea, .form-select {
  width:100%; padding:10px 14px;
  background:var(--dark3); border:1px solid var(--border);
  border-radius:var(--radius-md); color:var(--light);
  font-family:var(--font-body); font-size:0.88rem;
  transition:border-color 0.2s; outline:none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus { border-color:var(--border-orange); }
.form-textarea { min-height:90px; resize:vertical; }
.form-select   { appearance:none; cursor:pointer; }
.form-row      { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---- TOAST ---- */
#toast {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  background:var(--dark3);
  border:1px solid var(--border-orange);
  border-left:3px solid var(--orange);
  padding:13px 20px; border-radius:var(--radius-md);
  font-family:var(--font-ui); font-weight:600; font-size:0.88rem;
  color:var(--light);
  transform:translateX(220px); opacity:0;
  transition:all 0.3s; pointer-events:none;
}
#toast.show { transform:translateX(0); opacity:1; }

/* ---- ADMIN TABLE ---- */
.adm-table { width:100%; border-collapse:collapse; }
.adm-table th {
  font-family:var(--font-ui); font-weight:700;
  font-size:0.7rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gray); padding:10px 14px; text-align:left;
  border-bottom:1px solid var(--border);
}
.adm-table td {
  padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:0.84rem; color:var(--light);
  font-family:var(--font-ui);
}
.adm-table tr:hover td { background:rgba(255,107,0,0.03); }

@media (max-width:768px) {
  .form-row { grid-template-columns:1fr; }
}