/* =========================================================
   RESET E BOX-SIZING
   ========================================================= */
* { box-sizing: border-box; margin:0; padding:0; transition: all var(--transition-speed) var(--transition-ease); }
html, body { height:100%; width:100%; font-family: var(--font-family); }
body { display:flex; flex-direction:column; min-height:100vh; }

/* =========================================================
   BACKGROUNDS E TEXTOS
   ========================================================= */
.bg-background{background-color:var(--color-background)!important;}
.bg-card{background-color:var(--color-card)!important;}
.bg-primary{background-color:var(--color-primary)!important;}
.bg-secondary{background-color:var(--color-secondary)!important;}
.bg-accent{background-color:var(--color-accent)!important;}
.bg-warning{background-color:var(--color-warning)!important;}
.bg-danger{background-color:var(--color-danger)!important;}

.text-text{color:var(--color-text)!important;}
.text-text-light{color:var(--color-text-light)!important;}
.text-text-inverted{color:var(--color-text-inverted)!important;}
.text-primary{color:var(--color-primary)!important;}
.text-secondary{color:var(--color-secondary)!important;}
.text-accent{color:var(--color-accent)!important;}
.text-warning{color:var(--color-warning)!important;}
.text-danger{color:var(--color-danger)!important;}

/* =========================================================
   INPUTS, SELECT, TEXTAREA
   ========================================================= */
input, select, textarea, .search-company {
  width:100%; padding:0.85rem 1.5rem; border-radius:var(--radius-large);
  background-color:var(--color-input-bg); border:1px solid var(--color-input-border);
  color:var(--color-text); font-size:var(--font-size-base);
  font-weight:var(--font-weight-minimun); line-height:1.4; font-family:var(--font-family);
  box-shadow: inset 0 2px 4px var(--shadow-card); height:45px; text-indent:5px;
}

input::placeholder, select::placeholder, textarea::placeholder { color:var(--color-input-placeholder); opacity:0.8; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--color-primary); background-color:var(--color-input-bg); }

/* SELECT ESPECÍFICO */
select {
  padding-right:2.5rem; appearance:none; cursor:pointer; min-height:45px; height:auto;
  background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7L0 0h12L6 7z' fill='%23aaa'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.75rem center; background-size:12px 7px;
}
select option { padding:10px; font-size:var(--font-size-base); line-height:1.5; white-space:normal; max-width:100%; overflow-wrap:break-word; }

/* AUTOFILL */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-box-shadow:0 0 0px 1000px var(--color-input-bg) inset!important;
  -webkit-text-fill-color:var(--color-text)!important; transition: background-color 5000s ease-in-out 0s;
}

/* =========================================================
   BUTTONS - UNIFICADOS
   ========================================================= */
button, .btn-continue, .btn-select, .user-tab-btn, .empresa-tab-btn, .bg-continue, .tab-btn, .btn-search, .btn-secondary, .btn-primary, .tab-perfil, .btn-revoke {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: var(--radius-medium);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverted);
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-ease);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Hover e Active comuns para todos os botões */
button:hover, .btn-continue:hover, .tab-btn:hover, .btn-revoke:hover {
  transform: translateY(-1px) scale(1.02);
}
button:active, .btn-continue:active, .btn-revoke:active {
  transform: scale(0.97);
}

/* Cores específicas */
button.bg-primary, .btn-primary { background-color: var(--color-primary); }
button.bg-secondary, .button-alt { background-color: var(--color-secondary); }
button.bg-accent { background-color: var(--color-accent); }
button.bg-danger, .btn-revoke { background-color: var(--color-danger); }

button.bg-danger:hover, .btn-revoke:hover { filter: brightness(0.9); }
.button-alt:hover { background-color: var(--color-primary); }

/* Botão alternativo pequeno */
.btn-select-small {
  all: unset !important;
  display: inline-flex !important;
  font-size: 0.72rem !important;
  font-weight: var(--font-weight-medium) !important;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-small);
  padding: 0.25rem 0.6rem;
  background-color: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-ease);
}
.btn-select-small:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverted);
  transform: scale(1.05);
}

/* Botão continue */
.btn-continue {
  background-color: var(--color-primary);
  color: var(--color-text-inverted);
}

/* Botão vermelho igual ao continue mas com cor de perigo */
.btn-revoke {
  background-color: var(--color-danger);
  color: var(--color-text-inverted);
}

