/**
 * UI Components
 *
 * Custom styling for ChurchCRM UI components that extend AdminLTE and Bootstrap.
 * Only includes styles that are not available in the base frameworks.
 */

// Enhanced btn-app buttons for dashboard actions
.btn-app {
  // AdminLTE provides base .btn-app styling, we only override what's needed
  min-width: 100px;
  min-height: 110px;
  height: auto;
  white-space: normal;
  word-wrap: break-word;
  padding: 15px 10px;

  // Large icon styling with proper spacing
  > .fa-3x {
    display: block;
    margin-bottom: 10px;
  }
}

// Fix dropdown icon spacing for split buttons
.dropdown-toggle.dropdown-icon::after {
  margin-left: 0;
}

// Floating Action Buttons (FAB) - Gmail-style add buttons
.fab-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  &.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }
}

// Person View specific FAB - always visible, doesn't hide
.fab-person-view {
  z-index: 1040; // Higher than AdminLTE sidebar (1030)

  // Override the hidden behavior - these buttons stay visible
  &.hidden {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.fab-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
  transition: all 0.3s ease;

  .fab-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
  }

  .fab-label {
    position: absolute;
    right: 70px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
  }

  &:hover {
    text-decoration: none;

    .fab-icon {
      transform: scale(1.1);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }

    .fab-label {
      opacity: 1;
      transform: translateX(0);
    }
  }

  // Color variants - consolidated
  &.fab-person .fab-icon {
    background-color: #007bff; // Bootstrap primary
  }

  &.fab-person:hover .fab-icon {
    background-color: #0056b3;
  }

  &.fab-family .fab-icon {
    background-color: #28a745; // Bootstrap success
  }

  &.fab-family:hover .fab-icon {
    background-color: #218838;
  }

  &.fab-edit .fab-icon {
    background-color: #007bff; // Bootstrap primary
  }

  &.fab-edit:hover .fab-icon {
    background-color: #0056b3;
  }

  &.fab-note .fab-icon {
    background-color: #6f42c1; // Bootstrap purple/indigo
  }

  &.fab-note:hover .fab-icon {
    background-color: #5a32a3;
  }

  &.fab-save .fab-icon {
    background-color: #28a745; // Bootstrap success/green
  }

  &.fab-save:hover .fab-icon {
    background-color: #218838;
  }

  &.fab-save-add .fab-icon {
    background-color: #007bff; // Bootstrap primary/blue
  }

  &.fab-save-add:hover .fab-icon {
    background-color: #0056b3;
  }

  &.fab-cancel .fab-icon {
    background-color: #6c757d; // Bootstrap secondary/gray
  }

  &.fab-cancel:hover .fab-icon {
    background-color: #5a6268;
  }
}

// Person Editor specific FAB - always visible, doesn't hide
.fab-person-editor {
  z-index: 1040; // Higher than AdminLTE sidebar (1030)

  // Override the hidden behavior - these buttons stay visible
  &.hidden {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

// Family Editor specific FAB - always visible, doesn't hide
.fab-family-editor {
  z-index: 1040; // Higher than AdminLTE sidebar (1030)

  // Override the hidden behavior - these buttons stay visible
  &.hidden {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

// Family View specific FAB - always visible, doesn't hide
.fab-family-view {
  z-index: 1040; // Higher than AdminLTE sidebar (1030)

  // Override the hidden behavior - these buttons stay visible
  &.hidden {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
