/**
 * 全站移动端适配（不改变业务逻辑，仅优化小屏展示）
 * 覆盖：统一布局页、个人中心、详情页、后台、旧版 app.css 页面、独立注册页
 */

/* ========== 基础：防横向溢出、触控友好 ========== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* iOS 输入框聚焦不自动放大 */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    button,
    .btn,
    .btn-primary,
    .btn-submit,
    a.site-nav-cta {
        min-height: 44px;
    }
}

/* 表格横向滚动 */
.table-responsive,
.admin-main,
.profile-card,
.content-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .admin-table,
    .profile-card table,
    .data-table {
        min-width: 520px;
    }
}

/* ========== 个人中心（profile.php 样式补全 + 移动端） ========== */
.profile-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.profile-header h2 {
    color: #111827;
    font-size: 1.75rem;
    font-weight: 900;
    margin: 0 0 0.5rem;
}

.profile-layout {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: flex-start;
}

.profile-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    border-bottom: 1px solid #f3f4f6;
}

.sidebar-menu li:last-child {
    border-bottom: none;
}

.sidebar-menu a {
    display: block;
    padding: 1rem 1.25rem;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border-left: 4px solid transparent;
}

.sidebar-menu a:hover {
    background: #f9fafb;
    color: #595757;
    border-left-color: #fff000;
}

.sidebar-menu a.active {
    background: #fffef0;
    color: #111827;
    border-left-color: #fff000;
}

.profile-content {
    flex: 1;
    min-width: 0;
}

.profile-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

.profile-card h3 {
    color: #374151;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #fff000;
}

.profile-card .form-group {
    margin-bottom: 1.25rem;
}

.profile-card .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #4b5563;
    font-weight: 600;
    font-size: 0.875rem;
}

.profile-card .form-group input,
.profile-card .form-group select,
.profile-card .form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.profile-card .btn-submit {
    padding: 0.75rem 1.5rem;
    background: #fff000;
    color: #595757;
    border: none;
    border-radius: 9999px;
    font-weight: 700;
    cursor: pointer;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-item {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.75rem;
    text-align: center;
}

.stat-item .number {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f59e0b;
}

/* ========== 作品详情 ========== */
.design-detail .design-header h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    line-height: 1.3;
    word-break: break-word;
}

.design-detail .designer-info {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #6b7280;
}

.design-detail .design-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.design-image-item,
.design-preview {
    min-height: 200px !important;
}

.design-image-item img {
    min-height: unset !important;
}

