/* ============================================================
   WORKSTATION CRIATOR — components.css
   Primitivos reutilizáveis: botões, campos de formulário,
   checkbox, cards, badges, tags e legendas.
   ============================================================ */

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:var(--text-sm);font-weight:600;line-height:1;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform 60ms var(--ease),opacity var(--dur-fast) var(--ease);
  font-family:inherit;
}
.btn svg{width:16px;height:16px;flex-shrink:0;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 1px 2px rgba(17,90,228,0.25);}
.btn-primary:hover{background:var(--blue-700);}
.btn-secondary{background:#fff;border-color:var(--gray-200);color:var(--gray-700);}
.btn-secondary:hover{background:var(--gray-25);border-color:var(--gray-300);}
.btn-danger{background:var(--red-600);color:#fff;}
.btn-danger:hover{background:var(--red-700);}
.btn-danger-outline{background:#fff;border-color:var(--red-100);color:var(--red-600);}
.btn-danger-outline:hover{background:var(--red-50);border-color:var(--red-100);}
.btn-sm{height:32px;padding:0 12px;font-size:var(--text-sm);}
.btn-lg{height:44px;padding:0 20px;font-size:var(--text-md);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
/* Anel de foco visível em botão azul (o anel translúcido some sobre azul) */
.btn-primary:focus-visible,.btn-danger:focus-visible{box-shadow:0 0 0 2px var(--gray-0),0 0 0 4px var(--blue-500);}

/* Estado de carregamento — spinner centralizado, texto invisível. */
@keyframes btn-spin{to{transform:rotate(360deg);}}
.btn[aria-busy="true"]{color:transparent !important;pointer-events:none;position:relative;opacity:1;}
.btn[aria-busy="true"] svg{visibility:hidden;}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.9;
  color:#fff;animation:btn-spin .6s linear infinite;
}
.btn-secondary[aria-busy="true"]::after,
.btn-danger-outline[aria-busy="true"]::after{color:var(--gray-500);}

/* ---------- Campos de formulário ---------- */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field label{font-size:var(--text-sm);font-weight:600;color:var(--gray-700);}
.field .hint{font-size:var(--text-xs);color:var(--gray-500);}

.input,.select,.textarea{
  width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--gray-200);background:#fff;
  font-size:var(--text-md);color:var(--gray-800);font-family:inherit;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--gray-400);}
.input:hover,.select:hover,.textarea:hover{border-color:var(--gray-300);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--shadow-focus);}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--gray-25);color:var(--gray-400);border-color:var(--gray-100);cursor:not-allowed;}
.input:disabled::placeholder{color:var(--gray-300);}
.textarea{resize:vertical;min-height:80px;}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236d7686" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:36px;
}
.select-wide{min-width:192px;}
.input-icon-wrap{position:relative;}
.input-icon-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--gray-400);pointer-events:none;transition:color var(--dur-fast) var(--ease);}
.input-icon-wrap:focus-within svg{color:var(--blue-600);}
.input-icon-wrap .input{padding-left:38px;}
.input-icon-wrap:has(.toggle-visibility) .input{padding-right:40px;}
.input-icon-wrap .toggle-visibility{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;padding:8px;color:var(--gray-400);border-radius:var(--radius-xs);pointer-events:auto;}
.input-icon-wrap .toggle-visibility:hover{background:var(--gray-50);color:var(--gray-600);}
.input-icon-wrap .toggle-visibility:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs);}
.input-icon-wrap .toggle-visibility svg{position:static;transform:none;color:currentColor;}

/* ---------- Checkbox custom ---------- */
.ckb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:var(--text-sm);color:var(--gray-700);line-height:1;}
.ckb input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer;}
.ckb .box{
  width:18px;height:18px;border-radius:4px;border:1.5px solid var(--gray-300);background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.ckb:hover .box{border-color:var(--gray-400);}
.ckb .box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .1s var(--ease),transform .1s var(--ease);}
.ckb input:checked ~ .box{background:var(--blue-600);border-color:var(--blue-600);}
.ckb input:checked ~ .box svg{opacity:1;transform:scale(1);}
.ckb input:disabled ~ .box{opacity:.55;cursor:not-allowed;}
.ckb input:focus-visible ~ .box{box-shadow:var(--shadow-focus);}
.ckb.center{justify-content:center;}

/* Marca "sim" neutra para células booleanas de config (não é status de sucesso) */
.bool-yes{display:inline-flex;width:16px;height:16px;color:var(--gray-600);}
.bool-yes svg{width:16px;height:16px;}
.bool-no{color:var(--gray-400);}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);}
.card-pad{padding:20px;}
.card-stack{display:flex;flex-direction:column;gap:16px;}
.card-hover{transition:box-shadow var(--dur-card) var(--ease),transform var(--dur-card) var(--ease),border-color var(--dur-card) var(--ease);}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--gray-200);}

/* ---------- Badges / tags / legendas ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-pill);font-size:var(--text-2xs);font-weight:700;letter-spacing:.01em;}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge-green{background:var(--green-50);color:var(--green-600);}
.badge-red{background:var(--red-50);color:var(--red-600);}
.badge-amber{background:var(--amber-50);color:var(--amber-600);}
.badge-gray{background:var(--gray-100);color:var(--gray-600);}

.tag-pill{font-size:var(--text-2xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap;letter-spacing:.01em;}
.tag-own{background:var(--green-50);color:var(--green-600);}
.tag-other{background:var(--gray-100);color:var(--gray-500);}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-green{background:var(--green-600);}
.dot-gray{background:var(--gray-400);}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--text-xs);color:var(--gray-500);margin-top:12px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}