/* Dropdown Responsive CSS */
.table td, .table th, .card-body {
    overflow: visible !important;
}

.dropdown-menu {
    position: absolute !important;
    z-index: 10003 !important;
}

.table .dropdown-menu {
    position: absolute !important;
    z-index: 10003 !important;
    top: 100% !important;
    bottom: auto !important;
    transform: translateY(2px) !important;
}

.table .dropdown.show .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
}

.table tbody tr {
    transition: all 0.3s ease;
}

.table tbody tr.dropdown-expanded {
    height: auto !important;
    min-height: 180px;
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: scale(1.02);
    z-index: 10;
    position: relative;
}

.table tbody tr.dropdown-expanded td {
    padding: 1rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
}

.table tbody tr.dropdown-expanded .dropdown-menu {
    animation: dropdownSlide 0.3s ease-out;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(2px);
    }
}