/* ---------------------------------------------------------------
 * wordgraph.css — styles unique to the WordGraph tool: input-type
 * selector, file dropzone, progress bar, columns/stopwords modals,
 * tooltips, spinner.
 *
 * Layout primitives (.form-section*, .section-*, .row*, .input-panel,
 * .setting-card, button + status styles) live in base.css.
 * --------------------------------------------------------------- */

.input-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #eef2f7;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid #dbe2ea;
}

.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  margin: 0;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-soft);
  background: transparent;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  border: 1px solid transparent;
}

.choice-card:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.choice-card input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0f172a;
}

.choice-card:has(input[type="radio"]:checked) {
  background: #fff;
  color: var(--text);
  border-color: #dbe2ea;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* Shared <select> chrome — gets the same border/padding as text inputs from
 * base.css, this rule adds the dropdown caret. Lives here (rather than in
 * wordcloud.css) because /wordgraph also uses .select-input for its
 * "Categoria extraída" picker and only loads wordgraph.css. */
.select-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #475569 50%),
                    linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}

/* ---------- file input ---------- */

.file-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-input-label {
  display: block;
  width: 100%;
  padding: 22px;
  border: 2px dashed #cbd5e1;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,1) 100%);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--text-soft);
  text-align: center;
}

.file-input-label:hover {
  border-color: #64748b;
  background: #f8fafc;
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.file-input-label.has-file {
  border-color: #334155;
  background: #eff6ff;
  color: #0f172a;
  border-style: solid;
}

.file-drop-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 24px;
  border-radius: 16px;
  background: #e2e8f0;
}

/* ---------- progress ---------- */

.progress-wrap {
  margin-top: 1rem;
  height: 16px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  display: flex;
  align-items: stretch;
}

.progress-el {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.progress-el::-webkit-progress-bar {
  background: transparent;
  border-radius: 999px;
}

.progress-el::-webkit-progress-value {
  background: linear-gradient(90deg, #0f172a 0%, #334155 100%);
  border-radius: 999px;
}

.progress-el::-moz-progress-bar {
  background: linear-gradient(90deg, #0f172a 0%, #334155 100%);
  border-radius: 999px;
}

.progress-text {
  font-size: 0.95rem;
  color: var(--text-soft);
  margin-top: 0.6rem;
  font-weight: 600;
}

/* ---------- help / tooltips ---------- */

.label-with-help {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
  color: white;
  font-size: 13px;
  font-weight: 800;
  /* line-height: 1 — tighter than the inherited 1.2 — so the "?" glyph's
   * own line-box is centred inside the 22 px circle without the extra
   * leading that was pushing the character ~0.7 px below the circle's
   * geometric centre. */
  line-height: 1;
  cursor: help;
  position: relative;
  /* margin-bottom: 8 px in a flex container (.label-with-help) makes the
   * icon's MARGIN box taller than its border box, and `align-items:
   * center` centres the margin box — which visually shifts the visible
   * border box ~4 px upward. That's the look the form labels were
   * designed against, so we keep it. The /extract section-title
   * (which is also flex) overrides this below. */
  margin-bottom: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.help-icon:hover,
.help-icon:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  outline: none;
}

/* Section-title scope: the only place where .help-icon lives directly
 * inside an <h2> (currently /extract's "Escolha a categoria a extrair").
 * Two adjustments versus the default:
 *   1. zero margin-bottom — the 8 px global default was inflating the
 *      <h2>'s line-box and visibly pushing the categories grid below it
 *      down by 8 px without moving the icon up;
 *   2. translateY(1.5 px) — flex's `align-items: center` lands the icon
 *      on the line-box GEOMETRIC centre, but the eye reads the heading
 *      as centred ~1.5 px lower (x-height + descender mass). The nudge
 *      pulls the visual centre onto that mass centre. */
.section-title .help-icon {
  margin-bottom: 0;
  transform: translateY(1.5px);
}
.section-title .help-icon:hover,
.section-title .help-icon:focus-visible {
  /* Preserve the translateY optical offset — transform is a shorthand,
   * so the hover scale needs the translate re-applied alongside it. */
  transform: translateY(1.5px) scale(1.08);
}

.help-icon:hover .tooltip,
.help-icon:focus-visible .tooltip {
  visibility: visible;
  opacity: 1;
}

.tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 100;
  bottom: 145%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0f172a;
  color: #fff;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: normal;
  width: min(260px, 80vw);
  transition: opacity 0.18s ease;
  pointer-events: none;
  box-shadow: 0 18px 30px rgba(0,0,0,0.24);
  text-align: left;
  line-height: 1.45;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}

/* ---------- columns modal ---------- */

.cols-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem 0;
  margin: 0;
  font-weight: 600;
}

.cols-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.cols-box {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #dbe2ea;
  border-radius: 16px;
  padding: .75rem;
  background: #f8fafc;
}

#colsList > div {
  border-bottom: 1px solid #e5e7eb;
  padding: .55rem .25rem;
}

#colsList > div:last-child {
  border-bottom: 0;
}

.stopwords-area {
  height: 300px;
  width: 100%;
}

/* loading bar inside columns modal */
.cols-loading {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .8rem .9rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.03));
  border: 1px solid rgba(15,23,42,.10);
  margin-top: .6rem;
}

.spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;
  background: conic-gradient(
    from 180deg,
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.85),
    rgba(51,65,85,0.85),
    rgba(15,23,42,0.10)
  );
  box-shadow:
    0 10px 18px rgba(15,23,42,.12),
    inset 0 0 0 1px rgba(255,255,255,.55);
  animation: spin 0.85s linear infinite;
}

.spinner::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #f3f4f6;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.10);
}

.spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), transparent 45%);
  mix-blend-mode: screen;
  opacity: .55;
  filter: blur(.2px);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#colsLoadingText {
  font-weight: 650;
  color: rgba(15,23,42,.85);
  animation: pulseText 1.2s ease-in-out infinite;
}

@keyframes pulseText {
  0%, 100% { opacity: .78; }
  50%      { opacity: 1; }
}

/* ---------- responsive ---------- */

@media (max-width: 768px) {
  .input-type-selector { grid-template-columns: 1fr; }
  .file-drop-content { flex-direction: column; }
  .cols-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cols-actions .btn-secondary { width: 100%; }
}