/* =========================================================
   FERMENTA SALES - DESIGN SYSTEM
   FASE 2 - CAMADA DE COMPONENTES COMPARTILHADOS

   Todas as regras sao escopadas em classes .fsd-*.
   NAO ha nenhum seletor de elemento nu (button, table, a,
   input...), entao incluir este arquivo nao altera nada
   ate que markup real receba as classes .fsd-* (Fase 3+).

   Consome as variaveis --fsd-* de fermenta-tokens.css.
   ========================================================= */

/* ---------------- utilitarios ---------------- */
.fsd-mono   { font-family: var(--fsd-font-mono); }
.fsd-tnum   { font-variant-numeric: tabular-nums; }
.fsd-muted  { color: var(--fsd-muted); }
.fsd-ink    { color: var(--fsd-ink); }
.fsd-stack  { display: flex; flex-direction: column; gap: var(--fsd-sp-4); }
.fsd-row    { display: flex; align-items: center; gap: var(--fsd-sp-2); }
.fsd-scroll-x { width: 100%; overflow-x: auto; }
.fsd-spacer { flex: 1 1 auto; }

/* ---------------- superficie / cartao ---------------- */
.fsd-card {
  background: var(--fsd-surface);
  border: 1px solid var(--fsd-border);
  border-radius: var(--fsd-r-lg);
  box-shadow: var(--fsd-shadow-sm);
}
.fsd-card--flat { box-shadow: none; }
.fsd-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--fsd-sp-4);
  padding: var(--fsd-sp-4) var(--fsd-sp-5);
  border-bottom: 1px solid var(--fsd-border);
}
.fsd-card__head h2, .fsd-card__head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--fsd-ink); }
.fsd-card__body { padding: var(--fsd-sp-5); }

/* ---------------- cabecalho de pagina ---------------- */
.fsd-pagehead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--fsd-sp-5); flex-wrap: wrap;
}
.fsd-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fsd-accent-ink);
}
.fsd-pagehead h1 {
  margin: 6px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em;
  color: var(--fsd-ink); font-family: var(--fsd-font-ui);
}
.fsd-pagehead p { margin: 0; color: var(--fsd-muted); font-size: 13px; }
.fsd-pagehead__actions { display: flex; align-items: center; gap: var(--fsd-sp-2); flex: none; }

/* ---------------- botoes ---------------- */
.fsd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border-radius: var(--fsd-r-ctl);
  border: 1px solid var(--fsd-border-2);
  background: var(--fsd-surface);
  color: var(--fsd-text);
  font-family: var(--fsd-font-ui); font-size: 13px; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background var(--fsd-dur) var(--fsd-ease),
              border-color var(--fsd-dur) var(--fsd-ease),
              transform .05s var(--fsd-ease);
}
.fsd-btn svg { width: 15px; height: 15px; }
.fsd-btn:hover { border-color: var(--fsd-muted); }
.fsd-btn:active { transform: translateY(1px); }
.fsd-btn:disabled { opacity: .55; cursor: not-allowed; }
.fsd-btn--primary {
  background: var(--fsd-accent); border-color: var(--fsd-accent); color: #fff;
  box-shadow: 0 1px 2px rgba(37,99,235,.3);
}
.fsd-btn--primary:hover { background: var(--fsd-accent-ink); border-color: var(--fsd-accent-ink); }
.fsd-btn--ghost { background: none; border-color: transparent; color: var(--fsd-muted); }
.fsd-btn--ghost:hover { background: var(--fsd-sunken); color: var(--fsd-text); border-color: transparent; }
.fsd-btn--danger { background: var(--fsd-crit); border-color: var(--fsd-crit); color: #fff; }
.fsd-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; }
.fsd-btn--icon { width: 30px; height: 30px; padding: 0; }

