/* Responsive Styles */

/* Container responsive */
@media (max-width: 1440px) {
    .container {
        max-width: 1200px;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100%;
    }
}

/* Header responsive */
@media (max-width: 1024px) {
    #hd_login_msg {
        display: none;
    }
    
    .header-actions {
        gap: var(--space-sm);
    }
}

/* Typography responsive */
@media (max-width: 768px) {
    body {
        font-size: var(--text-sm);
    }
    
    h1, .h1 { font-size: var(--text-3xl); }
    h2, .h2 { font-size: var(--text-2xl); }
    h3, .h3 { font-size: var(--text-xl); }
    h4, .h4 { font-size: var(--text-lg); }
    h5, .h5 { font-size: var(--text-base); }
    h6, .h6 { font-size: var(--text-sm); }
}

/* Table responsive */
@media (max-width: 768px) {
    .tbl_wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tbl_wrap table {
        min-width: 600px;
    }
}

/* Form responsive */
@media (max-width: 576px) {
    .frm_input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Grid responsive */
@media (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Spacing responsive */
@media (max-width: 768px) {
    :root {
        --space-xs: 0.25rem;
        --space-sm: 0.375rem;
        --space-md: 0.75rem;
        --space-lg: 1rem;
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
        --space-3xl: 3rem;
    }
}

/* Hide/Show utilities */
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .tablet-up {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}