:root {
  --tf-icon-success: var(--erp-success);
  --tf-icon-pending: var(--erp-warning);
  --tf-icon-warning: var(--erp-warning);
  --tf-icon-danger: var(--erp-danger);
  --tf-icon-info: var(--erp-info);
  --tf-icon-muted: var(--erp-text-muted);
}

.tf-icon { display: inline-block; flex: 0 0 auto; vertical-align: -0.15em; }
.tf-icon--xs { width: 14px; height: 14px; }
.tf-icon--sm { width: 16px; height: 16px; }
.tf-icon--md { width: 20px; height: 20px; }
.tf-icon--lg { width: 24px; height: 24px; }
.tf-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.tf-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); color: var(--erp-text); background: var(--erp-surface); cursor: pointer; }
.tf-icon-button--sm { width: var(--erp-control-height-sm); height: var(--erp-control-height-sm); }
.tf-icon-button--md { width: var(--erp-control-height-md); height: var(--erp-control-height-md); }
.tf-icon-button--lg { width: var(--erp-control-height-lg); height: var(--erp-control-height-lg); }
.tf-icon-button--primary { border-color: var(--erp-primary); color: #fff; background: var(--erp-primary); }
.tf-icon-button--danger { border-color: color-mix(in srgb, var(--erp-danger) 35%, var(--erp-surface)); color: var(--tf-icon-danger); background: color-mix(in srgb, var(--erp-danger) 6%, var(--erp-surface)); }
.tf-icon-button:hover:not(:disabled) { border-color: var(--erp-border-strong); background: var(--erp-surface-subtle); }
.tf-icon-button--primary:hover:not(:disabled) { border-color: var(--erp-primary-hover); color: #fff; background: var(--erp-primary-hover); }
.tf-icon-button--danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--erp-danger) 52%, var(--erp-surface)); background: color-mix(in srgb, var(--erp-danger) 11%, var(--erp-surface)); }
.tf-icon-button:focus-visible, .tf-action-button:focus-visible, .tf-more-menu button:focus-visible { outline: none; box-shadow: var(--erp-shadow-focus); }
.tf-icon-button:disabled, .tf-action-button:disabled { cursor: not-allowed; opacity: .52; }

.tf-action-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--erp-control-height-md); padding: 8px 13px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-md); color: var(--erp-text); background: var(--erp-surface); font-weight: var(--erp-font-weight-semibold); cursor: pointer; }
.tf-action-button--primary { border-color: var(--erp-primary); color: #fff; background: var(--erp-primary); }
.tf-action-button--primary:hover:not(:disabled) { border-color: var(--erp-primary-hover); background: var(--erp-primary-hover); }
.tf-action-button--danger { border-color: color-mix(in srgb, var(--erp-danger) 35%, var(--erp-surface)); color: var(--tf-icon-danger); background: color-mix(in srgb, var(--erp-danger) 6%, var(--erp-surface)); }
.tf-action-button--danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--erp-danger) 52%, var(--erp-surface)); background: color-mix(in srgb, var(--erp-danger) 11%, var(--erp-surface)); }
.tf-action-button--secondary:hover:not(:disabled) { background: var(--erp-surface-subtle); }

.tf-status-icon { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--tf-icon-muted); }
.tf-status-icon--success, .tf-status-icon--reconciled, .tf-status-icon--paid, .tf-status-icon--received { color: var(--tf-icon-success); }
.tf-status-icon--pending, .tf-status-icon--warning, .tf-status-icon--difference, .tf-status-icon--unpaid, .tf-status-icon--allowance, .tf-status-icon--ng { color: var(--tf-icon-warning); }
.tf-status-icon--error { color: var(--tf-icon-danger); }
.tf-status-icon--info { color: var(--tf-icon-info); }
.tf-status-icon--unreconciled, .tf-status-icon--return { color: var(--tf-icon-muted); }

.tf-tooltip { position: fixed; z-index: var(--erp-z-tooltip); max-width: 240px; padding: 6px 8px; border-radius: var(--erp-radius-sm); color: #fff; background: #1f2d33; box-shadow: var(--erp-shadow-sm); font-size: 13px; line-height: 1.35; pointer-events: none; }
.tf-tooltip[hidden] { display: none; }

.tf-more { display: inline-flex; }
.tf-more-menu { position: fixed; z-index: var(--erp-z-dropdown); display: grid; min-width: 190px; padding: 6px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-md); background: var(--erp-surface); box-shadow: var(--erp-shadow-md); }
.tf-more-menu[hidden] { display: none; }
.tf-more-menu button { display: flex; align-items: center; gap: 8px; min-height: var(--erp-control-height-md); padding: 8px 10px; border: 0; border-radius: var(--erp-radius-sm); color: var(--erp-text); text-align: left; background: transparent; }
.tf-more-menu button:hover { color: var(--erp-primary-active); background: var(--erp-surface-subtle); }
.tf-more-menu .tf-more-menu-item--danger { color: var(--tf-icon-danger); }
.tf-more-menu .tf-more-menu-item--danger:hover { color: var(--erp-danger); background: color-mix(in srgb, var(--erp-danger) 8%, var(--erp-surface)); }

@media (max-width: 640px) {
  .tf-icon-button--sm, .tf-icon-button--md { width: 44px; height: 44px; }
  .tf-icon-button--lg { width: var(--erp-control-height-lg); height: var(--erp-control-height-lg); }
  .tf-action-button { min-height: 44px; }
  .tf-more-menu { inset: auto 8px 8px !important; width: auto; max-height: min(60vh, 420px); overflow-y: auto; padding: 10px; border-radius: 14px; box-shadow: 0 -10px 32px rgba(22, 43, 49, .22); }
  .tf-more-menu button { min-height: 46px; }
}

@media print {
  .tf-tooltip, .tf-more-menu { display: none !important; }
}