/* ============================================================
   SKNAssist — estilos compartilhados (cadastro / admin)
   Mesma linguagem visual do login.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

:root { --bg:#0e2423; --accent:#2dd4bf; --accent2:#5eead4; }

body {
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 28px 16px;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-x: hidden;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

/* ════════ FUNDO ════════ */
#aurora { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; opacity:.18; contain:strict; }
.aur { position:absolute; border-radius:50%; will-change:transform; }
.aur:nth-child(1) {
  width:70vw; height:70vw; top:-28vw; left:-20vw;
  background:radial-gradient(circle at 35% 40%, rgba(45,212,191,.55) 0%, rgba(14,165,233,.18) 38%, transparent 68%);
  animation:aurDrift1 26s ease-in-out infinite;
}
.aur:nth-child(2) {
  width:60vw; height:60vw; bottom:-25vw; right:-16vw;
  background:radial-gradient(circle at 60% 55%, rgba(20,184,166,.5) 0%, rgba(45,212,191,.15) 40%, transparent 68%);
  animation:aurDrift2 32s ease-in-out infinite;
}
@keyframes aurDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vh) scale(1.08)} }
@keyframes aurDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,-5vh) scale(1.06)} }
.overlay {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(20,72,70,.46) 0%, transparent 24%, transparent 76%, rgba(20,72,70,.55) 100%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(14,36,35,.08) 0%, rgba(14,36,35,.72) 100%),
    rgba(14,36,35,.42);
}
.grid {
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
}

/* ════════ CARD ════════ */
.card-wrap { position: relative; z-index: 12; width: 100%; display: flex; justify-content: center; }
.card {
  position: relative;
  width: 440px;
  max-width: 100%;
  background: rgba(14, 40, 38, .58);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 36px 38px 30px;
  animation: cardEnter .7s cubic-bezier(.22,1,.36,1) both;
}
.card.wide { width: 760px; }
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.brandline { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom: 8px; }
.brandline img { width: 40px; filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(45,212,191,.5)); }
h1 { text-align:center; color: rgba(255,255,255,.96); font-size: 22px; font-weight: 700; letter-spacing: .4px; }
.tagline {
  text-align:center; font-size: 11px; color: #2dd4bf; letter-spacing: 2.2px;
  text-transform: uppercase; font-weight: 600; margin: 4px 0 22px;
  text-shadow: 0 0 14px rgba(45,212,191,.4);
}

label.field { display:block; text-align:left; margin-bottom: 12px; }
label.field > span { display:block; font-size:12px; font-weight:600; color:rgba(255,255,255,.6); letter-spacing:.4px; margin:0 0 6px 2px; }

input, select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.13);
  border-radius: 11px;
  font-size: 16px; /* >=16px evita zoom automático no iOS ao focar */
  font-family: inherit;
  color: #fff;
  caret-color: #2dd4bf;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
