/******************************************************************************/
/* Buttons                                                                    */
/******************************************************************************/

/* Base button — brand background by default */
button {
  margin-top: 5px;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid var(--brand);
  border-radius: 4px;
  background: var(--brand);   /* brand background */
  color: #fff;                /* white text */
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
button:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

button:focus,
button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Primary buttons (global + toolbar) — keep old outline design */
button.primary,
.toolbar button.primary {
  background: #fff;                /* white background */
  color: var(--brand);             /* brand text */
  border: 1.5px solid var(--brand);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
}
button.primary:hover,
.toolbar button.primary:hover {
  background: var(--brand);        /* fill on hover */
  color: #fff;
  border-color: var(--brand-dark);
}

/* Danger button */
button.danger {
  background: #d9534f;
  color: #fff;
  border: 1px solid #d9534f;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}
button.danger:hover {
  background: #c9302c;
  border-color: #c9302c;
}
button.danger:disabled,
button.danger[aria-disabled="true"] {
  background: #d1d5db;
  color: #6b7280;
  border-color: #d1d5db;
  cursor: not-allowed;
}
button.danger:disabled:hover,
button.danger[aria-disabled="true"]:hover {
  background: #d1d5db;
  color: #6b7280;
  border-color: #d1d5db;
}

/* Insert button (Word UI) */
.insert-btn {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}
.insert-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Dropdown buttons & clear buttons — follow base style */
.dropdown-content button,
button.clear {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dropdown-content button:hover,
button.clear:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

button:disabled.clear,
button.clear[aria-disabled="true"],
#excelClearFilters:disabled,
#excelClearFilters[aria-disabled="true"],
#wordClearFilters:disabled,
#wordClearFilters[aria-disabled="true"],
#powerpointClearFilters:disabled,
#powerpointClearFilters[aria-disabled="true"] {
  background: #d1d5db;
  color: #6b7280;
  border-color: #d1d5db;
  cursor: not-allowed;
}

button:disabled.clear:hover,
button.clear[aria-disabled="true"]:hover,
#excelClearFilters:disabled:hover,
#excelClearFilters[aria-disabled="true"]:hover,
#wordClearFilters:disabled:hover,
#wordClearFilters[aria-disabled="true"]:hover,
#powerpointClearFilters:disabled:hover,
#powerpointClearFilters[aria-disabled="true"]:hover {
  background: #d1d5db;
  color: #6b7280;
  border-color: #d1d5db;
}

/* Outline variant (optional helper) */
.btn-outline-green {
  background: #fff;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-outline-green:hover {
  background: var(--brand-dark);
  border: 2px solid var(--brand-dark);
  color: #fff;
}

@media (hover: none) {
  button:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
  }

  button.primary:hover,
  .toolbar button.primary:hover {
    background: #fff;
    color: var(--brand);
    border-color: var(--brand);
  }

  button.danger:hover {
    background: #d9534f;
    border-color: #d9534f;
    color: #fff;
  }

  .insert-btn:hover {
    background: var(--brand);
    border-color: var(--brand);
  }

  .dropdown-content button:hover,
  button.clear:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
  }

  .btn-outline-green:hover {
    background: #fff;
    border: 1.5px solid var(--brand);
    color: var(--brand);
  }
}