/* ═══════════════════════════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════════════════════════
   Editor Ribbon — Full dark theme
   Forces the entire Syncfusion ribbon to use our dark palette
   (slate-800/900) instead of the default white/light backgrounds.
   ═══════════════════════════════════════════════════════════════ */

/* --- Root ribbon container & all background surfaces --- */
.e-ribbon,
.e-ribbon .e-ribbon-overall,
.e-ribbon .e-tab,
.e-ribbon .e-tab .e-content,
.e-ribbon .e-tab .e-content .e-item,
.e-ribbon .e-toolbar,
.e-ribbon .e-toolbar .e-toolbar-items,
.e-ribbon .e-toolbar-pop {
  background: rgb(15 23 42) !important;
  border-color: rgb(51 65 85) !important;
}

/* --- Tab header bar --- */
.e-ribbon .e-tab .e-tab-header,
.e-ribbon .e-tab .e-tab-header .e-toolbar-items {
  background: rgb(15 23 42) !important;
  border-bottom: 1px solid rgb(51 65 85) !important;
}

/* Tab items (inactive) — !important needed to beat dynamically-loaded light theme */
.e-ribbon .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
  color: rgb(148 163 184) !important;
}

/* Tab items (hover) */
.e-ribbon .e-tab .e-tab-header .e-toolbar-item:hover .e-tab-text {
  color: rgb(226 232 240) !important;
}

.e-ribbon .e-tab .e-tab-header .e-toolbar-item:hover {
  background: rgb(30 41 59) !important;
}

/* Tab items (active) */
.e-ribbon .e-tab .e-tab-header .e-toolbar-item.e-active {
  background: rgb(30 41 59) !important;
  border-color: rgb(51 65 85) !important;
}

.e-ribbon .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
  color: rgb(255 255 255) !important;
}

/* Active tab indicator */
.e-ribbon .e-tab .e-tab-header .e-indicator {
  background: rgb(56 189 248) !important;
}

/* --- Ribbon group containers & separators --- */
.e-ribbon .e-ribbon-group,
.e-ribbon .e-ribbon-group-container {
  background: transparent !important;
  border-color: rgb(51 65 85) !important;
}

.e-ribbon .e-ribbon-group-separator {
  border-color: rgb(51 65 85) !important;
}

/* Ribbon group header text */
.e-ribbon .e-ribbon-group-header,
.e-ribbon .e-ribbon-group .e-ribbon-group-header {
  color: rgb(100 116 139) !important;
  font-weight: 500;
}

/* --- Toolbar buttons (text + icons) — !important to beat light theme --- */
.e-ribbon .e-tbar-btn .e-tbar-btn-text,
.e-ribbon .e-tbar-btn .e-btn-icon {
  color: rgb(203 213 225) !important;
}

.e-ribbon .e-tbar-btn:hover .e-tbar-btn-text,
.e-ribbon .e-tbar-btn:hover .e-btn-icon {
  color: rgb(255 255 255) !important;
}

.e-ribbon .e-tbar-btn:hover {
  background: rgb(51 65 85) !important;
  border-radius: 4px;
}

.e-ribbon .e-tbar-btn:active {
  background: rgb(30 41 59) !important;
}

.e-ribbon .e-tbar-btn.e-active {
  background: rgb(30 41 59) !important;
  border-radius: 4px;
  outline: 1px solid rgb(96 165 250) !important;
  outline-offset: -1px;
}

.e-ribbon .e-tbar-btn.e-active .e-btn-icon,
.e-ribbon .e-tbar-btn.e-active .e-tbar-btn-text {
  color: rgb(96 165 250) !important;
}

/* --- Flat mode buttons (Edit/Simulate/Live toggle) --- */
.e-ribbon .e-btn.e-flat,
.e-ribbon .e-btn.e-small.e-flat {
  color: rgb(203 213 225) !important;
  border: 1px solid rgb(71 85 105) !important;
  background: rgb(30 41 59) !important;
}

