// Footer Component Fixes
// Proper dropdown positioning and functionality

.app-footer {
  background-color: #fff;
  border-top: 1px solid #e9ecef;
  padding: 1rem 0;
  margin-top: auto;

  .app-footer__inner {
    .container-fluid {
      padding: 0 1.5rem;
    }

    .footer-text {
      font-size: 0.875rem;
      color: #6c757d;
      margin: 0;
    }

    .footer-nav {
      .nav-footer {
        gap: 0;

        .dropdown {
          position: relative;

          .btn-link {
            color: #6c757d;
            text-decoration: none;
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
            border: none;
            background: none;

            &:hover {
              color: #495057;
            }

            &::after {
              display: none; // Hide Bootstrap's default caret
            }
          }

          .dropdown-menu {
            position: absolute;
            bottom: 100%; // Position above the button
            top: auto;
            z-index: 1040;
            min-width: 180px;
            margin-bottom: 0.5rem;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.375rem;
            box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
            background-color: #fff;

            &.dropdown-menu-end {
              right: 0;
              left: auto;
            }

            &.show {
              display: block;
            }

            .dropdown-item {
              padding: 0.5rem 1rem;
              font-size: 0.875rem;
              color: #212529;
              text-decoration: none;
              transition: all 0.2s ease;
              border: none;
              background: none;
              width: 100%;
              text-align: left;

              &:hover,
              &:focus {
                background-color: #f8f9fa;
                color: #495057;
              }
            }

            .dropdown-divider {
              margin: 0.5rem 0;
              border-top: 1px solid #e9ecef;
            }
          }
        }
      }
    }
  }
}

// Ensure footer dropdowns don't interfere with content
.app-footer .dropdown-menu {
  // Force positioning above footer
  transform: translateY(-100%);
  margin-top: -0.5rem;

  &.show {
    transform: translateY(-100%);
  }
}

// Dark theme support
.dark-theme {
  .app-footer {
    background-color: #2c3e50;
    border-top-color: #34495e;

    .footer-text {
      color: #bdc3c7;
    }

    .dropdown {
      .btn-link {
        color: #bdc3c7;

        &:hover {
          color: #ecf0f1;
        }
      }

      .dropdown-menu {
        background-color: #34495e;
        border-color: #4a5f7a;

        .dropdown-item {
          color: #ecf0f1;

          &:hover,
          &:focus {
            background-color: #4a5f7a;
            color: #fff;
          }
        }

        .dropdown-divider {
          border-top-color: #4a5f7a;
        }
      }
    }
  }
}

// Responsive adjustments
@media (max-width: 767.98px) {
  .app-footer {
    .footer-nav {
      margin-top: 0.5rem;

      .nav-footer {
        justify-content: center !important;
      }
    }
  }
}

@media (max-width: 575.98px) {
  .app-footer {
    .app-footer__inner {
      .row {
        flex-direction: column;
        text-align: center;

        .col-md-6:first-child {
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}
