/* =========================================================
   TCS · Design System v4 — Componentes base
   Etapa 1 · Fundação visual
   ---------------------------------------------------------
   Depende de tokens.css. Todos os componentes usam tokens,
   nunca valores literais. Estilos puramente visuais —
   nenhuma lógica de negócio.
   ========================================================= */

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select{font-family:inherit;color:inherit}

/* ---------- UTILITÁRIOS TIPOGRÁFICOS ---------- */
.t-serif{font-family:var(--font-serif);font-weight:var(--fw-regular);letter-spacing:var(--tracking-snug)}
.t-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.t-tnum{font-variant-numeric:tabular-nums}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:7px 12px;border-radius:var(--radius-lg);
  font-size:12.5px;font-weight:var(--fw-semibold);
  border:1px solid var(--color-line-strong);
  background:var(--color-card);color:var(--color-ink);
  transition:all var(--dur-fast) var(--ease-out);
  cursor:pointer;line-height:1.4;
}
.btn:hover{border-color:var(--color-ink-30)}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--color-olive)}

.btn.primary{background:var(--color-olive);border-color:var(--color-olive);color:#fff}
.btn.primary:hover{background:var(--color-olive-600);border-color:var(--color-olive-600)}

.btn.ink{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
.btn.ink:hover{background:#000}

.btn.ghost{background:transparent;border-color:transparent;color:var(--color-ink-70)}
.btn.ghost:hover{background:var(--color-bg-alt);color:var(--color-ink)}

.btn.danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff}
.btn.danger:hover{background:var(--color-danger-600);border-color:var(--color-danger-600)}

.btn[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}
.btn svg{width:13px;height:13px}

.btn.sm{padding:5px 10px;font-size:12px}
.btn.lg{padding:9px 16px;font-size:13.5px}

/* ---------- Icon button ---------- */
.icon-btn{
  width:32px;height:32px;border-radius:var(--radius-lg);
  display:grid;place-items:center;color:var(--color-ink-60);
  position:relative;transition:all var(--dur-fast) var(--ease-out);
  cursor:pointer;background:transparent;border:none;
}
.icon-btn:hover{background:var(--color-bg-alt);color:var(--color-ink)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* =========================================================
   CHIPS & BADGES
   ========================================================= */
.chip{
  display:inline-flex;align-items:center;gap:3px;
  font-size:var(--text-xs);padding:1px 6px;
  border-radius:var(--radius-sm);font-weight:var(--fw-semibold);
  letter-spacing:0.01em;line-height:1.5;
}
.chip.olive{background:var(--color-olive-50);color:var(--color-olive-700)}
.chip.lilac{background:var(--color-lilac-50);color:var(--color-lilac)}
.chip.info{background:var(--color-info-bg);color:var(--color-info)}
.chip.warn{background:var(--color-warn-bg);color:var(--color-warn)}
.chip.danger{background:var(--color-danger-bg);color:var(--color-danger)}
.chip.neutral{background:var(--color-bg-alt);color:var(--color-ink-70);border:1px solid var(--color-line)}

/* Sidebar badges ("Em breve", "Pro", "Beta", "Novo") */
.badge{
  font-size:9px;padding:1px 5px;border-radius:3px;
  font-weight:var(--fw-bold);letter-spacing:0.05em;
  text-transform:uppercase;line-height:1.3;
  border:1px solid transparent;
}
.badge.soon{color:var(--color-ink-40);border-color:var(--color-ink-20)}
.badge.pro{color:#d4b862;background:rgba(212,184,98,0.09);border-color:rgba(212,184,98,0.22)}
.badge.beta{color:var(--color-info);background:var(--color-info-bg);border-color:rgba(63,106,138,0.28)}
.badge.new{color:var(--color-olive-700);background:var(--color-olive-50);border-color:var(--color-olive-100)}

/* =========================================================
   STATUS (pill com ponto colorido)
   ========================================================= */
.status{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:var(--radius-md);
  font-size:11px;font-weight:var(--fw-semibold);line-height:1.5;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}

.status.active   {background:var(--color-success-bg);color:var(--color-success)}
.status.active::before   {background:var(--color-success)}
.status.pending  {background:var(--color-warn-bg);color:var(--color-warn)}
.status.pending::before  {background:var(--color-warn)}
.status.overdue  {background:var(--color-danger-bg);color:var(--color-danger)}
.status.overdue::before  {background:var(--color-danger)}
.status.scheduled{background:var(--color-lilac-50);color:var(--color-lilac)}
.status.scheduled::before{background:var(--color-lilac)}
.status.draft    {background:var(--color-bg-alt);color:var(--color-ink-60)}
.status.draft::before    {background:var(--color-ink-40)}

/* =========================================================
   INPUTS / FORM
   ========================================================= */
.field{display:flex;flex-direction:column;gap:var(--space-3)}
.field > label{font-size:11.5px;color:var(--color-ink-70);font-weight:var(--fw-semibold)}

.input,.select,.textarea{
  width:100%;height:34px;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-lg);
  padding:0 var(--space-5);
  font-family:inherit;font-size:12.5px;
  background:var(--color-card);color:var(--color-ink);
  outline:none;
  transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.textarea{height:auto;padding:var(--space-5);line-height:var(--lh-normal);min-height:72px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--color-ink-40)}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--color-olive);box-shadow:var(--shadow-focus);
}
.input[disabled]{background:var(--color-bg-alt);color:var(--color-ink-50);cursor:not-allowed}
.input.error{border-color:var(--color-danger)}
.input.error:focus{box-shadow:0 0 0 3px rgba(180,68,46,0.12)}

.help{font-size:11px;color:var(--color-ink-60);margin-top:-2px}
.help.error{color:var(--color-danger)}

/* Checkbox / radio use native styling with accent color */
input[type=checkbox],input[type=radio]{
  width:13px;height:13px;accent-color:var(--color-olive);cursor:pointer;
}

/* =========================================================
   SEGMENTED CONTROL
   ========================================================= */
.seg{
  display:inline-flex;background:var(--color-bg-alt);
  border-radius:var(--radius-md);padding:2px;gap:1px;
  border:1px solid var(--color-line);
}
.seg button{
  padding:4px 10px;font-size:11.5px;
  font-weight:var(--fw-semibold);color:var(--color-ink-60);
  border-radius:var(--radius-sm);line-height:1.4;
}
.seg button.on{
  background:var(--color-card);color:var(--color-ink);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

/* =========================================================
   PAINEL / CARD
   ========================================================= */
.panel{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-radius:var(--radius-2xl);
  overflow:hidden;
}
.panel-head{
  padding:var(--space-7) var(--space-9) var(--space-6);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--color-line);
  gap:var(--space-6);flex-wrap:wrap;
}
.panel-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.panel-title h3{
  font-size:13.5px;font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-snug);
}
.panel-title span{font-size:11.5px;color:var(--color-ink-60)}