/* ---------------- campos de formulario ---------------- */
.fsd-field { display: flex; flex-direction: column; gap: 6px; }
.fsd-label { font-size: 12px; font-weight: 600; color: var(--fsd-text); }
.fsd-input, .fsd-select, .fsd-textarea {
  height: 34px; padding: 0 11px;
  border: 1px solid var(--fsd-border-2); border-radius: var(--fsd-r-ctl);
  background: var(--fsd-surface); color: var(--fsd-text);
  font-family: var(--fsd-font-ui); font-size: 13px;
  transition: border-color var(--fsd-dur) var(--fsd-ease), box-shadow var(--fsd-dur) var(--fsd-ease);
}
.fsd-textarea { height: auto; min-height: 84px; padding: 9px 11px; line-height: 1.5; resize: vertical; }
.fsd-input:focus, .fsd-select:focus, .fsd-textarea:focus {
  outline: none; border-color: var(--fsd-accent);
  box-shadow: 0 0 0 3px var(--fsd-accent-weak);
}
.fsd-select {
  appearance: none; padding-right: 30px;
  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='%236A7688' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.fsd-hint { font-size: 11.5px; color: var(--fsd-muted); }
.fsd-field--error .fsd-input,
.fsd-field--error .fsd-select { border-color: var(--fsd-crit); }
.fsd-field--error .fsd-hint { color: var(--fsd-crit); }

.fsd-search {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 11px;
  border: 1px solid var(--fsd-border-2); border-radius: var(--fsd-r-ctl);
  background: var(--fsd-surface); color: var(--fsd-muted);
}
.fsd-search svg { width: 15px; height: 15px; flex: none; }
.fsd-search input {
  border: none; background: none; outline: none; flex: 1;
  color: var(--fsd-text); font-family: var(--fsd-font-ui); font-size: 13px;
}

/* ---------------- KPI / indicadores ---------------- */
.fsd-kpi {
  background: var(--fsd-surface); border: 1px solid var(--fsd-border);
  border-radius: var(--fsd-r-card); box-shadow: var(--fsd-shadow-sm);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 9px;
}
.fsd-kpi__label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fsd-muted); }
.fsd-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.fsd-kpi__val { font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--fsd-ink); }
.fsd-kpi__val.fsd-mono { font-size: 20px; }
.fsd-kpi__spark { width: 78px; height: 30px; flex: none; }
.fsd-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: var(--fsd-r-pill);
}
.fsd-delta svg { width: 11px; height: 11px; }
.fsd-delta--up { color: var(--fsd-good); background: var(--fsd-good-weak); }
.fsd-delta--down { color: var(--fsd-crit); background: var(--fsd-crit-weak); }
.fsd-delta small { color: var(--fsd-muted); font-weight: 450; }

/* ---------------- tabela ---------------- */
.fsd-table { width: 100%; border-collapse: collapse; font-family: var(--fsd-font-ui); font-size: 13px; }
.fsd-table thead th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fsd-muted); background: var(--fsd-sunken);
  border-bottom: 1px solid var(--fsd-border); white-space: nowrap;
}
.fsd-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--fsd-border); vertical-align: middle; color: var(--fsd-text); }
.fsd-table tbody tr { transition: background .12s var(--fsd-ease); }
.fsd-table tbody tr:hover { background: var(--fsd-sunken); }
.fsd-table tbody tr:last-child td { border-bottom: none; }
.fsd-table--dense tbody td, .fsd-table--dense thead th { padding-top: 7px; padding-bottom: 7px; }
.fsd-table .fsd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fsd-ink); }

/* ---------------- badges / chips / tags ---------------- */
.fsd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--fsd-r-pill);
  font-family: var(--fsd-font-ui); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.fsd-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fsd-badge--neutral { background: var(--fsd-sunken); color: var(--fsd-muted); }
.fsd-badge--info    { background: var(--fsd-accent-weak); color: var(--fsd-accent-ink); }
.fsd-badge--accent  { background: var(--fsd-accent-weak); color: var(--fsd-accent); }
.fsd-badge--warn    { background: var(--fsd-warn-weak); color: var(--fsd-warn); }
.fsd-badge--gold    { background: var(--fsd-gold-weak); color: var(--fsd-gold); }
.fsd-badge--good    { background: var(--fsd-good-weak); color: var(--fsd-good); }
.fsd-badge--crit    { background: var(--fsd-crit-weak); color: var(--fsd-crit); }

.fsd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 6px 0 10px; border-radius: var(--fsd-r-pill);
  background: var(--fsd-accent-weak); color: var(--fsd-accent-ink);
  font-family: var(--fsd-font-ui); font-size: 12px; font-weight: 500;
}
.fsd-chip__x {
  display: grid; place-items: center; width: 16px; height: 16px;
  border: none; border-radius: 50%; background: none; color: inherit; opacity: .7; cursor: pointer;
}
.fsd-chip__x:hover { opacity: 1; background: rgba(0,0,0,.06); }
.fsd-chip__x svg { width: 10px; height: 10px; }

/* ---------------- abas ---------------- */
.fsd-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.fsd-tab {
  padding: 7px 12px; border: 1px solid transparent; border-radius: var(--fsd-r-pill);
  background: var(--fsd-sunken); color: var(--fsd-muted);
  font-family: var(--fsd-font-ui); font-size: 12px; font-weight: 500; cursor: pointer;
}
.fsd-tab[aria-selected="true"], .fsd-tab.is-active {
  background: var(--fsd-accent-weak); color: var(--fsd-accent-ink); border-color: var(--fsd-accent-weak);
}

