/* Responsive styles for mobile devices */

/* Add padding to the bottom of the content area to account for the mobile navigation bar */
@media (max-width: 991.98px) {
    .content-wrapper {
        padding-bottom: 70px;
    }
    
    /* Adjust table layouts for mobile */
    .table-responsive {
        overflow-x: auto;
    }
    
    /* Make cards full width on mobile */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Adjust form layouts */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Make buttons stack on mobile */
    .btn-toolbar .btn {
        margin-bottom: 0.5rem;
    }
    
    /* Improve readability of text */
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    /* Adjust padding for main content */
    main.container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Mobile bottom navigation */
.mobile-nav {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.mobile-nav i {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.mobile-nav small {
    font-size: 0.7rem;
}

/* Custom domain badge styling */
.custom-domain-badge {
    display: inline-block;
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* PWA install button */
#install-button {
    transition: all 0.3s ease;
}

/* Responsive adjustments for iPad and tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .card-columns {
        column-count: 2;
    }
}

/* iPhone specific adjustments */
@media (max-width: 767.98px) {
    /* Add iOS safe area padding for iPhone X and newer */
    .mobile-nav {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    
    /* Ensure buttons are large enough for touch targets */
    .btn {
        padding: 0.5rem 0.75rem;
    }
    
    /* Make modal dialogs more mobile-friendly */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    /* Adjust spacing for iPhone */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}