/* =========================================================
   BANNER (alertas contextuais)
   ========================================================= */
.banner{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-warn);
  border-radius:var(--radius-xl);
  padding:12px 16px;display:flex;align-items:center;
  gap:var(--space-7);
}
.banner.info{border-left-color:var(--color-info)}
.banner.success{border-left-color:var(--color-success)}
.banner.danger{border-left-color:var(--color-danger)}

.banner-ic{
  width:30px;height:30px;border-radius:var(--radius-lg);
  background:var(--color-warn-bg);color:var(--color-warn);
  display:grid;place-items:center;flex-shrink:0;
  border:1px solid rgba(181,120,26,0.28);
}
.banner.info .banner-ic{background:var(--color-info-bg);color:var(--color-info);border-color:rgba(63,106,138,0.25)}
.banner.success .banner-ic{background:var(--color-success-bg);color:var(--color-success);border-color:rgba(75,122,74,0.25)}
.banner.danger .banner-ic{background:var(--color-danger-bg);color:var(--color-danger);border-color:rgba(180,68,46,0.25)}

.banner-body{flex:1;min-width:0;line-height:var(--lh-normal)}
.banner-body b{font-size:12.5px;font-weight:var(--fw-semibold);display:block}
.banner-body p{font-size:11.5px;color:var(--color-ink-60);margin-top:1px}

/* =========================================================
   TABELA
   ========================================================= */
.table{width:100%;border-collapse:collapse;font-size:12.5px}
.table thead th{
  text-align:left;font-size:10.5px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--color-ink-60);
  font-weight:var(--fw-bold);padding:9px 18px;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-line);white-space:nowrap;
}
.table thead th.num{text-align:right}
.table tbody td{
  padding:11px 18px;border-bottom:1px solid var(--color-line);
  vertical-align:middle;
}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--dur-fast);cursor:pointer}
.table tbody tr:hover{background:var(--color-bg)}
.table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-medium)}

/* =========================================================
   KPI CARD
   ========================================================= */
.kpi{
  background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius-xl);padding:16px 18px;
  position:relative;overflow:hidden;
  transition:border-color var(--dur-base);
}
.kpi:hover{border-color:var(--color-line-strong)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-label{font-size:11.5px;color:var(--color-ink-60);font-weight:var(--fw-semibold)}
.kpi-ic{
  width:26px;height:26px;border-radius:var(--radius-md);
  background:var(--color-olive-50);color:var(--color-olive-700);
  display:grid;place-items:center;border:1px solid var(--color-olive-100);
}
.kpi-val{
  font-size:var(--text-2xl);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-tight);line-height:var(--lh-tight);
  display:flex;align-items:baseline;gap:4px;
}
.kpi-val .unit{font-size:13px;color:var(--color-ink-50);font-weight:var(--fw-medium)}
.kpi-val .cur{font-size:14px;color:var(--color-ink-50);font-weight:var(--fw-medium);margin-right:2px}
.kpi-foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11.5px}

.delta{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px;border-radius:var(--radius-md);
  font-weight:var(--fw-semibold);font-size:11px;line-height:1;
}
.delta.up{background:var(--color-success-bg);color:var(--color-success)}
.delta.dn{background:var(--color-danger-bg);color:var(--color-danger)}
.delta.flat{background:var(--color-bg-alt);color:var(--color-ink-60)}

/* =========================================================
   AVATAR
   ========================================================= */
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-olive-100),var(--color-olive));
  display:grid;place-items:center;
  color:var(--color-ink);font-weight:var(--fw-bold);font-size:11px;
  flex-shrink:0;border:1px solid rgba(255,255,255,0.1);
  position:relative;
}
.avatar.sm{width:24px;height:24px;font-size:9.5px}
.avatar.lg{width:40px;height:40px;font-size:13px}
.avatar .online{
  position:absolute;bottom:-1px;right:-1px;
  width:10px;height:10px;border-radius:50%;
  background:var(--color-success);border:2px solid var(--color-card);
}