/* Critical UI Fixes for Mobile and Desktop */

/* Fix 1: Ensure instances never disappear */
.your-instances-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
}

.instance-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix 2: Mobile header improvements */
@media (max-width: 768px) {
    .navbar {
        padding: 10px !important;
        min-height: auto !important;
        flex-wrap: nowrap !important;
    }
    
    .navbar-brand {
        font-size: 16px !important;
        margin-right: auto !important;
    }
    
    .navbar .btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
        margin: 0 2px !important;
    }
    
    /* Stack buttons vertically if needed */
    .navbar-nav {
        flex-direction: row !important;
        gap: 5px !important;
    }
    
    /* Reduce token display on mobile */
    .balance-display {
        font-size: 11px !important;
    }
}

/* Fix 3: Add button visibility */
#add-instance-btn,
.btn-success {
    background-color: #28a745 !important;
    color: white !important;
    border: 2px solid #28a745 !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

#add-instance-btn:hover,
.btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Ensure add button text is always visible */
#add-instance-btn::before {
    content: "➕ ";
    font-size: 16px;
}

/* Fix 4: Modal tariff visibility */
.modal-body {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
}

.tariff-cards-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 10px !important;
}

.tariff-card {
    min-height: auto !important;
    margin-bottom: 15px !important;
}

/* Ensure modal is scrollable on mobile */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .modal-content {
        max-height: calc(100vh - 20px) !important;
    }
    
    .modal-body {
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .tariff-card {
        padding: 15px !important;
        font-size: 14px !important;
    }
}

/* Fix 5: Sidebar instances container */
.sidebar,
.instances-sidebar {
    position: sticky !important;
    top: 70px !important;
    height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
}

/* Fix 6: General visibility improvements */
.btn {
    min-width: auto !important;
    white-space: nowrap !important;
}

/* Fix 7: Remove problematic animations that might hide content */
* {
    animation-fill-mode: forwards !important;
}

/* Fix 8: Ensure all interactive elements are clickable */
button, .btn, a, .clickable {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix 9: Override any conflicting gradient backgrounds on text */
.btn-success,
#add-instance-btn,
.navbar .btn {
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -webkit-text-fill-color: white !important;
}

/* Fix 10: Instance list scrollbar */
.your-instances-container::-webkit-scrollbar {
    width: 8px;
}

.your-instances-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.your-instances-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.your-instances-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}