@media (max-width: 1600px) {
    /* scale everything for smaller/laptop screens */
    :root {font-size: 85%;}
    .card.kpi h2 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: var(--font-size-small);
        }
}
/* CONTAINER QUERIES - Replaces outdated media queries, particularly applicable to us due to collapsable sidebar
/* https://github.com/oddbird/css-sandbox/blob/main/src/rwd/query/explainer.md */

@supports not (container-type: inline-size) {/* Container query support check and fallback */
    .content {
        /* Fallback for browsers without container query support */
    }
}

@media (max-height: 800px) {
    /* Fix modal issues - dropup for selects near bottom */
    .modal .select-options,
    tr:nth-last-child(-n+3) .select-options {
        top: auto;
        bottom: calc(100% + 4px); /* Changed from 90% */
    }
}

@container main-content (max-width: 1150px) {
    /* Tablet layout */
    .dashboard .grid-two-col-wide-left {
        grid-template-columns: 1fr 1fr;
    }
    
    .dashboard .grid-two-col-wide-right {
        grid-template-columns: 1fr;
        gap: var(--primary-radius-and-padding);
    }
    .chart-bar {
        width: 1rem;
    }
    
    .content-details-grid,
    .content-details-grid-wide {
        grid-template-columns: 1fr;
    }
    
}

@container main-content (max-width: 900px) {
    /* Tablet layout */
        .kpi-grid,
        .grid-autofit {
            grid-template-columns: repeat(2, 1fr);
        }
        .kpi-grid > .card:only-child,
        .kpi-grid > .card:nth-last-child(1):nth-child(odd),
        .grid-autofit > .card:only-child,
        .grid-autofit > .card:nth-last-child(1):nth-child(odd) {
        grid-column: 1 / -1;
        }
        
    }

@container main-content (max-width: 768px) {
    .info-row,
    .get-started-options,
    .get-started-help-options,
    .get-started-auto-options {
        grid-template-columns: 1fr;
    }
    
    .info-label {
        font-weight: 700;
    }
    .grid-two-col-even-repeat,
    .grid-two-col-wide-left,
    .grid-two-col-wide-right {
        grid-template-columns: 1fr;
    }
    
}

@container main-content (max-width: 480px) {
    /* Mobile layout */
    .kpi-grid,
    .grid-autofit {
        grid-template-columns: 1fr;
    }
    
    .dashboard .grid-two-col-wide-left {
        grid-template-columns: 1fr;
    }
    
    .dashboard .grid-two-col-wide-right {
        grid-template-columns: 1fr;
    }
    .opps-shortened .content-wrapper {
        /* Keep the same columns but allow wrapping */
        grid-template-columns: 2fr 1fr 1fr 1fr auto;
    }

    /* Make first column span entire row */
    .opps-shortened .content-details:first-child {
        grid-column: 1 / -1;
    }

    /* Hide only the first header label */
    .opps-shortened .header-row .content-details:first-child {
        visibility: hidden;
    }
    
    .breadcrumb {
        font-size: var(--font-size-smallest);
    }
    
    .actions-section {
        gap: 0.5rem;
    }
    
    .header .section-header {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }

    .content:has(.floating-actions) {margin-right: 0
    }

    .floating-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        padding: 1rem;
        border-radius: 0;
        gap: 1rem;
    }
    
    .floating-actions .secondary-actions {
        flex-direction: row;
        padding: 1rem;
        gap: 0.75rem;
        border-radius: var(--primary-radius-and-padding);
    }
    
    .floating-actions .action-btn:active {
        background-color: oklch(from var(--color-teal) l c h / 30%);
        transform: scale(0.95);
    }
    
    .floating-actions .action-btn.primary:active {
        transform: scale(0.95);
    }
    
    main {
        padding-bottom: calc(var(--primary-radius-and-padding) + 100px);
    }
    .filters-container {
        grid-template-columns: 1fr;
    }

    
}
/* Container queries — compact@l overrides for table controls */
@container main-content (min-width: 801px) {
    .sr-only\@l {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    .checkbox-wrapper:has(.sr-only\@l),
    .radio-wrapper:has(.sr-only\@l) {
        background: none;
    }
    .action-btn.compact\@l,
    a.action-btn.compact\@l {
        width: auto;
        height: auto;
        border: none;
        box-shadow: none;
        border-radius: var(--radius-secondary);
        background-color: oklch(from var(--color-dark-blue) l c h / 0%);
        margin-left: calc(var(--primary-radius-and-padding) / 4);
    }
    td:nth-child(1) .action-btn.compact\@l,
    td:nth-child(1) a.action-btn.compact\@l {
        margin-left: 0;
        margin-bottom: calc(var(--primary-radius-and-padding) / 1.75);
    }
    a.btn.ultra-compact\@l,
    .btn.ultra-compact\@l {
        font-size: var(--font-size-smallest);
        font-weight: bold;
        padding: 4px 10px 4px 10px;
        border-radius: var(--primary-radius-and-padding);
        white-space: nowrap;
    }
    /* Desktop-only hover styles */
    @media (pointer: fine) {
        table .checkbox-wrapper:has(.sr-only\@l):hover,
        table .radio-wrapper:has(.sr-only\@l):hover {
            background: none;
        }
    }
}