/*
 * Responsive Utilities & Global Responsive Rules
 * Breakpoints: 768px (tablet), 480px (mobile)
 */

/* Base responsive behavior for all common elements */

/* Responsive Text Utilities */
.text-responsive-sm {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .text-responsive-sm {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .text-responsive-sm {
        font-size: 0.75rem;
    }
}

/* Hide elements on specific breakpoints */
.hide-tablet {
    display: none;
}

.hide-mobile {
    display: none;
}

.show-tablet {
    display: none;
}

.show-mobile {
    display: none;
}

/* Show on tablet and above */
@media (min-width: 769px) {
    .hide-tablet {
        display: block;
    }

    .show-tablet {
        display: none;
    }
}

/* Show on mobile */
@media (max-width: 480px) {
    .hide-mobile {
        display: block;
    }

    .show-mobile {
        display: block;
    }
}

/* Responsive Spacing Utilities */
.px-responsive {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 768px) {
    .px-responsive {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 480px) {
    .px-responsive {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.py-responsive {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (max-width: 768px) {
    .py-responsive {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .py-responsive {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Responsive Gap for Flexbox/Grid */
.gap-responsive {
    gap: 2rem;
}

@media (max-width: 768px) {
    .gap-responsive {
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .gap-responsive {
        gap: 1rem;
    }
}

/* Responsive Width */
.w-responsive {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .w-responsive {
        max-width: 100%;
    }
}

/* Responsive Border Radius */
.rounded-responsive {
    border-radius: 12px;
}

@media (max-width: 480px) {
    .rounded-responsive {
        border-radius: 8px;
    }
}

/* Responsive Shadow */
.shadow-responsive {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
    .shadow-responsive {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
}

/* Responsive Font Size */
.text-lg {
    font-size: 1.125rem;
}

@media (max-width: 768px) {
    .text-lg {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .text-lg {
        font-size: 0.95rem;
    }
}

/* Responsive Container */
.container-responsive {
    width: 100%;
    padding: 0 var(--spacing-lg);
}

@media (max-width: 768px) {
    .container-responsive {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .container-responsive {
        padding: 0 var(--spacing-sm);
    }
}

/* Responsive Flex Behavior */
.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .flex-responsive {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .flex-responsive {
        gap: var(--spacing-xs);
    }
}

/* Responsive Grid (2 columns on desktop, 1 on mobile) */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .grid-responsive {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
}

/* Input & Button Full Width on Mobile */
@media (max-width: 480px) {
    .form-input,
    .form-select,
    .btn,
    button {
        width: 100%;
    }
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive Table Behavior */
@media (max-width: 480px) {
    .data-table {
        font-size: 0.8rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }
}

/* Ensure modals work on mobile */
@media (max-width: 480px) {
    .modal {
        padding: var(--spacing-sm);
    }
}

/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}