/* Custom fixes for OasisUI */

/* Fix collapse button - add chevron icon using CSS */
.collapsebtn:empty::before {
  content: "\f078"; /* Font Awesome chevron-down */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
}

.collapsebtn.collapsed:empty::before {
  content: "\f054"; /* Font Awesome chevron-right */
}

/* Alternative using Unicode if Font Awesome not available */
.collapsebtn:empty::after {
  content: "▼";
  display: inline-block;
  transition: transform 0.3s ease;
}

.collapsebtn.collapsed:empty::after {
  transform: rotate(-90deg);
}

/* Add spacing between workflow step buttons */
.btn-group-container-sw .btn.radiobtn {
  margin-right: 8px !important;
}

.btn-group-container-sw .btn.radiobtn:last-child {
  margin-right: 0 !important;
}

/* Alternative approach using gap for flex containers */
.btn-group-container-sw.d-flex {
  gap: 8px !important;
}

/* Ensure the buttons still take equal width */
.btn-group-container-sw .flex-fill {
  flex: 1 1 0 !important;
}

/* Style improvements for the workflow buttons */
.btn-group-container-sw .btn.radiobtn {
  border-radius: 8px !important;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

/* Fix glyphicon icons to use Font Awesome equivalents */
.glyphicon-triangle-right::before {
  content: "\f0da" !important; /* Font Awesome caret-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

/* Collapse button styling improvements */
.collapsebtn {
  background: transparent;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.collapsebtn:hover {
  opacity: 0.7;
}

/* Card Header Improvements */
.card-header {
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
}

.card-header .row {
  width: 100% !important;
  margin: 0 !important;
  align-items: center !important;
}

.card-header h4 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #2E86AB !important;
}

.card-header h4 span {
  flex-grow: 1 !important;
  padding-right: 15px !important;
}

/* Button group in header */
.card-header h4 button {
  margin-left: 8px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
}

.card-header h4 button:first-of-type {
  margin-left: auto !important;  /* Push first button to the right */
}

/* Fix float right buttons alignment */
.card-header button[style*="float: right"],
.card-header button[style*="float:right"] {
  float: none !important;
  order: 10 !important;
  margin-left: auto !important;  /* Ensure right alignment in flexbox */
}

/* Special handling for refresh button */
.card-header h4 button[id*="abuttonprgtblrfsh"] {
  margin-left: auto !important;
  margin-right: 8px !important;
}

/* Add spacing between card sections */
.card.border-default {
  margin-bottom: 24px !important;
}

/* Ensure proper spacing in main content area */
.card + .card {
  margin-top: 24px !important;
}

/* Improve card body spacing */
.card-body {
  padding: 20px !important;
}

/* Fix button alignment within card headers */
.card-header .btn-group {
  display: flex !important;
  gap: 8px !important;
}

/* Better responsive behavior for card headers */
@media (max-width: 768px) {
  .card-header h4 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .card-header h4 span {
    margin-bottom: 8px !important;
    padding-right: 0 !important;
  }
}

/* Font Awesome Spinner Animation */
.fa-spinner {
  animation: fa-spin 2s infinite linear !important;
}

/* Alternative spinner classes */
.fa-spin {
  animation: fa-spin 2s infinite linear !important;
}

/* Keyframe for Font Awesome spinner rotation */
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

/* For older Font Awesome versions that use different class names */
.fa-spinner,
.fas.fa-spinner,
.far.fa-spinner {
  animation: fa-spin 2s infinite linear !important;
}

/* Custom spinner styles for better visibility */
.status-spinner {
  color: #20B2AA !important; /* Renew Risk teal */
  font-size: 1.1em !important;
  animation: fa-spin 1.5s infinite linear !important;
}

/* Ensure spinners work in table cells */
td .fa-spinner,
td .fas.fa-spinner {
  animation: fa-spin 2s infinite linear !important;
  color: #20B2AA !important;
}