/* ═══════════════════════════════════════════════════════════════
   AppButton — Syncfusion .e-btn override
   
   This file MUST load AFTER Syncfusion's theme CSS in App.razor.
   Syncfusion's bootstrap5.3-dark.css uses selectors like
   .e-control.e-btn.e-lib (specificity 0,3,0). Our selectors use
   .e-control.e-btn.e-lib[data-variant] (specificity 0,4,0) AND
   load after theirs, guaranteeing our styles win via both
   specificity and cascade order. No !important needed.
   
   Browser support: CSS attribute selectors have 96%+ global
   support (CSS2.1, supported since IE7/Chrome 4/FF2/Safari 3).
   
   See: https://caniuse.com/mdn-css_selectors_attribute
   See: https://blazor.syncfusion.com/documentation/button/style-and-appearance
   ═══════════════════════════════════════════════════════════════ */

/* --- Primary: Sky gradient with glow --- */
.e-control.e-btn.e-lib[data-variant="primary"] {
  background: linear-gradient(to bottom, rgb(56 189 248), rgb(14 165 233));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 6px -1px rgb(14 165 233 / 0.25);
}
.e-control.e-btn.e-lib[data-variant="primary"]:hover {
  background: linear-gradient(to bottom, rgb(125 211 252), rgb(56 189 248));
  box-shadow: 0 10px 15px -3px rgb(14 165 233 / 0.3);
}
.e-control.e-btn.e-lib[data-variant="primary"]:active {
  background: linear-gradient(to bottom, rgb(14 165 233), rgb(2 132 199));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* --- Secondary: Visible border on dark background --- */
.e-control.e-btn.e-lib[data-variant="secondary"] {
  background: rgb(30 41 59);
  color: rgb(226 232 240);
  border: 1px solid rgb(71 85 105);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.e-control.e-btn.e-lib[data-variant="secondary"]:hover {
  background: rgb(51 65 85);
  border-color: rgb(100 116 139);
  color: white;
}
.e-control.e-btn.e-lib[data-variant="secondary"]:active {
  background: rgb(30 41 59);
  box-shadow: none;
}

/* --- Tertiary: Ghost style --- */
.e-control.e-btn.e-lib[data-variant="tertiary"] {
  background: transparent;
  color: rgb(148 163 184);
  border-color: transparent;
  box-shadow: none;
}
.e-control.e-btn.e-lib[data-variant="tertiary"]:hover {
  background: rgb(255 255 255 / 0.1);
  color: white;
}
.e-control.e-btn.e-lib[data-variant="tertiary"]:active {
  background: rgb(255 255 255 / 0.15);
}

/* --- Danger: Red gradient with glow --- */
.e-control.e-btn.e-lib[data-variant="danger"] {
  background: linear-gradient(to bottom, rgb(239 68 68), rgb(220 38 38));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 6px -1px rgb(239 68 68 / 0.25);
}
.e-control.e-btn.e-lib[data-variant="danger"]:hover {
  background: linear-gradient(to bottom, rgb(248 113 113), rgb(239 68 68));
  box-shadow: 0 10px 15px -3px rgb(239 68 68 / 0.3);
}
.e-control.e-btn.e-lib[data-variant="danger"]:active {
  background: linear-gradient(to bottom, rgb(220 38 38), rgb(185 28 28));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* --- Success: Emerald gradient with glow --- */
.e-control.e-btn.e-lib[data-variant="success"] {
  background: linear-gradient(to bottom, rgb(16 185 129), rgb(5 150 105));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 6px -1px rgb(16 185 129 / 0.25);
}
.e-control.e-btn.e-lib[data-variant="success"]:hover {
  background: linear-gradient(to bottom, rgb(52 211 153), rgb(16 185 129));
  box-shadow: 0 10px 15px -3px rgb(16 185 129 / 0.3);
}
.e-control.e-btn.e-lib[data-variant="success"]:active {
  background: linear-gradient(to bottom, rgb(5 150 105), rgb(4 120 87));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* --- Outline: Sky-tinted border --- */
.e-control.e-btn.e-lib[data-variant="outline"] {
  background: transparent;
  color: rgb(56 189 248);
  border: 1px solid rgb(14 165 233 / 0.4);
  box-shadow: none;
}
.e-control.e-btn.e-lib[data-variant="outline"]:hover {
  background: rgb(14 165 233 / 0.1);
  border-color: rgb(56 189 248 / 0.6);
  color: rgb(125 211 252);
}
.e-control.e-btn.e-lib[data-variant="outline"]:active {
  background: rgb(14 165 233 / 0.2);
}

/* --- Disabled state for all variants --- */
.e-control.e-btn.e-lib[data-variant]:disabled,
.e-control.e-btn.e-lib[data-variant].e-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}