.e-ribbon .e-btn.e-flat:hover,
.e-ribbon .e-btn.e-small.e-flat:hover {
  color: rgb(255 255 255) !important;
  background: rgb(51 65 85) !important;
  border-color: rgb(100 116 139) !important;
}

/* --- Primary buttons (active mode toggle) --- */
.e-ribbon .e-btn.e-primary.e-small {
  color: rgb(255 255 255) !important;
  background: rgb(14 165 233) !important;
  border-color: rgb(14 165 233) !important;
}

/* --- Small buttons (grid expand/shrink) --- */
.e-ribbon .e-btn.e-small {
  color: rgb(203 213 225) !important;
  border: 1px solid rgb(71 85 105) !important;
  background: rgb(30 41 59) !important;
}

.e-ribbon .e-btn.e-small:hover {
  color: rgb(255 255 255) !important;
  background: rgb(51 65 85) !important;
  border-color: rgb(100 116 139) !important;
}

/* --- Zoom dropdown --- */
.e-ribbon select.e-control,
.e-ribbon select.e-dropdownlist {
  color: rgb(226 232 240) !important;
  background: rgb(30 41 59) !important;
  border: 1px solid rgb(71 85 105) !important;
  border-radius: 4px;
}

.e-ribbon select.e-control:hover,
.e-ribbon select.e-dropdownlist:hover {
  border-color: rgb(100 116 139);
}

.e-ribbon select.e-control option,
.e-ribbon select.e-dropdownlist option {
  background: rgb(30 41 59) !important;
  color: rgb(226 232 240) !important;
}

/* --- Launcher icon --- */
.e-ribbon .e-ribbon-launcher-icon {
  color: rgb(100 116 139) !important;
}

.e-ribbon .e-ribbon-launcher-icon:hover {
  color: rgb(203 213 225) !important;
  background: rgb(51 65 85) !important;
}

/* --- Ribbon File/Backstage button --- */
.e-ribbon .e-ribbon-backstage-btn,
.e-ribbon .e-ribbon-backstage {
  background: rgb(30 41 59) !important;
  color: rgb(203 213 225) !important;
  border-color: rgb(51 65 85) !important;
}

.e-ribbon .e-ribbon-backstage-btn:hover {
  background: rgb(51 65 85) !important;
  color: rgb(255 255 255) !important;
}

/* --- Overflow group dropdown buttons (collapsed Grid/Status etc.) --- */
.e-ribbon .e-ribbon-group-overflow-ddb {
  background: rgb(30 41 59) !important;
  color: rgb(203 213 225) !important;
  border: 1px solid rgb(51 65 85) !important;
}

.e-ribbon .e-ribbon-group-overflow-ddb:hover {
  background: rgb(51 65 85) !important;
  color: rgb(255 255 255) !important;
  border-color: rgb(100 116 139) !important;
}

.e-ribbon .e-ribbon-group-overflow-ddb .e-btn-icon {
  color: rgb(148 163 184) !important;
}

/* --- Overflow popup (collapsed ribbon items) --- */
.e-ribbon .e-ribbon-overflow-popup,
.e-ribbon .e-toolbar-pop,
.e-ribbon .e-popup,
.e-ribbon-group-overflow-ddb-popup,
.e-popup.e-ribbon-overflow-popup {
  background: rgb(15 23 42) !important;
  border-color: rgb(51 65 85) !important;
  box-shadow: 0 4px 12px rgba(0 0 0 / 0.5) !important;
}

.e-ribbon-group-overflow-ddb-popup .e-ribbon-group-header {
  color: rgb(100 116 139) !important;
}

/* --- Collapse/expand toggle --- */
.e-ribbon .e-ribbon-collapse-btn {
  color: rgb(100 116 139) !important;
}

.e-ribbon .e-ribbon-collapse-btn:hover {
  color: rgb(203 213 225) !important;
  background: rgb(51 65 85) !important;
}

/* --- Remove any leftover white borders/shadows --- */
.e-ribbon,
.e-ribbon .e-tab,
.e-ribbon .e-toolbar {
  box-shadow: none !important;
  border-bottom-color: rgb(51 65 85) !important;
}