/**
 * FD Button Module — canonical `.fd-skin .fd-btn*` variant + interaction states
 * Load tier: T1 — after bootstrap.min.css, before fd-components.css (see fd-base-main.html)
 * Policy: bpi360-devkit/docs/fd-layout-structure/FD-BUTTON-POLICY.md
 * Tokens: --interactive-primary*, --bg-primary, --text-inverse, --status-*,
 *          --shadow-focus, --shadow-01/02, --radius-full, --hover-transition
 * Geometry (padding, icon-round size): fd-layout.css
 */

/* ========================================
   FD Button variants + interaction states (FD-BUTTON-POLICY #1–#5)
   ======================================== */

/* --- Default --- */
.fd-skin .fd-btn.fd-btn-primary {
  background-color: var(--interactive-primary);
  border-color: var(--interactive-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
}

.fd-skin .fd-btn.fd-btn-outline {
  background-color: var(--bg-primary);
  border-color: var(--interactive-primary);
  color: var(--interactive-primary);
  border-radius: var(--radius-full);
}

.fd-skin .fd-btn.fd-btn-outline.text-danger {
  border-color: var(--status-error);
  color: var(--status-error);
}

/* Anchor pseudo-states — prevent .fd-skin a link color bleed on <a class="fd-btn"> */
.fd-skin a.fd-btn.fd-btn-primary,
.fd-skin a.fd-btn.fd-btn-primary:visited,
.fd-skin a.fd-btn.fd-btn-primary:focus {
  color: var(--text-inverse);
}

.fd-skin a.fd-btn.fd-btn-outline,
.fd-skin a.fd-btn.fd-btn-outline:visited,
.fd-skin a.fd-btn.fd-btn-outline:focus {
  color: var(--interactive-primary);
}

.fd-skin a.fd-btn.fd-btn-outline.text-danger,
.fd-skin a.fd-btn.fd-btn-outline.text-danger:visited,
.fd-skin a.fd-btn.fd-btn-outline.text-danger:focus {
  color: var(--status-error);
}

/* Labeled buttons: icon/label inherit button color (not semantic icon-round colors) */
.fd-skin .fd-btn.fd-btn-primary i,
.fd-skin .fd-btn.fd-btn-primary span,
.fd-skin a.fd-btn.fd-btn-primary i,
.fd-skin a.fd-btn.fd-btn-primary span,
.fd-skin .fd-btn.fd-btn-outline:not(.fd-btn-icon-round) i,
.fd-skin .fd-btn.fd-btn-outline:not(.fd-btn-icon-round) span,
.fd-skin a.fd-btn.fd-btn-outline:not(.fd-btn-icon-round) i,
.fd-skin a.fd-btn.fd-btn-outline:not(.fd-btn-icon-round) span {
  color: inherit;
}

/* --- Hover (lift + shadow; disabled excluded) --- */
/* Primary hover → same look as secondary default (outline pill) */
.fd-skin .fd-btn.fd-btn-primary:hover:not(:disabled):not([disabled]),
.fd-skin a.fd-btn.fd-btn-primary:hover,
.fd-skin a.fd-btn.fd-btn-primary:hover:visited,
.fd-skin a.fd-btn.fd-btn-primary:hover:focus {
  background-color: var(--bg-primary);
  border-color: var(--interactive-primary);
  color: var(--interactive-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-02);
}

/* Secondary hover → fill primary; label + icon white */
.fd-skin .fd-btn.fd-btn-outline:hover:not(:disabled):not([disabled]),
.fd-skin a.fd-btn.fd-btn-outline:hover,
.fd-skin a.fd-btn.fd-btn-outline:hover:visited,
.fd-skin a.fd-btn.fd-btn-outline:hover:focus {
  background-color: var(--interactive-primary);
  border-color: var(--interactive-primary);
  color: var(--text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-02);
}

.fd-skin .fd-btn.fd-btn-outline:not(.fd-btn-icon-round):hover:not(:disabled):not([disabled]) i,
.fd-skin .fd-btn.fd-btn-outline:not(.fd-btn-icon-round):hover:not(:disabled):not([disabled]) span,
.fd-skin a.fd-btn.fd-btn-outline:not(.fd-btn-icon-round):hover i,
.fd-skin a.fd-btn.fd-btn-outline:not(.fd-btn-icon-round):hover span {
  color: var(--text-inverse);
}

/* Icon tool (#4) — default-state semantic icon colors via data-fd-action (BTN-021) */
.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="filter"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="filter"] i {
  color: var(--status-warning);
}