select option { color:#0e2423; }
input::placeholder { color: rgba(255,255,255,.42); }
input:hover, select:hover { border-color: rgba(255,255,255,.25); }
input:focus, select:focus {
  outline: none; background: rgba(255,255,255,.1); border-color: #2dd4bf;
  box-shadow: 0 0 0 4px rgba(45,212,191,.14), 0 0 22px rgba(45,212,191,.22);
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 50px rgba(20, 50, 48, .95) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.btn {
  position: relative; width: 100%; height: 46px; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  box-sizing: border-box; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #2dd4bf 0%, #277876 100%);
  color: #fff; font-weight: 700; font-family: inherit; border: none;
  border-radius: 11px; font-size: 15px; cursor: pointer; letter-spacing: .5px;
  transition: transform .2s, box-shadow .25s, opacity .2s;
  box-shadow: 0 6px 18px rgba(45,212,191,.25);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(45,212,191,.4); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled] { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.ghost { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.btn.ghost:hover { background: rgba(45,212,191,.18); border-color:rgba(45,212,191,.5); }
.btn.danger { background: linear-gradient(135deg,#f87171,#b91c1c); box-shadow:0 6px 18px rgba(185,28,28,.3); }
.btn.sm { height:40px; font-size:13px; width:auto; padding:0 16px; margin:0; }

.msg { min-height: 20px; margin-top: 12px; font-size: 13px; font-weight: 600; text-align:center; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.msg.err { color: #ff9a9a; }
.msg.ok  { color: #5eead4; }

.link { display:inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); text-decoration: none; transition: color .25s, text-shadow .25s; }
.link:hover { color: #2dd4bf; text-shadow: 0 0 12px rgba(45,212,191,.5); }
.center { text-align:center; }

footer.ft {
  margin-top: 26px; display:flex; align-items:center; justify-content:center; gap:8px 10px; flex-wrap:wrap;
  max-width:100%; text-align:center;
  font-size: 12px; color: rgba(255,255,255,.42); letter-spacing:.8px; font-family:'Poppins',sans-serif;
}
footer.ft .ln { width:42px; height:1px; flex-shrink:0; background:linear-gradient(to right, transparent, rgba(45,212,191,.4)); }
footer.ft .ln.r { background:linear-gradient(to left, transparent, rgba(45,212,191,.4)); }
@media (max-width:559px){ footer.ft .ln { display:none; } }
footer.ft .esl { color:#fff; font-weight:800; letter-spacing:1.5px; background:rgba(45,212,191,.13);
  border:1px solid rgba(45,212,191,.32); border-radius:6px; padding:1px 8px; text-shadow:0 0 12px rgba(45,212,191,.55); }
footer.ft .dot { width:3px; height:3px; border-radius:50%; background:rgba(45,212,191,.55); }
footer.ft .mut { color:rgba(255,255,255,.45); }

/* botão de voltar (ícone) */
.backbtn {
  display:inline-grid; place-items:center; width:40px; height:40px; flex-shrink:0;
  border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.8); text-decoration:none; transition:all .15s;
}
.backbtn:hover { background:rgba(45,212,191,.16); border-color:rgba(45,212,191,.45); color:#fff; }
.backbtn svg { width:20px; height:20px; }

/* ════════ ADMIN ════════ */
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.admin-top .brandline { min-width:0; }
.admin-top h1 { font-size:clamp(18px, 5vw, 22px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-sub { color:rgba(255,255,255,.55); font-size:13px; margin-bottom:18px; }
.section-label { font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(45,212,191,.8); margin:18px 0 10px; }
.user-row {
  display:grid; grid-template-columns: minmax(0,1fr) minmax(280px,400px); gap:12px; align-items:center;
  padding:14px 16px; border-radius:14px;
  background:rgba(11,28,27,.55); border:1px solid rgba(255,255,255,.08); margin-bottom:10px;
}
.user-row .u-name { font-weight:700; font-size:14px; }
.user-row .u-email { font-size:12px; color:rgba(255,255,255,.55); }
.user-row .u-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.badge { font-size:11px; font-weight:700; letter-spacing:.5px; padding:2px 9px; border-radius:999px; text-transform:uppercase; }
.badge.pending  { background:rgba(234,179,8,.15); color:#fde68a; border:1px solid rgba(234,179,8,.4); }
.badge.approved { background:rgba(52,211,153,.15); color:#6ee7b7; border:1px solid rgba(52,211,153,.4); }
.badge.rejected { background:rgba(248,113,113,.15); color:#fca5a5; border:1px solid rgba(248,113,113,.4); }
/* papéis (role) */
.badge.role-admin   { background:rgba(168,85,247,.16); color:#d8b4fe; border:1px solid rgba(168,85,247,.45); }
.badge.role-gestor  { background:rgba(45,212,191,.15); color:#5eead4; border:1px solid rgba(45,212,191,.4); }
.badge.role-tecnico { background:rgba(56,189,248,.15); color:#7dd3fc; border:1px solid rgba(56,189,248,.4); }
.badge.role-cliente { background:rgba(251,146,60,.15); color:#fdba74; border:1px solid rgba(251,146,60,.4); }
.badge.role-none    { background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.16); }
.user-row .u-locked { font-size:12px; color:rgba(255,255,255,.4); font-style:italic; }
.empty { color:rgba(255,255,255,.4); font-size:13px; padding:10px 2px; }

/* ── Toolbar de ações padronizada (linha de usuário) ──
   Hierarquia: seletor de papel → CTA primária (Salvar) → ações
   secundárias (OS/Empresas) → status → destrutiva (Excluir) separada. */
.u-controls .role-sel {
  flex:1 1 100%; width:100%; box-sizing:border-box;
  height:38px; padding:0 12px; font-size:13px; font-weight:600; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); color:#fff; cursor:pointer;
}
.ubtn {
  height:38px; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px;
  padding:0 13px; border-radius:10px; font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:.2px; line-height:1; cursor:pointer; white-space:nowrap; text-decoration:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.85);
  transition:background .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s;
}
.ubtn svg { width:15px; height:15px; flex:none; }
.ubtn:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); color:#fff; }
.ubtn:active { transform:translateY(1px); }
.ubtn:focus-visible { outline:2px solid rgba(45,212,191,.65); outline-offset:2px; }
.ubtn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
.ubtn.primary { background:linear-gradient(135deg,#2dd4bf,#1f9c93); border-color:transparent; color:#04211e;
  font-weight:700; box-shadow:0 4px 14px rgba(45,212,191,.25); }
.ubtn.primary:hover { background:linear-gradient(135deg,#37e0cb,#239b92); color:#04211e; }
.ubtn.ok { color:#6ee7b7; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.12); }
.ubtn.ok:hover { background:rgba(52,211,153,.2); border-color:rgba(52,211,153,.6); color:#bbf7d8; }
.ubtn.danger { color:#fca5a5; border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.1); }
.ubtn.danger:hover { background:rgba(248,113,113,.2); border-color:rgba(248,113,113,.6); color:#fecaca; }
.ubtn.sep { margin-left:auto; }            /* empurra a ação destrutiva para a direita (desktop) */

@media (max-width:560px) {
  .user-row { grid-template-columns: 1fr; }
  .user-row .u-controls { justify-content:flex-start; }
  .u-controls .role-sel, .u-controls .ubtn { flex:1 1 auto; justify-content:center; }
  .ubtn.sep { margin-left:0; }
}

/* cards mais enxutos no celular */
@media (max-width:480px) {
  .card { padding: 26px 20px 24px; border-radius: 20px; }
  .card.wide { padding: 24px 18px 22px; }
}