/* =========================================================
   REGIS AREA / TEXTAREA ESTILO EDITOR
   ========================================================= */
.regis-area { width:100%; height:24rem; padding:12px 14px; background:#1e1e1e; color:#d4d4d4;
  font-family:Consolas,"Courier New",monospace; font-size:14px; border:1px solid #333; border-radius:12px;
  outline:none; resize:none; overflow-y:auto; white-space:pre; line-height:1.4; box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}
.ui-textarea { height:90px; resize:none; }
.ui-actions { display:flex; justify-content:flex-end; gap:0.75rem; margin-top:1.2rem; }

/* SCROLLBAR */
.regis-area::-webkit-scrollbar { width:8px; }
.regis-area::-webkit-scrollbar-thumb { background:#444; border-radius:4px; }
.regis-area::-webkit-scrollbar-thumb:hover { background:#555; }
.regis-area::-webkit-scrollbar-track { background:#222; }

/* =========================================================
   CHECKBOX
   ========================================================= */
.checkbox-group { display:inline-flex; align-items:center; gap:0.65rem; cursor:pointer; user-select:none; position:relative; }
.checkbox-group input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; }
.checkbox-custom {
  width:18px; height:18px; border-radius:var(--radius-small); background-color:var(--color-input-bg);
  border:1.5px solid var(--color-input-border); box-shadow:inset 0 2px 4px var(--shadow-card);
  display:flex; align-items:center; justify-content:center; transition:all 0.15s ease, border-color 0.15s ease;
}
.checkbox-custom::after {
  content:""; width:10px; height:10px; border-radius:2px; background-color:var(--color-text-inverted); transform:scale(0); transition:transform 0.15s ease;
}
.checkbox-group input:checked + .checkbox-custom { background-color:var(--color-primary); border-color:var(--color-primary); }
.checkbox-group input:checked + .checkbox-custom::after { transform:scale(1); }
.checkbox-group input:disabled + .checkbox-custom { background-color:var(--color-card); border-color:var(--color-input-border); opacity:0.6; cursor:not-allowed; box-shadow:none; }
.checkbox-group input:disabled:checked + .checkbox-custom { background-color:var(--color-input-border); border-color:var(--color-input-border); }
.checkbox-label { color:var(--color-text); font-size:var(--font-size-base); font-weight:var(--font-weight-medium); }

/* =========================================================
   TABS CONTAINER
   ========================================================= */
.tabs-container {
  display: flex; flex-wrap: wrap; justify-content: center; gap:0.75rem;
}
.tab-btn { flex:1 1 auto; text-align:center; }


/* =========================================================
   Checkbox Quadrado Moderno - cores padronizadas
========================================================= */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
  display: none; /* esconde o checkbox real */
}

/* Quadradinho estilizado */
.checkbox-box {
  width: 1.25rem;  /* 20px */
  height: 1.25rem;
  border: 2px solid var(--color-input-border); /* borda padrão */
  background-color: var(--color-input-bg); /* fundo padrão */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  border-radius: var(--radius-small);
  box-shadow: inset 0 2px 4px var(--shadow-card);
}

/* Hover */
.checkbox-wrapper:hover .checkbox-box {
  border-color: var(--color-primary);
  background-color: var(--color-card);
}

/* Quando marcado */
.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-box {
  background-color: var(--color-primary); /* cor principal */
  border-color: var(--color-primary);
}

/* Check animado */
.checkbox-box::after {
  content: '';
  width: 0.5rem;
  height: 0.25rem;
  border-left: 2px solid var(--color-text-inverted);
  border-bottom: 2px solid var(--color-text-inverted);
  transform: rotate(-45deg) scale(0);
  opacity: 0;
  transition: all 0.2s ease;
  position: absolute;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-box::after {
  transform: rotate(-45deg) scale(1);
  opacity: 1;
}

/* Label do checkbox */
.checkbox-wrapper span:last-child {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}





/* =========================================================
   RESPONSIVIDADE
   ========================================================= */
@media(max-width:1024px){.ui-grid{gap:1.5rem!important;}}
@media(max-width:768px){
  body{padding:1rem!important} .card,.ui-card{padding:1.25rem} button{padding:0.55rem 1.2rem}
}
@media(max-width:480px){
  input,select,textarea{padding:0.75rem 1rem;font-size:0.95rem} .card,.ui-card{padding:1rem}
  .tabs-container { justify-content: center; gap:0.5rem; }
  .tab-btn { flex: 1 1 100%; }
}