.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="delete"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="delete"] i {
  color: var(--status-error);
}

.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="export"] i,
.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="refresh"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="export"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="refresh"] i {
  color: var(--interactive-primary);
}

.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="print"] i,
.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="columns"] i,
.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="menu"] i,
.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="view-toggle"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="print"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="columns"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="menu"] i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:not(:hover):not([aria-expanded="true"]):not(:disabled):not([disabled])[data-fd-action="view-toggle"] i {
  color: var(--text-secondary);
}

/* Primary icon-round exception — send reminders (#sendRemindersBtn; not #4, no data-fd-action yet) */
.fd-skin #sendRemindersBtn.fd-btn.fd-btn-primary.fd-btn-icon-round:not(:hover):not(:disabled):not([disabled]) i {
  color: var(--status-warning);
}

/* Icon tool (#4): white icon on hover / open dropdown (semantic defaults use :not(:hover):not([aria-expanded])) */
.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round:hover:not(:disabled):not([disabled]) i,
.fd-skin .fd-btn.fd-btn-outline.fd-btn-icon-round[aria-expanded="true"]:not(:disabled):not([disabled]) i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round:hover i,
.fd-skin a.fd-btn.fd-btn-outline.fd-btn-icon-round[aria-expanded="true"] i {
  color: var(--text-inverse);
}

.fd-skin .fd-btn.fd-btn-outline.text-danger:hover:not(:disabled):not([disabled]),
.fd-skin a.fd-btn.fd-btn-outline.text-danger:hover,
.fd-skin a.fd-btn.fd-btn-outline.text-danger:hover:visited,
.fd-skin a.fd-btn.fd-btn-outline.text-danger:hover:focus {
  background-color: var(--status-error);
  border-color: var(--status-error);
  color: var(--text-inverse);
}

.fd-skin .fd-btn.fd-btn-outline.text-danger:hover:not(:disabled):not([disabled]) i,
.fd-skin .fd-btn.fd-btn-outline.text-danger:hover:not(:disabled):not([disabled]) span,
.fd-skin a.fd-btn.fd-btn-outline.text-danger:hover i,
.fd-skin a.fd-btn.fd-btn-outline.text-danger:hover span {
  color: var(--text-inverse);
}

/* --- Active / pressed --- */
.fd-skin .fd-btn.fd-btn-primary:active:not(:disabled):not([disabled]),
.fd-skin .fd-btn.fd-btn-outline:active:not(:disabled):not([disabled]),
.fd-skin a.fd-btn.fd-btn-primary:active,
.fd-skin a.fd-btn.fd-btn-outline:active {
  transform: translateY(0);
  box-shadow: var(--shadow-01);
}

/* --- Focus (Pulse soft ring — not hard outline) --- */
.fd-skin .fd-btn:focus {
  outline: none;
}

.fd-skin .fd-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.fd-skin .fd-btn.fd-btn-primary:hover:focus-visible:not(:disabled):not([disabled]),
.fd-skin .fd-btn.fd-btn-outline:hover:focus-visible:not(:disabled):not([disabled]),
.fd-skin a.fd-btn.fd-btn-primary:hover:focus-visible,
.fd-skin a.fd-btn.fd-btn-outline:hover:focus-visible {
  box-shadow: var(--shadow-02), var(--shadow-focus);
}

/* --- Disabled --- */
.fd-skin .fd-btn:disabled,
.fd-skin .fd-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .fd-skin .fd-btn.fd-btn-primary:hover:not(:disabled):not([disabled]),
  .fd-skin .fd-btn.fd-btn-outline:hover:not(:disabled):not([disabled]),
  .fd-skin a.fd-btn.fd-btn-primary:hover,
  .fd-skin a.fd-btn.fd-btn-outline:hover {
    transform: none;
  }
}
