/* Turni Brasil — Component Kit · v3.0
   Shared component DNA used across preview cards AND both registers.
   Import AFTER colors_and_type.css. Class prefix: .tk-
   Registers: default = balanced (works anywhere) · add .reg-client for dense
   web-panel tuning · add .reg-doer for the brighter contractor-app tuning. */

/* ============================ BUTTONS ============================ */
.tk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border:1px solid transparent;
  border-radius:var(--radius-md);
  font-family:var(--font-sans); font-size:14px; font-weight:600; line-height:1;
  letter-spacing:-0.01em; cursor:pointer; white-space:nowrap;
  transition: transform var(--duration-fast) var(--ease-spring),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.tk-btn:active { transform: scale(0.96); }
.tk-btn svg { width:18px; height:18px; flex:none; }

.tk-btn.is-primary   { background:var(--td-teal-700); color:#fff; }
.tk-btn.is-primary:hover  { background:var(--td-teal-800); box-shadow:var(--shadow-sm); }
.tk-btn.is-secondary { background:#fff; color:var(--td-ink-900); border-color:var(--td-gray-300); }
.tk-btn.is-secondary:hover { color:var(--td-teal-700); border-color:var(--td-teal-500); background:var(--td-teal-50); }
.tk-btn.is-ghost     { background:transparent; color:var(--td-teal-700); }
.tk-btn.is-ghost:hover     { background:var(--td-teal-50); }
.tk-btn.is-danger    { background:var(--td-red-600); color:#fff; }
.tk-btn.is-danger:hover    { background:var(--td-red-700); }
.tk-btn.is-disabled, .tk-btn:disabled { background:var(--td-gray-100); color:var(--td-ink-300); border-color:var(--td-gray-200); cursor:not-allowed; box-shadow:none; transform:none; }

.tk-btn.is-sm { height:32px; padding:0 12px; font-size:13px; border-radius:var(--radius-sm); }
.tk-btn.is-lg { height:48px; padding:0 22px; font-size:15px; }
.tk-btn.is-xl { height:54px; padding:0 26px; font-size:16px; border-radius:var(--radius-lg); }
.tk-btn.is-pill { border-radius:var(--radius-pill); }
.tk-btn.is-block { width:100%; }

/* Contractor register: primary gets a teal glow + a touch more lift on press */
.reg-doer .tk-btn.is-primary, .tk-btn.is-glow { box-shadow:var(--shadow-cta); }
.reg-doer .tk-btn.is-primary:hover { box-shadow:var(--shadow-cta), var(--shadow-sm); transform:translateY(-1px); }
.reg-doer .tk-btn.is-primary:active { transform:scale(0.97); }

/* ============================ CHIPS / BADGES ============================ */
.tk-chip {
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:var(--radius-pill); border:1px solid transparent;
  font-family:var(--font-sans); font-size:12px; font-weight:600; line-height:1;
  letter-spacing:0.005em; white-space:nowrap;
}
.tk-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tk-chip.no-dot::before { display:none; }
.tk-chip .ic { width:13px; height:13px; margin-right:-2px; }

.tk-chip.is-paid    { background:var(--td-green-100); color:var(--td-green-700); border-color:var(--td-green-200); }
.tk-chip.is-brand   { background:var(--td-teal-100); color:var(--td-teal-800); border-color:var(--td-teal-200); }
.tk-chip.is-pending { background:var(--td-amber-100); color:var(--td-amber-700); border-color:var(--td-amber-200); }
.tk-chip.is-error   { background:var(--td-red-100); color:var(--td-red-700); border-color:var(--td-red-200); }
.tk-chip.is-info    { background:var(--td-blue-100); color:var(--td-blue-700); border-color:var(--td-blue-300); }
.tk-chip.is-neutral { background:var(--td-navy-100); color:var(--td-navy-700); border-color:var(--td-navy-200); }

/* Solid emphasis (hero counts, mobile) */
.tk-chip.is-solid { border-color:transparent; }
.tk-chip.is-solid.is-paid    { background:var(--td-green-600); color:#fff; }
.tk-chip.is-solid.is-brand   { background:var(--td-teal-600); color:#fff; }
.tk-chip.is-solid.is-pending { background:var(--td-amber-600); color:#3a2606; }
.tk-chip.is-solid.is-error   { background:var(--td-red-600); color:#fff; }

/* ============================ CARDS ============================ */
.tk-card {
  background:var(--bg-surface); border:1px solid var(--border-muted);
  border-radius:var(--radius-2xl); padding:24px; box-shadow:var(--shadow-xs);
  transition: transform var(--duration-med) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out),
              border-color var(--duration-med) var(--ease-out);
}
.tk-card.is-hoverable:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--td-gray-300); }
.tk-card.is-selected { border-color:var(--td-teal-500); box-shadow:var(--shadow-focus); }
.tk-card-nested { background:var(--td-gray-50); border:1px solid var(--border-muted); border-radius:var(--radius-xl); padding:16px; }
.reg-doer .tk-card { border-radius:var(--radius-3xl); }

/* ============================ INPUTS ============================ */
.tk-field { display:flex; flex-direction:column; gap:6px; }
.tk-label { font-size:13px; font-weight:600; color:var(--td-ink-900); }
.tk-input {
  display:flex; align-items:center; height:44px; padding:0 14px; width:100%;
  border-radius:var(--radius-md); border:1.5px solid var(--border-default);
  background:#fff; font-family:var(--font-body); font-size:14px; color:var(--fg-default);
  box-sizing:border-box; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.tk-input::placeholder { color:var(--fg-placeholder); }
.tk-input:focus, .tk-input.is-focus { outline:none; border-color:var(--border-focus); box-shadow:var(--shadow-focus); }
.tk-input.is-error { border-color:var(--td-red-600); }
.tk-input.is-error:focus { box-shadow:0 0 0 3px var(--td-red-100); }
.tk-input.is-disabled, .tk-input:disabled { background:var(--td-gray-100); color:var(--fg-muted); border-color:var(--td-gray-200); cursor:not-allowed; }
.tk-help { font-size:12px; color:var(--fg-muted); }
.tk-err  { font-size:12px; color:var(--td-red-600); font-weight:500; }
.reg-client .tk-input { height:38px; }

/* ============================ TABS ============================ */
.tk-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--td-gray-100); border-radius:var(--radius-md); }
.tk-tab {
  appearance:none; border:none; cursor:pointer; background:transparent;
  height:34px; padding:0 16px; border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--fg-muted);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.tk-tab:hover { color:var(--td-ink-900); }
.tk-tab.is-active { background:#fff; color:var(--td-teal-700); box-shadow:var(--shadow-xs); }

/* Underline tabs — dense client panel */
.tk-tabline { display:flex; gap:24px; border-bottom:1px solid var(--border-muted); }
.tk-tabline-item { position:relative; padding:0 2px 12px; font-size:14px; font-weight:600; color:var(--fg-muted); cursor:pointer; transition:color var(--duration-fast); }
.tk-tabline-item:hover { color:var(--td-ink-900); }
.tk-tabline-item.is-active { color:var(--td-ink-900); }
.tk-tabline-item.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px; border-radius:2px; background:var(--td-teal-600); }

/* ============================ STAT TILES ============================ */
.tk-stat { display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--border-muted); border-radius:var(--radius-xl); padding:18px 20px; box-shadow:var(--shadow-xs); }
.tk-stat .cap { font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-muted); }
.tk-stat .val { font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1; letter-spacing:-0.02em; color:var(--td-ink-900); font-variant-numeric:tabular-nums; }
.tk-stat .sub { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-secondary); }
.tk-stat.is-brand { background:linear-gradient(160deg, var(--td-teal-600), var(--td-teal-700)); border-color:transparent; box-shadow:var(--shadow-md); }
.tk-stat.is-brand .cap { color:rgba(255,255,255,0.78); }
.tk-stat.is-brand .val, .tk-stat.is-brand .sub { color:#fff; }
.tk-delta { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; padding:2px 7px; border-radius:var(--radius-pill); }
.tk-delta.up   { color:var(--td-green-700); background:var(--td-green-100); }
.tk-delta.down { color:var(--td-red-700); background:var(--td-red-100); }

/* ============================ TOASTS / NOTIFICATIONS ============================ */
.tk-toast { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:#fff; border:1px solid var(--border-muted); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); max-width:420px; }
.tk-toast .ic { width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.tk-toast .ic svg { width:18px; height:18px; }
.tk-toast .tt { font-size:14px; font-weight:600; color:var(--td-ink-900); }
.tk-toast .ds { font-size:13px; color:var(--fg-secondary); margin-top:2px; }
.tk-toast.is-success .ic { background:var(--td-green-100); color:var(--td-green-700); }
.tk-toast.is-info .ic    { background:var(--td-blue-100); color:var(--td-blue-700); }
.tk-toast.is-warn .ic    { background:var(--td-amber-100); color:var(--td-amber-700); }
.tk-toast.is-error .ic   { background:var(--td-red-100); color:var(--td-red-700); }

/* Inline note (tonal banner) */
.tk-note { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-md); border:1px solid; font-size:14px; line-height:20px; }
.tk-note .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tk-note.is-success { background:var(--td-green-50); border-color:var(--td-green-200); color:var(--td-ink-900); } .tk-note.is-success .dot { background:var(--td-green-600); }
.tk-note.is-info    { background:var(--td-blue-50); border-color:var(--td-blue-300); color:var(--td-ink-900); }  .tk-note.is-info .dot { background:var(--td-blue-600); }
.tk-note.is-warn    { background:var(--td-amber-50); border-color:var(--td-amber-200); color:var(--td-ink-900); } .tk-note.is-warn .dot { background:var(--td-amber-600); }
.tk-note.is-error   { background:var(--td-red-50); border-color:var(--td-red-200); color:var(--td-ink-900); }   .tk-note.is-error .dot { background:var(--td-red-600); }

/* ============================ TABLE / ROWS ============================ */
.tk-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.tk-table thead th { text-align:left; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--fg-muted); padding:10px 14px; background:var(--td-gray-50); border-bottom:1px solid var(--border-muted); }
.tk-table thead th.num, .tk-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.tk-table td { padding:13px 14px; border-bottom:1px solid var(--border-muted); color:var(--td-ink-900); }
.tk-table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.tk-table tbody tr:hover { background:var(--td-teal-50); }
.tk-table tbody tr:last-child td { border-bottom:none; }

/* Mobile list row */
.tk-row { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid var(--border-muted); border-radius:var(--radius-lg); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.tk-row.is-tappable:active { transform:scale(0.99); }
.tk-row.is-tappable:hover  { box-shadow:var(--shadow-sm); }

/* ============================ BOTTOM NAV (mobile) ============================ */
.tk-bnav { display:flex; justify-content:space-around; align-items:center; background:#fff; border-top:1px solid var(--border-muted); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); }
.tk-bnav-item { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; padding:6px 0; border:none; background:none; cursor:pointer; color:var(--fg-muted); position:relative; transition:color var(--duration-fast) var(--ease-out); }
.tk-bnav-item svg { width:24px; height:24px; transition: transform var(--duration-med) var(--ease-spring); }
.tk-bnav-item .lbl { font-size:11px; font-weight:600; }
.tk-bnav-item.is-active { color:var(--td-teal-600); }
.tk-bnav-item.is-active svg { transform:translateY(-1px) scale(1.08); }
.tk-bnav-item.is-active::before { content:""; position:absolute; top:0; width:22px; height:3px; border-radius:3px; background:var(--td-teal-600); }

/* ============================ HELPERS ============================ */
.tk-avatar { width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:15px; color:#fff; background:var(--td-teal-600); }
.tk-icbtn { width:36px; height:36px; border-radius:var(--radius-md); border:1px solid var(--border-muted); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-secondary); cursor:pointer; transition: all var(--duration-fast) var(--ease-out); }
.tk-icbtn:hover { color:var(--td-teal-700); border-color:var(--td-teal-400); background:var(--td-teal-50); }
.tk-icbtn svg { width:18px; height:18px; }