/* ==========================================================================
   Yixiang UI / 翊象 UI
   Responsive Rules
   响应式规则

   Copyright (c) 2026 威海颜翊网络科技有限公司
   Licensed under the MIT License. Commercial use is permitted.
   https://www.weihaiyanyi.com  |  pinenetcn@gmail.com
   ========================================================================== */
@media (max-width: 1024px) {
    div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 平板端：主内容双栏改为单栏，避免卡片被挤扁 */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 网格子项允许收缩，长内容交给内部滚动 */
    .yx-content [style*="grid-template-columns"] > * {
        min-width: 0;
    }
}

/* 2. Tablets & Phones (max-width: 768px) */
@media (max-width: 768px) {
    /* Header：隐藏桌面导航，显示汉堡按钮 */
    .yx-nav-links {
        display: none !important;
    }

    .yx-mobile-menu-btn {
        display: inline-flex;
    }

    .yx-header-actions .yx-btn:not(.yx-btn-primary):not(.yx-btn-icon) {
        display: none;
    }

    .yx-header-actions {
        justify-content: flex-end;
        gap: var(--yx-space-2);
    }

    /* Hero 标题自适应 */
    .yx-hero h1 {
        font-size: clamp(30px, 8vw, 40px) !important;
        letter-spacing: -0.5px !important;
    }

    .yx-hero p {
        font-size: var(--yx-text-base) !important;
        padding: 0 var(--yx-space-2);
    }

    /* 抽屉在移动端占满高度 */
    .yx-front-mobile-drawer {
        width: 280px;
        max-width: 85%;
    }

    /* 覆盖上面隐藏 .yx-nav-links 的规则，抽屉内必须显示 */
    .yx-front-mobile-drawer .yx-nav-links {
        display: flex !important;
    }

    /* Admin Sidebar Off-canvas */
    .yx-layout-sidebar .yx-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 260px;
        max-width: 85%;
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        /* 必须高于遮罩层 */
        z-index: calc(var(--yx-z-overlay) + 1);
    }

    .yx-layout-sidebar.sidebar-open .yx-sidebar {
        transform: translateX(0);
    }

    .yx-main {
        padding-left: 0;
    }

    .yx-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--yx-space-4);
    }

    .yx-page-header > .yx-btn,
    .yx-page-header > .yx-flex {
        width: 100%;
    }

    /* 表格横向滚动 */
    .yx-table-wrapper {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .yx-table th, .yx-table td {
        white-space: nowrap;
    }

    /* 多列 Grid 强制单列 */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: repeat(2, 1fr)"],
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* 横向卡片：上图下文 */
    .yx-card-horizontal {
        flex-direction: column !important;
    }
    .yx-card-horizontal .yx-card-cover {
        width: 100% !important;
        height: 180px;
        border-top-right-radius: calc(var(--yx-radius-xl) - 1px) !important;
        border-bottom-left-radius: 0 !important;
    }

    .yx-modal {
        width: calc(100% - 24px);
    }
}

/* 3. Small Phones (max-width: 480px) */
@media (max-width: 480px) {
    .yx-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--yx-space-3);
    }

    .yx-card-header .yx-btn {
        width: 100%;
    }

    /* 移动端页面留白 */
    .yx-content {
        padding: var(--yx-space-4) 12px var(--yx-space-6) !important;
    }

    .yx-main-header {
        padding: 0 12px !important;
    }

    .yx-card-body {
        padding: 16px 12px !important;
    }
    .yx-card-header, .yx-card-footer {
        padding: 12px !important;
    }

    /* 按钮组在手机上允许换行 */
    .yx-flex.yx-gap-4 {
        gap: var(--yx-space-3) !important;
        flex-wrap: wrap;
    }

    /* 触摸目标 */
    .yx-btn {
        min-height: 36px;
    }

    .yx-input, .yx-select {
        min-height: 40px;
    }

    .yx-page-title {
        font-size: 20px !important;
    }

    .yx-text-3xl {
        font-size: 24px !important;
    }

    /* 首页特性卡片内边距收紧 */
    .yx-card-body {
        padding: 16px 12px !important;
    }
}

/* 平板端：固定侧栏 + 内容型双栏统一堆叠 */
@media (max-width: 1024px) {
    .yx-content div[style*="grid-template-columns: 1fr 2fr"],
    .yx-content div[style*="grid-template-columns: 2fr 1fr"],
    .yx-content div[style*="grid-template-columns: 320px 1fr"],
    .yx-content div[style*="grid-template-columns: 300px 1fr"],
    .yx-content div[style*="grid-template-columns: 280px 1fr"],
    .yx-content div[style*="grid-template-columns: 260px 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* 手机端：所有内联双栏布局统一单栏，菜单行改为上下排列 */
@media (max-width: 600px) {
    .yx-content div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .yx-nav-config-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px;
    }

    .yx-nav-config-row > span {
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .yx-nav-config-row--child {
        margin-left: 16px !important;
    }
}

/* 手机端卡片筛选栏 / Mobile card filters */
@media (max-width: 600px) {
    .yx-card-header {
        flex-direction: column;
        align-items: stretch !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    .yx-card-header > .yx-flex {
        min-width: 0;
    }

    .yx-card-search {
        width: 100%;
    }

    .yx-card-search .yx-input {
        flex: 1 1 auto;
        width: 0 !important;
        min-width: 0;
    }

    .yx-card-search .yx-btn {
        width: auto !important;
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}



/* 手机端卡片头部按钮不要整行拉满 */
@media (max-width: 600px) {
    .yx-card-header > .yx-btn {
        width: auto !important;
        align-self: flex-start;
    }
}

/* 控制台文章筛选 / Console article filters */
@media (max-width: 600px) {
    .yx-console-search {
        width: 100%;
        flex-wrap: wrap;
    }

    .yx-console-search input[type="search"] {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
    }

    .yx-console-search select {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    .yx-console-search-btn {
        width: auto !important;
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}