/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* 640px + */
@media (min-width: 640px) {
    .save-button .text-label {
        display: inline;
    }

    .device-button>span:not(.dashicons) {
        display: inline;
    }

    .header-left .logo-text {
        display: block;
    }
}

/* 768px + (Tablet/Desktop Base) */
@media (min-width: 768px) {
    .main-content {
        padding: 2rem;
    }

    .mobile-only-content {
        display: none;
    }

    .sidebar {
        position: sticky;
        top: var(--ctc-sticky-top);
        height: calc(100vh - var(--ctc-sticky-top) - var(--ctc-header-height));
        transform: translateX(0%);
        display: block;
        width: 4rem;
        transition: width 0.3s ease;
        z-index: 40;
    }

    .sidebar.expanded {
        width: 16rem;
    }

    .sidebar-header {
        justify-content: center;
    }

    .sidebar-header .sidebar-title,
    .close-sidebar {
        display: none;
    }



    /* Collapsed (icon-only) state. */
    .nav-item,
    .drill-down-btn {
        justify-content: center;
        padding: 0.75rem;
        gap: 0;
        transition: background-color 0.2s ease, color 0.2s ease,
            padding 0.3s ease, gap 0.3s ease;
    }

    .nav-item span:not(.dashicons),
    .drill-down-btn span:not(.dashicons) {
        flex: none;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: max-width 0.3s ease, opacity 0.15s ease;
    }

    .sidebar.expanded .nav-item,
    .sidebar.expanded .drill-down-btn {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .sidebar.expanded .nav-item span:not(.dashicons),
    .sidebar.expanded .drill-down-btn span:not(.dashicons) {
        flex: 1;
        max-width: 12rem;
        opacity: 1;
        transition: max-width 0.3s ease, opacity 0.2s ease 0.1s;
    }
}

/* 1024px + */
@media (min-width: 1024px) {
    .main-content {
        flex: 1;
        transition: padding 0.3s ease;
    }
}

/* 1200px + */
@media (min-width: 1200px) {
    .right-sidebar {
        display: flex;
        position: sticky;
        top: var(--ctc-sticky-top);
        height: calc(100vh - var(--ctc-sticky-top) - var(--ctc-header-height));
        width: 350px;
        flex-shrink: 0;
    }

    /* Hide right sidebar on the PRO features panel to allow full width. */
    .dashboard-content:has(#pro-features.settings-panel.active) .right-sidebar {
        display: none;
    }
}

/* 1280px + */
@media (min-width: 1280px) {
    .main-content {
        padding: 2rem 3rem;
    }
}

/* Max 767px */
@media (max-width: 767px) {

    .ctc-admin-dashboard select {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
        /* Full width to match text inputs (was 80%, which looked inconsistent on mobile). */
        width: 100%;
    }

    .row {
        flex-direction: column;
        align-items: stretch;
    }

    .col {
        flex: none;
        width: 100%;
    }
}

/* Max 810px */
@media (max-width: 810px) {
    .admin-header {
        padding: 0 1rem;
    }

    .logo-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    /* Scoped: the only <h1> here belongs to WP core's Insert/edit link modal. */
    .ctc-admin-dashboard h1 {
        font-size: 1rem;
    }

    .menu-toggle,
    .theme-toggle,
    .save-button {
        padding: 0.375rem;
    }

    .header-left .logo-text {
        display: none;
    }

    .switch-text {
        display: none;
    }

    .save-button .text-label {
        display: none;
    }

    .main-content {
        padding: 1rem;
    }
}

/* Max 480px */
@media (max-width: 480px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .grid-preview {
        height: 60px;
    }

    .grid-name {
        font-size: 0.7rem;
    }

    .panel-header h2,
    .panel-header .panel-title {
        font-size: 1.125rem;
    }

    .ctc-card-header,
    .ctc-card-content {
        padding: 0.75rem;
    }

    .pro-features {
        padding: 0.5rem;
    }

    .feature-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.875rem;
    }

    .pro-feature-item {
        padding: 0.375rem;
    }

    .info-box,
    .reference-box {
        padding: 0.5rem;
    }

    /* Stack segment control label and buttons vertically on narrow screens. */
    .field-radio-wrapper.segment-control {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Range 768-991 */
@media (min-width: 768px) and (max-width: 991px) {
    .sidebar {
        top: var(--ctc-sticky-top);
        width: 3.5rem;
    }

    .sidebar.expanded {
        width: 14rem;
    }

    .main-content {
        padding: 1.5rem;
    }
}

/* Range 992-1199 */
@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar {
        top: var(--ctc-sticky-top);
        width: 4rem;
    }

    .sidebar.expanded {
        width: 16rem;
    }
}