/**
 * 响应式设计系统
 * 提供响应式断点、显示控制、布局调整等响应式工具类
 */

/* ==========================================================================
   1. 响应式断点定义 (基于设计令牌)
   ========================================================================== */

/* 小屏幕 (手机) */
@media (min-width: var(--breakpoint-sm)) {
    /* 小屏幕及以上显示的类 */
    .sm-block {
        display: block !important;
    }

    .sm-inline {
        display: inline !important;
    }

    .sm-inline-block {
        display: inline-block !important;
    }

    .sm-flex {
        display: flex !important;
    }

    .sm-inline-flex {
        display: inline-flex !important;
    }

    .sm-grid {
        display: grid !important;
    }

    .sm-hidden {
        display: none !important;
    }
}

/* 中屏幕 (平板) */
@media (min-width: var(--breakpoint-md)) {
    /* 中屏幕及以上显示的类 */
    .md-block {
        display: block !important;
    }

    .md-inline {
        display: inline !important;
    }

    .md-inline-block {
        display: inline-block !important;
    }

    .md-flex {
        display: flex !important;
    }

    .md-inline-flex {
        display: inline-flex !important;
    }

    .md-grid {
        display: grid !important;
    }

    .md-hidden {
        display: none !important;
    }
}

/* 大屏幕 (桌面) */
@media (min-width: var(--breakpoint-lg)) {
    /* 大屏幕及以上显示的类 */
    .lg-block {
        display: block !important;
    }

    .lg-inline {
        display: inline !important;
    }

    .lg-inline-block {
        display: inline-block !important;
    }

    .lg-flex {
        display: flex !important;
    }

    .lg-inline-flex {
        display: inline-flex !important;
    }

    .lg-grid {
        display: grid !important;
    }

    .lg-hidden {
        display: none !important;
    }
}

/* 超大屏幕 (大桌面) */
@media (min-width: var(--breakpoint-xl)) {
    /* 超大屏幕及以上显示的类 */
    .xl-block {
        display: block !important;
    }

    .xl-inline {
        display: inline !important;
    }

    .xl-inline-block {
        display: inline-block !important;
    }

    .xl-flex {
        display: flex !important;
    }

    .xl-inline-flex {
        display: inline-flex !important;
    }

    .xl-grid {
        display: grid !important;
    }

    .xl-hidden {
        display: none !important;
    }
}

/* ==========================================================================
   2. 移动优先响应式隐藏/显示 (推荐使用)
   ========================================================================== */

/* 默认显示，在小屏幕隐藏 */
.hide-on-mobile {
    display: none !important;
}

.show-on-mobile {
    display: block !important;
}

@media (min-width: var(--breakpoint-sm)) {
    .hide-on-mobile {
        display: block !important;
    }

    .show-on-mobile {
        display: none !important;
    }
}

/* 在平板及以上显示 */
.only-on-tablet-and-up {
    display: none !important;
}

@media (min-width: var(--breakpoint-md)) {
    .only-on-tablet-and-up {
        display: block !important;
    }
}

/* 在桌面及以上显示 */
.only-on-desktop-and-up {
    display: none !important;
}

@media (min-width: var(--breakpoint-lg)) {
    .only-on-desktop-and-up {
        display: block !important;
    }
}

/* ==========================================================================
   3. 响应式容器宽度
   ========================================================================== */

.container-fluid {
    width: 100%;
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: var(--breakpoint-sm)) {
    .container-fluid {
        max-width: var(--container-max-width-sm);
    }
}

