/*
 * DarenFlow final button normalization.
 *
 * Load this stylesheet after page-specific CSS. It only normalizes
 * button-like controls; navigation, switches, badges, and data pills
 * keep their own component styles.
 */

:root {
  --df-btn-primary-bg: #2563eb;
  --df-btn-primary-bg-hover: #1d4ed8;
  --df-btn-primary-border: #2563eb;
  --df-btn-primary-text: #ffffff;
  --df-btn-secondary-bg: #ffffff;
  --df-btn-secondary-bg-hover: #f8fafc;
  --df-btn-secondary-border: #cbd5e1;
  --df-btn-secondary-text: #334155;
  --df-btn-danger-bg: #dc2626;
  --df-btn-danger-bg-hover: #b91c1c;
  --df-btn-danger-border: #dc2626;
  --df-btn-danger-text: #ffffff;
  --df-btn-muted-bg: #f1f5f9;
  --df-btn-muted-text: #64748b;
  --df-btn-shadow: 0 8px 20px rgba(37, 99, 235, 0.16);
  --df-btn-secondary-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  --df-btn-danger-shadow: 0 8px 20px rgba(220, 38, 38, 0.16);
}

html body :where(
  a.btn,
  a.secondary,
  summary.secondary,
  .primary-action,
  .primary-mini,
  .df-action-pill,
  .df-dialog-btn,
  .feedback-upload-button,
  .df-status-modal-cancel,
  .df-status-modal-confirm,
  .df-v0464-token-modal-btn,
  .df-v0464-token-copy-btn
) {
  display: inline-flex !important;
}

html body :where(
  a.btn,
  a.secondary,
  button:not(.brand):not(.df-brand-toggle):not(.df-nav-mobile-back):not(.df-status-modal-close):not(.df-user-page-notice-close),
  input[type="submit"],
  input[type="button"],
  summary.secondary,
  .primary-action,
  .primary-mini,
  .df-action-pill,
  .df-dialog-btn,
  .feedback-upload-button,
  .df-status-modal-cancel,
  .df-status-modal-confirm,
  .df-v0464-token-modal-btn,
  .df-v0464-token-copy-btn
) {
  appearance: none;
  -webkit-appearance: none;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  min-height: 38px;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--df-btn-primary-border) !important;
  border-radius: 999px !important;
  padding: 0 16px;
  background: var(--df-btn-primary-bg) !important;
  color: var(--df-btn-primary-text) !important;
  box-shadow: var(--df-btn-shadow) !important;
  font: inherit;
  font-size: 14px;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease, filter .15s ease;
}

html body :where(
  button.secondary,
  button.glass-btn,
  a.btn.secondary,
  a.secondary,
  summary.secondary,
  .btn.secondary,
  .btn.ghost,
  .glass-btn,
  .df-dialog-btn.secondary,
  .df-status-modal-cancel,
  .feedback-upload-button,
  .df-v0464-token-modal-btn.cancel
) {
  border-color: var(--df-btn-secondary-border) !important;
  background: var(--df-btn-secondary-bg) !important;
  color: var(--df-btn-secondary-text) !important;
  box-shadow: var(--df-btn-secondary-shadow) !important;
}

html body :where(
  button.danger,
  button.danger-btn,
  button.danger-mini,
  button.token-danger-btn-v0424,
  a.btn.danger,
  a.btn.danger-btn,
  .btn.danger,
  .btn.danger-btn,
  .danger-btn,
  .danger-mini,
  .df-dialog-btn.danger,
  .df-v0464-token-modal-btn.danger
) {
  border-color: var(--df-btn-danger-border) !important;
  background: var(--df-btn-danger-bg) !important;
  color: var(--df-btn-danger-text) !important;
  box-shadow: var(--df-btn-danger-shadow) !important;
}

html body :where(a.btn.dark, .btn.dark) {
  border-color: #0f172a !important;
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16) !important;
}