/* ========== 注册通道 / 表单页 ========== */
.channel-select-grid {
    grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {
    .channel-select-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========== 买家/设计师中心布局 ========== */
.buyer-center-page,
.designer-center-page,
.buyer-center,
.designer-center {
    width: 100%;
    box-sizing: border-box;
}

.center-layout,
.dashboard-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.center-sidebar,
.dashboard-sidebar {
    flex: 1 1 100%;
    max-width: 100%;
}

.center-main,
.dashboard-main {
    flex: 1 1 100%;
    min-width: 0;
}

/* ========== 旧版 header（DesignController 等） ========== */
@media (max-width: 768px) {
    .header-overlay .header-container nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
    }

    .header-overlay .header-container nav a {
        font-size: 13px;
        padding: 0.35rem 0.5rem;
    }

    .header-overlay .header-container h1 {
        font-size: 1.25rem;
    }
}

/* ========== 后台管理 ========== */
.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .admin-header h1 {
        font-size: 1.25rem !important;
    }

    .admin-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        gap: 0.35rem !important;
    }

    .admin-nav a {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .admin-main {
        padding: 1rem !important;
    }

    .admin-main .search-bar,
    .admin-main form[style*="display: flex"] {
        flex-direction: column !important;
    }

    .admin-main .form-group {
        width: 100% !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========== 页脚 ========== */
@media (max-width: 767px) {
    /* 「联系我们」在手机端占满整行，避免地址被挤成两行 */
    footer .bph-site-width.grid > div:nth-child(4) {
        grid-column: 1 / -1;
    }

    footer .bph-site-width.grid > div:nth-child(4) li:last-child {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    footer .bph-site-width > .grid {
        gap: 1.5rem;
    }

    footer .col-span-2 {
        grid-column: span 2;
    }
}

/* ========== 独立注册页（buyer/register 等内联样式页） ========== */
@media (max-width: 768px) {
    body:not(.site-with-navbar) {
        padding: 1rem !important;
    }

    body:not(.site-with-navbar) .container {
        width: 100% !important;
        padding: 0 !important;
    }

    body:not(.site-with-navbar) .header h1 {
        font-size: 1.5rem !important;
    }

    body:not(.site-with-navbar) .box,
    body:not(.site-with-navbar) .content,
    body:not(.site-with-navbar) .features,
    body:not(.site-with-navbar) .login-box {
        padding: 1.25rem !important;
    }

    body:not(.site-with-navbar) .stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body:not(.site-with-navbar) .nav a {
        display: block;
        width: 100%;
        text-align: center;
        margin-right: 0 !important;
    }
}

@media (max-width: 380px) {
    body:not(.site-with-navbar) .stats {
        grid-template-columns: 1fr !important;
    }
}

/* ========== 小屏断点汇总 ========== */
@media (max-width: 768px) {
    .profile-layout {
        flex-direction: column;
    }

    .profile-sidebar {
        width: 100%;
    }

    .sidebar-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-menu li {
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid #f3f4f6;
    }

    .sidebar-menu a {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .sidebar-menu a.active {
        border-left: none;
        border-bottom-color: #fff000;
    }

    .profile-card {
        padding: 1rem;
    }

    .page-header h2,
    h2.page-title {
        font-size: 1.5rem !important;
    }

    .login-box,
    .auth-box {
        margin: 1rem auto !important;
        padding: 1.5rem !important;
        max-width: 100% !important;
    }

    .buyer-center-page .content-grid,
    .designer-center-page .content-grid,
    .buyer-center .content-grid,
    .designer-center .content-grid {
        grid-template-columns: 1fr !important;
    }

    .bph-record-meta {
        grid-template-columns: 1fr !important;
    }

    body.site-with-navbar .design-grid,
    body.site-with-navbar .designers-grid {
        gap: 0.75rem !important;
    }

    body.site-with-navbar .suppliers-yellow-pages,
    body.site-with-navbar .designs-scheme-pages {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* 在线展厅分类筛选（layout 迁移后补全，全端生效） */
.showcase-page .category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.5rem 0;
}

.showcase-page .category-btn,
.showcase-page .product-category-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background: #fff;
    color: #595757;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 0.2s, border-color 0.2s;
}

.showcase-page .category-btn:hover,
.showcase-page .product-category-btn:hover {
    border-color: #fff000;
    background: #fffef0;
}

.showcase-page .category-btn.active,
.showcase-page .product-category-btn.active {
    background: #fff000;
    border-color: #fff000;
    color: #595757;
}

.showcase-page .category-btn .count,
.showcase-page .product-category-btn .count {
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    font-size: 0.75rem;
}

.showcase-page .stats-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}

.showcase-page .product-category-filter {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 1rem;
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.showcase-page .product-category-title {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 1rem;
    text-align: center;
}

.showcase-page .product-category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
}

/* ========== 手机端列表卡片（供应商/展厅/设计师等） ========== */
@media (max-width: 767px) {
    .suppliers-yellow-pages,
    .designers-list-pages,
    .designs-scheme-pages {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
    }

    .design-scheme-thumb {
        width: 4.5rem !important;
        height: 4.5rem !important;
        border-radius: 0.75rem !important;
        background: #f3f4f6 !important;
        overflow: hidden;
    }

    .design-scheme-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

    .design-scheme-thumb .logo-placeholder {
        font-size: 1rem !important;
    }

    .supplier-yellow-card {
        padding: 1rem 1.125rem !important;
        border-radius: 1rem !important;
        min-width: 0;
    }

    .supplier-yellow-card:hover {
        transform: none !important;
    }

    .supplier-header-yellow {
        gap: 0.75rem;
        margin-bottom: 0.875rem;
        padding-bottom: 0.875rem;
    }

    .supplier-logo-yellow {
        width: 3.25rem !important;
        height: 3.25rem !important;
        border-radius: 0.75rem !important;
    }

    .supplier-logo-yellow .logo-placeholder {
        font-size: 1.125rem !important;
    }

    .supplier-title-yellow h3 {
        font-size: 1rem !important;
        line-height: 1.35;
        word-break: break-word;
    }

    .supplier-tagline {
        font-size: 0.8125rem !important;
        line-height: 1.45;
    }

    .supplier-info-yellow {
        margin-bottom: 0.75rem;
    }

    .supplier-yellow-card .info-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        margin-bottom: 0.625rem;
    }

    .supplier-yellow-card .info-label {
        min-width: 0;
        font-size: 0.75rem;
        color: #9ca3af;
    }

    .supplier-yellow-card .info-value {
        font-size: 0.875rem;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .login-lock-info,
    .vip-lock-info {
        padding: 0.75rem 1rem !important;
        border-radius: 0.75rem !important;
        margin-top: 0.5rem;
    }

    .login-lock-info p,
    .vip-lock-info p {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .supplier-actions-yellow {
        padding-top: 0.75rem;
        justify-content: stretch;
    }

    .supplier-actions-yellow .btn-small {
        width: 100%;
    }

    /* 设计师卡片：小屏也保持两列，但收紧内边距 */
    .designers-grid {
        gap: 0.75rem !important;
    }

    .designer-card {
        padding: 1rem !important;
    }

    .designer-avatar {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin: 0 auto 0.5rem;
    }

    .designer-info h3 {
        font-size: 0.9375rem !important;
    }

    /* 方案库作品卡片 */
    .design-card {
        min-width: 0;
    }

    .design-card .design-info {
        padding: 0.75rem !important;
    }

    .design-card .design-info h4 a {
        font-size: 0.875rem !important;
        line-height: 1.35;
    }

    /* 在线展厅：分类筛选（迁移 layout 后丢失的内联样式补全） */
    .showcase-page .category-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
        margin: 1.25rem 0;
    }

    .showcase-page .category-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 calc(33.333% - 0.35rem);
        min-width: 5.5rem;
        padding: 0.625rem 0.5rem;
        background: #fff;
        color: #595757;
        border: 1px solid #e5e7eb;
        border-radius: 9999px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.8125rem;
        line-height: 1.3;
        text-align: center;
        box-sizing: border-box;
    }

    .showcase-page .category-btn.active {
        background: #fff000;
        border-color: #fff000;
        color: #595757;
    }

    .showcase-page .category-btn .count {
        margin-left: 0.35rem;
        padding: 0.1rem 0.4rem;
        background: rgba(0, 0, 0, 0.06);
        border-radius: 9999px;
        font-size: 0.6875rem;
        font-weight: 700;
    }

    .showcase-page .stats-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 1rem;
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 1rem;
        margin-bottom: 1rem;
    }

    .showcase-page .stats-bar .stat-item .label {
        font-size: 0.75rem;
        color: #9ca3af;
    }

    .showcase-page .stats-bar .stat-item .value {
        font-size: 1.25rem;
        font-weight: 800;
        color: #595757;
    }

    .showcase-page .product-category-filter {
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 1rem;
        padding: 1rem;
        margin: 1rem 0;
    }

    .showcase-page .product-category-title {
        font-size: 0.9375rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        text-align: left;
        color: #374151;
    }

    .showcase-page .product-category-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .showcase-page .product-category-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        padding: 0.5rem 0.625rem;
        background: #f9fafb;
        color: #595757;
        border: 1px solid #e5e7eb;
        border-radius: 9999px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.75rem;
        line-height: 1.3;
        text-align: center;
        box-sizing: border-box;
    }

    .showcase-page .product-category-btn.active {
        background: #fff000;
        border-color: #fff000;
    }

    .showcase-page .product-category-btn .count {
        margin-left: 0.25rem;
        font-size: 0.6875rem;
        opacity: 0.85;
    }
}

@media (max-width: 480px) {
    .designers-grid {
        grid-template-columns: 1fr !important;
    }

    .showcase-page .category-btn {
        flex: 1 1 100%;
    }
}

/* 企业详情页 */
@media (max-width: 968px) {
    .company-profile-page .company-content-wrapper {
        grid-template-columns: 1fr !important;
    }

    .company-profile-page .company-title-banner h1 {
        font-size: clamp(1.25rem, 5vw, 2rem) !important;
    }

    .company-profile-page .company-title-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* 安全区（刘海屏） */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    header#navbar {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}