/* ---------------- avatar ---------------- */
.fsd-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--fsd-accent-weak); color: var(--fsd-accent-ink);
  font-family: var(--fsd-font-ui); font-size: 10px; font-weight: 600;
}

/* ---------------- paginacao ---------------- */
.fsd-pager { display: flex; align-items: center; gap: 6px; }

/* ---------------- estado vazio ---------------- */
.fsd-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 48px 24px; color: var(--fsd-muted);
}
.fsd-empty__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--fsd-r-card); background: var(--fsd-sunken); color: var(--fsd-muted);
}
.fsd-empty__title { color: var(--fsd-ink); font-weight: 600; font-size: 14px; }
.fsd-empty__hint { font-size: 12.5px; max-width: 42ch; }

/* ---------------- skeleton ---------------- */
.fsd-skeleton {
  background: linear-gradient(90deg, var(--fsd-sunken) 25%, var(--fsd-border) 37%, var(--fsd-sunken) 63%);
  background-size: 400% 100%; border-radius: 6px;
  animation: fsd-shimmer 1.4s ease infinite;
}
@keyframes fsd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------- toast ---------------- */
.fsd-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--fsd-r-card);
  background: var(--fsd-ink); color: #fff;
  font-family: var(--fsd-font-ui); font-size: 13px; font-weight: 500;
  box-shadow: var(--fsd-shadow-lg);
}
.fsd-toast--good { background: var(--fsd-good); }
.fsd-toast--crit { background: var(--fsd-crit); }

/* ---------------- menu / dropdown ---------------- */
.fsd-menu {
  background: var(--fsd-surface); border: 1px solid var(--fsd-border);
  border-radius: var(--fsd-r-card); box-shadow: var(--fsd-shadow-lg);
  padding: 5px; min-width: 180px;
}
.fsd-menu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 6px;
  background: none; color: var(--fsd-text);
  font-family: var(--fsd-font-ui); font-size: 13px; text-align: left; cursor: pointer;
}
.fsd-menu__item:hover { background: var(--fsd-sunken); }

/* ---------------- modal ---------------- */
.fsd-modal__panel {
  background: var(--fsd-surface); color: var(--fsd-text);
  border: 1px solid var(--fsd-border); border-radius: var(--fsd-r-lg);
  box-shadow: var(--fsd-shadow-lg); padding: 0; width: min(560px, calc(100vw - 32px));
}
.fsd-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-bottom: 1px solid var(--fsd-border);
}
.fsd-modal__head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--fsd-ink); }
.fsd-modal__body { padding: 20px; }
.fsd-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--fsd-border);
}

/* ---------------- app shell (scaffold p/ Fase 3) ---------------- */
.fsd-app { display: grid; grid-template-columns: var(--fsd-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.fsd-sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 22px; padding: 18px 14px;
  background: linear-gradient(180deg, var(--fsd-sb-bg), var(--fsd-sb-bg-2));
  border-right: 1px solid var(--fsd-sb-border);
}
.fsd-main { min-width: 0; display: flex; flex-direction: column; }
.fsd-nav { display: flex; flex-direction: column; gap: 3px; }
.fsd-nav-label {
  padding: 0 8px 6px; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.34);
}
.fsd-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--fsd-r-ctl);
  background: none; color: var(--fsd-sb-text);
  font-family: var(--fsd-font-ui); font-size: 13px; font-weight: 450;
  text-align: left; text-decoration: none; cursor: pointer; position: relative;
  transition: background var(--fsd-dur) var(--fsd-ease), color var(--fsd-dur) var(--fsd-ease);
}
.fsd-nav-item svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.fsd-nav-item:hover { background: rgba(255,255,255,.05); color: var(--fsd-sb-text-hi); }
.fsd-nav-item[aria-current="page"], .fsd-nav-item.is-active {
  background: var(--fsd-sb-active-bg); border-color: var(--fsd-sb-active-bd);
  color: var(--fsd-sb-text-hi); font-weight: 500;
}
.fsd-nav-item[aria-current="page"]::before, .fsd-nav-item.is-active::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: #5B9BFF;
}

/* ---------------- foco visivel (escopado) ---------------- */
.fsd-btn:focus-visible, .fsd-input:focus-visible, .fsd-select:focus-visible,
.fsd-textarea:focus-visible, .fsd-nav-item:focus-visible, .fsd-tab:focus-visible,
.fsd-chip__x:focus-visible, .fsd-menu__item:focus-visible, .fsd-search:focus-within {
  outline: 2px solid var(--fsd-accent); outline-offset: 2px;
}

/* ---------------- movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
  .fsd-btn, .fsd-nav-item, .fsd-table tbody tr, .fsd-input, .fsd-select, .fsd-textarea,
  .fsd-skeleton { transition: none !important; animation: none !important; }
}