/* Component-specific responsive styles */

/* ===== CALENDAR & DATE PICKERS ===== */
@media (max-width: 768px) {
    .calendar-widget,
    .date-picker,
    .time-picker {
        max-width: 100%;
    }
    
    .flatpickr-calendar {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: 90vw !important;
        max-width: 300px;
    }
}

/* ===== DROPDOWN MENUS ===== */
@media (max-width: 768px) {
    .i-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: 90vw !important;
        max-width: 300px;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ===== DATA TABLES ===== */
@media (max-width: 768px) {
    .i-table {
        font-size: 0.9rem;
    }
    
    .i-table th,
    .i-table td {
        padding: 0.5rem 0.25rem;
    }
    
    /* Hide less important columns on mobile */
    .i-table .mobile-hidden {
        display: none;
    }
}

/* ===== MODAL DIALOGS ===== */
@media (max-width: 768px) {
    .ui-dialog {
        width: 95vw !important;
        max-width: none;
        margin: 1rem;
    }
    
    .ui-dialog .ui-dialog-content {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ===== PAGINATION ===== */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .pagination .page-number {
        margin-bottom: 0.5rem;
    }
}

/* ===== SEARCH FORMS ===== */
@media (max-width: 768px) {
    .search-form {
        flex-direction: column;
    }
    
    .search-form .form-field {
        margin-bottom: 0.5rem;
    }
    
    .search-form .i-button {
        width: 100%;
    }
}

/* ===== STATISTICS WIDGETS ===== */
@media (max-width: 768px) {
    .i-badges-list-space-evenly {
        flex-direction: column;
        gap: 1rem;
    }
    
    .i-badge {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ===== PROGRESS BARS ===== */
@media (max-width: 768px) {
    .progress-bar {
        height: 1.5rem;
    }
    
    .progress-bar-label {
        font-size: 0.8rem;
    }
}

/* ===== TOOLTIPS ===== */
@media (max-width: 768px) {
    .qtip {
        max-width: 90vw !important;
        font-size: 0.9rem;
    }
}

/* ===== FIXED ELEMENTS ===== */
@media (max-width: 768px) {
    .fixed-element {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
}

/* ===== UTILITY CLASSES ===== */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
}

/* Text alignment for mobile */
.text-center-mobile {
    text-align: left;
}

@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center;
    }
}

/* Hide/show elements based on screen size */
.hide-on-mobile {
    display: block;
}

.show-on-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
    
    .show-on-mobile {
        display: block;
    }
}

/* ===== FORM SPECIFIC STYLES ===== */
@media (max-width: 768px) {
    /* Make form inputs full width */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Stack form checkboxes and radios vertically */
    .i-checkbox,
    .i-radio {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    /* Make form groups stack properly */
    .form-group-flex {
        flex-direction: column;
    }
}

/* ===== ICON ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .icon-only .i-button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
    
    /* Ensure icons have proper touch targets */
    .i-button.icon-only::before {
        font-size: 1.2rem;
    }
}

/* ===== LOADING STATES ===== */
@media (max-width: 768px) {
    .loading-spinner {
        transform: scale(0.8);
    }
}

/* ===== ERROR AND SUCCESS MESSAGES ===== */
@media (max-width: 768px) {
    .message-box {
        padding: 1rem;
        margin: 0.5rem 0;
    }
    
    .message-box-content {
        flex-direction: column;
        text-align: center;
    }
    
    .message-box .icon {
        margin-bottom: 0.5rem;
        margin-right: 0;
    }
}

/* ===== CUSTOM SCROLLBARS FOR MOBILE ===== */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }
}