html body :where(
  .btn.secondary.active,
  .followup-task-toolbar .btn.active,
  .df-users-title-actions-v0424 a.active
) {
  border-color: #93c5fd !important;
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.10) !important;
}

html body :where(
  .copy-btn,
  .df-v0464-token-copy-btn,
  .feedback-attachment-chip button
) {
  min-height: 28px;
  padding: 0 10px;
  border-color: var(--df-btn-secondary-border) !important;
  background: var(--df-btn-secondary-bg) !important;
  color: #0f172a !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 800;
}

html body :where(.primary-mini, .danger-mini, .btn.small, button.small, a.btn.small) {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

html body :where(.df-dialog-btn, .df-status-modal-cancel, .df-status-modal-confirm) {
  min-width: 88px;
}

html body :where(.login-form button[type="submit"]) {
  width: 100%;
  min-height: 44px;
}

html body :where(
  a.btn,
  a.secondary,
  button:not(.brand):not(.df-brand-toggle):not(.df-nav-mobile-back):not(.df-status-modal-close):not(.df-user-page-notice-close),
  input[type="submit"],
  input[type="button"],
  summary.secondary,
  .primary-action,
  .primary-mini,
  .df-action-pill,
  .df-dialog-btn,
  .feedback-upload-button,
  .df-status-modal-cancel,
  .df-status-modal-confirm,
  .df-v0464-token-modal-btn,
  .df-v0464-token-copy-btn
):hover:not(:disabled):not(.is-disabled) {
  transform: translateY(-1px);
  filter: saturate(1.03);
}

html body :where(
  button:not(.brand):not(.df-brand-toggle):not(.df-nav-mobile-back):not(.df-status-modal-close):not(.df-user-page-notice-close),
  a.btn,
  a.secondary,
  input[type="submit"],
  input[type="button"],
  summary.secondary,
  .primary-action,
  .primary-mini,
  .df-action-pill,
  .df-dialog-btn,
  .feedback-upload-button,
  .df-status-modal-cancel,
  .df-status-modal-confirm,
  .df-v0464-token-modal-btn,
  .df-v0464-token-copy-btn
):active:not(:disabled):not(.is-disabled) {
  transform: translateY(0);
  filter: saturate(0.98);
}

html body :where(
  button:not(.brand):not(.df-brand-toggle):not(.df-nav-mobile-back):not(.df-status-modal-close):not(.df-user-page-notice-close),
  a.btn,
  a.secondary,
  input[type="submit"],
  input[type="button"],
  summary.secondary,
  .primary-action,
  .primary-mini,
  .df-action-pill,
  .df-dialog-btn,
  .feedback-upload-button,
  .df-status-modal-cancel,
  .df-status-modal-confirm,
  .df-v0464-token-modal-btn,
  .df-v0464-token-copy-btn
):focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

html body :where(button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, .btn.is-disabled, a.btn[aria-disabled="true"]) {
  border-color: #d9e2ef !important;
  background: var(--df-btn-muted-bg) !important;
  color: var(--df-btn-muted-text) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  filter: none;
}

html body :where(.df-status-modal-close, .df-user-page-notice-close) {
  transform: none !important;
  filter: none !important;
}

@media (max-width: 640px) {
  html body :where(
    a.btn,
    a.secondary,
    button:not(.brand):not(.df-brand-toggle):not(.df-nav-mobile-back):not(.df-status-modal-close):not(.df-user-page-notice-close),
    input[type="submit"],
    input[type="button"],
    summary.secondary,
    .primary-action,
    .primary-mini,
    .df-action-pill,
    .df-dialog-btn,
    .feedback-upload-button,
    .df-status-modal-cancel,
    .df-status-modal-confirm,
    .df-v0464-token-modal-btn,
    .df-v0464-token-copy-btn
  ) {
    min-height: 36px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13px;
  }

  html body :where(.copy-btn, .df-v0464-token-copy-btn, .feedback-attachment-chip button) {
    min-height: 28px;
    padding-left: 9px;
    padding-right: 9px;
    font-size: 12px;
  }
}