/* ============================================
   CONTAINER QUERY SYSTEM
   ============================================ */

/* Container Definitions */
.page-container {
    container: page / inline-size;
}

.module-content {
    container: module / inline-size;
}

.card,
.panel {
    container: component / inline-size;
}

/* ============================================
   PAGE CONTAINER QUERIES
   ============================================ */

/* Small Container */
@container page (max-width: 36rem) {
    .page-title {
        font-size: var(--text-xl-fluid);
    }

    .page-actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    .table-responsive {
        font-size: var(--text-sm);
    }
}

/* Medium Container */
@container page (min-width: 36rem) and (max-width: 62rem) {
    .page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hide-md {
        display: none;
    }
}

/* Large Container */
@container page (min-width: 62rem) {
    .page-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sidebar-layout {
        display: grid;
        grid-template-columns: var(--width-sidebar-left) 1fr;
        gap: var(--space-6);
    }
}

/* ============================================
   MODULE CONTAINER QUERIES
   ============================================ */

/* Module-specific responsive behavior */
@container module (max-width: 48rem) {
    .data-table th:nth-child(n+5),
    .data-table td:nth-child(n+5) {
        display: none;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }
}

@container module (min-width: 48rem) {
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
}

/* ============================================
   COMPONENT CONTAINER QUERIES
   ============================================ */

@container component (max-width: 20rem) {
    .card-header {
        padding: var(--space-3);
    }

    .card-title {
        font-size: var(--text-base);
    }

    .card-actions {
        display: none;
    }
}

@container component (min-width: 20rem) {
    .card-header {
        padding: var(--space-4);
    }

    .card-title {
        font-size: var(--text-lg);
    }
}