/*
 * Findb Studio / Club — fundação UX premium responsiva
 * CP189 / 1.0.484
 * Escopo visual reutilizável. Não altera regras de negócio, RPCs ou persistência.
 * Toda nova superfície administrativa do Club deve usar .club-ux-premium.
 */
.club-ux-premium{
  --club-ux-field-bg:#0e0f15;
  --club-ux-field-bg-focus:#11121a;
  --club-ux-field-border:rgba(255,255,255,.10);
  --club-ux-field-border-hover:rgba(255,255,255,.16);
  --club-ux-field-border-focus:rgba(169,104,255,.68);
  --club-ux-field-text:#f7f6fb;
  --club-ux-field-muted:#777b89;
  --club-ux-focus:0 0 0 3px rgba(145,78,244,.13),0 12px 30px rgba(0,0,0,.14);
  --club-ux-radius:14px;
  --club-ux-control-h:46px;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
.club-ux-premium,.club-ux-premium *{box-sizing:border-box}
.club-ux-premium>*,.club-ux-premium section,.club-ux-premium article,.club-ux-premium aside,.club-ux-premium form,.club-ux-premium label,.club-ux-premium div{min-width:0}

/* Controles — mesma linguagem premium, sem chrome nativo visível. */
.club-ux-premium input:not([type="checkbox"]):not([type="radio"]),
.club-ux-premium select,
.club-ux-premium textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:var(--club-ux-control-h);
  margin:0;
  border:1px solid var(--club-ux-field-border);
  border-radius:var(--club-ux-radius);
  background:linear-gradient(180deg,rgba(16,17,24,.98),rgba(10,11,17,.98));
  color:var(--club-ux-field-text);
  outline:none;
  font:inherit;
  font-size:12px;
  font-weight:560;
  line-height:1.35;
  padding:11px 13px;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),0 8px 22px rgba(0,0,0,.08);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,opacity .16s ease;
  caret-color:#bd91ff;
}
.club-ux-premium select{
  padding-right:42px;
  cursor:pointer;
  background-color:var(--club-ux-field-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c5a2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(16,17,24,.98),rgba(10,11,17,.98));
  background-repeat:no-repeat,no-repeat;
  background-position:right 13px center,center;
  background-size:17px,100% 100%;
}
.club-ux-premium select option{background:#111219;color:#f7f6fb}
.club-ux-premium textarea{min-height:82px;resize:vertical}
.club-ux-premium input::placeholder,.club-ux-premium textarea::placeholder{color:var(--club-ux-field-muted);opacity:1;font-weight:450}
.club-ux-premium input:not([type="checkbox"]):not([type="radio"]):hover,
.club-ux-premium select:hover,.club-ux-premium textarea:hover{border-color:var(--club-ux-field-border-hover)}
.club-ux-premium input:not([type="checkbox"]):not([type="radio"]):focus,
.club-ux-premium select:focus,.club-ux-premium textarea:focus{
  border-color:var(--club-ux-field-border-focus);
  background-color:var(--club-ux-field-bg-focus);
  box-shadow:var(--club-ux-focus),inset 0 1px 0 rgba(255,255,255,.04);
}
.club-ux-premium input:disabled,.club-ux-premium select:disabled,.club-ux-premium textarea:disabled{opacity:.5;cursor:not-allowed}
.club-ux-premium input:-webkit-autofill,.club-ux-premium input:-webkit-autofill:hover,.club-ux-premium input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f7f6fb;
  -webkit-box-shadow:0 0 0 1000px #0e0f15 inset;
  transition:background-color 9999s ease-out 0s;
}

/* Datas mantêm o seletor nativo do SO por acessibilidade, mas com superfície visual do Studio. */
.club-ux-premium input[type="date"],.club-ux-premium input[type="datetime-local"],.club-ux-premium input[type="time"]{color-scheme:dark;padding-right:11px}
.club-ux-premium input[type="date"]::-webkit-calendar-picker-indicator,
.club-ux-premium input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.club-ux-premium input[type="time"]::-webkit-calendar-picker-indicator{opacity:.72;cursor:pointer;filter:hue-rotate(225deg) saturate(1.2)}

/* Checkbox premium sem mudar sua semântica. */
.club-ux-premium input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  min-width:20px;
  margin:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:#0b0c11;
  background-repeat:no-repeat;
  background-position:center;
  background-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.club-ux-premium input[type="checkbox"]:checked{
  border-color:#a66cff;
  background-color:#8d4df4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  box-shadow:0 0 0 3px rgba(141,77,244,.14),inset 0 1px 0 rgba(255,255,255,.2);
}
.club-ux-premium input[type="checkbox"]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(141,77,244,.16),inset 0 1px 0 rgba(255,255,255,.2)}

/* Elementos interativos compartilham ergonomia mobile. */
.club-ux-premium button,.club-ux-premium summary,.club-ux-premium select{-webkit-tap-highlight-color:transparent}
.club-ux-premium button{max-width:100%}
.club-ux-premium :focus-visible{outline:none}
.club-ux-premium .primary-btn,.club-ux-premium .secondary-btn{min-height:44px}

/* Regra canônica anti-overflow para conteúdo administrativo. */
.club-ux-premium p,.club-ux-premium small,.club-ux-premium em,.club-ux-premium strong,.club-ux-premium span{max-width:100%}
.club-ux-premium .ux-break{overflow-wrap:anywhere;word-break:break-word}

@media(max-width:680px){
  .club-ux-premium{--club-ux-control-h:48px}
  .club-ux-premium input:not([type="checkbox"]):not([type="radio"]),.club-ux-premium select,.club-ux-premium textarea{font-size:16px}
}