@media (min-width: var(--breakpoint-md)) {
    .container-fluid {
        max-width: var(--container-max-width-md);
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .container-fluid {
        max-width: var(--container-max-width-lg);
    }
}

@media (min-width: var(--breakpoint-xl)) {
    .container-fluid {
        max-width: var(--container-max-width-xl);
    }
}

/* ==========================================================================
   4. 响应式间距
   ========================================================================== */

/* 响应式内边距 */
@media (min-width: var(--breakpoint-sm)) {
    .sm-p-0 {
        padding: var(--spacing-0) !important;
    }

    .sm-p-2 {
        padding: var(--spacing-2) !important;
    }

    .sm-p-4 {
        padding: var(--spacing-4) !important;
    }

    .sm-p-6 {
        padding: var(--spacing-6) !important;
    }

    .sm-p-8 {
        padding: var(--spacing-8) !important;
    }

    .sm-px-0 {
        padding-left: var(--spacing-0) !important;
        padding-right: var(--spacing-0) !important;
    }

    .sm-px-2 {
        padding-left: var(--spacing-2) !important;
        padding-right: var(--spacing-2) !important;
    }

    .sm-px-4 {
        padding-left: var(--spacing-4) !important;
        padding-right: var(--spacing-4) !important;
    }

    .sm-px-6 {
        padding-left: var(--spacing-6) !important;
        padding-right: var(--spacing-6) !important;
    }

    .sm-py-0 {
        padding-top: var(--spacing-0) !important;
        padding-bottom: var(--spacing-0) !important;
    }

    .sm-py-2 {
        padding-top: var(--spacing-2) !important;
        padding-bottom: var(--spacing-2) !important;
    }

    .sm-py-4 {
        padding-top: var(--spacing-4) !important;
        padding-bottom: var(--spacing-4) !important;
    }

    .sm-py-6 {
        padding-top: var(--spacing-6) !important;
        padding-bottom: var(--spacing-6) !important;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .md-p-0 {
        padding: var(--spacing-0) !important;
    }

    .md-p-2 {
        padding: var(--spacing-2) !important;
    }

    .md-p-4 {
        padding: var(--spacing-4) !important;
    }

    .md-p-6 {
        padding: var(--spacing-6) !important;
    }

    .md-p-8 {
        padding: var(--spacing-8) !important;
    }

    .md-px-0 {
        padding-left: var(--spacing-0) !important;
        padding-right: var(--spacing-0) !important;
    }

    .md-px-2 {
        padding-left: var(--spacing-2) !important;
        padding-right: var(--spacing-2) !important;
    }

    .md-px-4 {
        padding-left: var(--spacing-4) !important;
        padding-right: var(--spacing-4) !important;
    }

    .md-px-6 {
        padding-left: var(--spacing-6) !important;
        padding-right: var(--spacing-6) !important;
    }

    .md-py-0 {
        padding-top: var(--spacing-0) !important;
        padding-bottom: var(--spacing-0) !important;
    }

    .md-py-2 {
        padding-top: var(--spacing-2) !important;
        padding-bottom: var(--spacing-2) !important;
    }

    .md-py-4 {
        padding-top: var(--spacing-4) !important;
        padding-bottom: var(--spacing-4) !important;
    }

    .md-py-6 {
        padding-top: var(--spacing-6) !important;
        padding-bottom: var(--spacing-6) !important;
    }
}

/* ==========================================================================
   5. 响应式文本
   ========================================================================== */

/* 响应式字体大小 */
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
    .responsive-heading h1,
    .responsive-heading .h1 {
        font-size: var(--font-size-3xl) !important;
    }

    .responsive-heading h2,
    .responsive-heading .h2 {
        font-size: var(--font-size-2xl) !important;
    }

    .responsive-heading h3,
    .responsive-heading .h3 {
        font-size: var(--font-size-xl) !important;
    }
}

/* 响应式文本对齐 */
@media (min-width: var(--breakpoint-sm)) {
    .sm-text-left {
        text-align: left !important;
    }

    .sm-text-center {
        text-align: center !important;
    }

    .sm-text-right {
        text-align: right !important;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .md-text-left {
        text-align: left !important;
    }

    .md-text-center {
        text-align: center !important;
    }

    .md-text-right {
        text-align: right !important;
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .lg-text-left {
        text-align: left !important;
    }

    .lg-text-center {
        text-align: center !important;
    }

    .lg-text-right {
        text-align: right !important;
    }
}

/* ==========================================================================
   6. 响应式布局
   ========================================================================== */

/* 响应式 Flexbox 方向 */
@media (min-width: var(--breakpoint-md)) {
    .md-flex-row {
        flex-direction: row !important;
    }

    .md-flex-col {
        flex-direction: column !important;
    }

    .md-flex-row-reverse {
        flex-direction: row-reverse !important;
    }

    .md-flex-col-reverse {
        flex-direction: column-reverse !important;
    }
}

/* 响应式 Grid 列数 */
@media (min-width: var(--breakpoint-sm)) {
    .sm-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .sm-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sm-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .sm-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .md-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .md-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .md-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .md-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .lg-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lg-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .lg-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .lg-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .lg-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   7. 响应式边距
   ========================================================================== */

@media (min-width: var(--breakpoint-sm)) {
    .sm-m-0 {
        margin: var(--spacing-0) !important;
    }

    .sm-m-2 {
        margin: var(--spacing-2) !important;
    }

    .sm-m-4 {
        margin: var(--spacing-4) !important;
    }

    .sm-m-6 {
        margin: var(--spacing-6) !important;
    }

    .sm-mx-0 {
        margin-left: var(--spacing-0) !important;
        margin-right: var(--spacing-0) !important;
    }

    .sm-mx-2 {
        margin-left: var(--spacing-2) !important;
        margin-right: var(--spacing-2) !important;
    }

    .sm-mx-4 {
        margin-left: var(--spacing-4) !important;
        margin-right: var(--spacing-4) !important;
    }

    .sm-my-0 {
        margin-top: var(--spacing-0) !important;
        margin-bottom: var(--spacing-0) !important;
    }

    .sm-my-2 {
        margin-top: var(--spacing-2) !important;
        margin-bottom: var(--spacing-2) !important;
    }

    .sm-my-4 {
        margin-top: var(--spacing-4) !important;
        margin-bottom: var(--spacing-4) !important;
    }
}

/* ==========================================================================
   8. 响应式宽度和高度
   ========================================================================== */

@media (min-width: var(--breakpoint-sm)) {
    .sm-w-full {
        width: 100% !important;
    }

    .sm-w-1-2 {
        width: 50% !important;
    }

    .sm-w-1-3 {
        width: 33.333333% !important;
    }

    .sm-w-2-3 {
        width: 66.666667% !important;
    }

    .sm-w-1-4 {
        width: 25% !important;
    }

    .sm-w-3-4 {
        width: 75% !important;
    }

    .sm-w-auto {
        width: auto !important;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .md-w-full {
        width: 100% !important;
    }

    .md-w-1-2 {
        width: 50% !important;
    }

    .md-w-1-3 {
        width: 33.333333% !important;
    }

    .md-w-2-3 {
        width: 66.666667% !important;
    }

    .md-w-1-4 {
        width: 25% !important;
    }

    .md-w-3-4 {
        width: 75% !important;
    }

    .md-w-auto {
        width: auto !important;
    }
}

/* ==========================================================================
   9. 响应式断点实用类
   ========================================================================== */

/* 断点检测类（用于JavaScript） */
.breakpoint-indicator::after {
    content: 'xs';
    display: none;
}

@media (min-width: var(--breakpoint-sm)) {
    .breakpoint-indicator::after {
        content: 'sm';
    }
}

@media (min-width: var(--breakpoint-md)) {
    .breakpoint-indicator::after {
        content: 'md';
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .breakpoint-indicator::after {
        content: 'lg';
    }
}

@media (min-width: var(--breakpoint-xl)) {
    .breakpoint-indicator::after {
        content: 'xl';
    }
}

/* ==========================================================================
   10. 响应式工具组合
   ========================================================================== */

/* 移动端堆叠，桌面端并排 */
.stack-on-mobile {
    display: flex;
    flex-direction: column;
}

@media (min-width: var(--breakpoint-md)) {
    .stack-on-mobile {
        flex-direction: row;
    }
}

/* 响应式卡片布局 */
.responsive-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: var(--breakpoint-sm)) {
    .responsive-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: var(--breakpoint-md)) {
    .responsive-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .responsive-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 响应式导航菜单 */
.nav-mobile {
    display: flex;
    flex-direction: column;
}

@media (min-width: var(--breakpoint-md)) {
    .nav-mobile {
        flex-direction: row;
    }
}

/* ==========================================================================
   11. 打印样式
   ========================================================================== */

@media print {
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .print-break-before {
        page-break-before: always;
    }

    .print-break-after {
        page-break-after: always;
    }

    .print-break-avoid {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   12. 暗色模式支持
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .dark-mode-auto {
        background-color: var(--color-console-bg);
        color: var(--color-console-text-header);
    }

    .dark-mode-auto .text-title {
        color: var(--color-console-text-header);
    }
}

/* ==========================================================================
   13. 减少动画偏好
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}