/**
 * 爆品汇品牌主题 — 与根目录 index.php 对齐
 * 在 app.css / admin.css 之后加载，覆盖旧版黄灰样式
 */

:root {
    --brand-yellow: #FFF000;
    --brand-yellow-hover: #F5E800;
    --brand-grey: #595757;
    --brand-light: #F9FAFB;
    --brand-radius: 1rem;
    --brand-radius-lg: 1.5rem;
    --brand-shadow: 0 20px 40px -15px rgba(89, 87, 87, 0.1);
    /* 内页内容区最大宽度（对齐首页视觉，减少两侧留白） */
    --bph-content-max: min(96vw, 100rem);
    --bph-content-pad: clamp(1rem, 2.5vw, 2.5rem);
}

body {
    color: var(--brand-grey) !important;
    background: #fff !important;
}

.container {
    width: 100% !important;
    max-width: var(--bph-content-max);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1.5rem var(--bph-content-pad) 3rem !important;
    background: transparent !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}

/* 内页主内容壳：拉宽 max-w-7xl 等 Tailwind 容器，减少两侧空白 */
body.site-with-navbar #page-main {
    width: 100% !important;
}

body.site-with-navbar #page-main > div:not(.home-page-root),
body.site-with-navbar .max-w-7xl {
    width: var(--bph-content-max) !important;
    max-width: var(--bph-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--bph-content-pad) !important;
    padding-right: var(--bph-content-pad) !important;
    box-sizing: border-box !important;
}

/* 首页全宽区块不受内页宽度壳限制 */
body.site-with-navbar #page-main > .home-page-root {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

body.site-with-navbar #page-main > .company-profile-page {
    width: var(--bph-content-max) !important;
    max-width: var(--bph-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--bph-content-pad) !important;
    padding-right: var(--bph-content-pad) !important;
    box-sizing: border-box !important;
}

.bph-site-width {
    width: var(--bph-content-max) !important;
    max-width: var(--bph-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--bph-content-pad) !important;
    padding-right: var(--bph-content-pad) !important;
    box-sizing: border-box !important;
}

#page-main .container {
    padding-top: 0 !important;
}

/* 已使用统一顶栏 #navbar 时，隐藏页面内旧版 header */
body.site-with-navbar .container > header,
body.site-with-navbar .container > .header,
body.site-with-navbar .header-container,
body.site-with-navbar header.header {
    display: none !important;
}

.page-header h2,
.designs-page .page-header h2,
h2.page-title {
    color: #111827 !important;
    font-weight: 900 !important;
    font-size: 1.875rem !important;
}

.page-header p {
    color: #6b7280 !important;
}

/* 按钮 */
button[type="submit"],
.btn-primary,
.search-bar button,
.form-actions button,
input[type="submit"] {
    background: var(--brand-yellow) !important;
    color: var(--brand-grey) !important;
    border: none !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    padding: 0.625rem 1.5rem !important;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

button[type="submit"]:hover,
.btn-primary:hover,
.search-bar button:hover {
    background: var(--brand-yellow-hover) !important;
    box-shadow: 0 10px 30px -10px rgba(255, 240, 0, 0.45);
}

.btn-secondary,
a.btn-secondary {
    background: #fff !important;
    color: var(--brand-grey) !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
}

/* 表单 */
.form-group input,
.form-group textarea,
.form-group select,
.search-bar input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
    border: 1px solid #e5e7eb !important;
    border-radius: var(--brand-radius) !important;
    background: #f9fafb !important;
    color: var(--brand-grey) !important;
    padding: 0.75rem 1rem !important;
}

.form-group input:focus,
.form-group textarea:focus,
.search-bar input:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--brand-yellow) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.25) !important;
}

/* 卡片与列表 */
.design-card,
.user-card,
.product-card,
.supplier-card,
.requirement-form,
.auth-box,
.login-box,
.showcase-card,
.case-card {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: var(--brand-radius-lg) !important;
    box-shadow: var(--brand-shadow) !important;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.design-card:hover,
.user-card:hover,
.product-card:hover,
.supplier-card:hover,
.showcase-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-yellow) !important;
}

.design-grid,
.user-grid,
.product-grid,
.showcase-grid {
    display: grid;
    gap: 1.5rem;
}

.design-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pagination a {
    background: var(--brand-yellow) !important;
    color: var(--brand-grey) !important;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

.pagination span {
    color: #6b7280;
    font-size: 0.875rem;
}

/* 标签与筛选 */
.filter-tabs a.active,
.category-tab.active,
.tab.active {
    background: var(--brand-yellow) !important;
    color: var(--brand-grey) !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
}

.filter-tabs a,
.category-tab,
.tab {
    border-radius: 9999px !important;
}

/* 空状态 */
.empty-state {
    background: var(--brand-light) !important;
    border: 2px dashed #e5e7eb !important;
    border-radius: var(--brand-radius-lg) !important;
    padding: 3rem 1.5rem !important;
}

/* 消息提示 */
.success-message,
.alert-success {
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
    border-radius: var(--brand-radius) !important;
    padding: 1rem !important;
}

.error-message,
.alert-error,
.alert-danger {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    border-radius: var(--brand-radius) !important;
    padding: 1rem !important;
}

/* 登录注册 */
.login-box,
.auth-box {
    max-width: 28rem;
    margin: 2rem auto;
    padding: 2.5rem !important;
}

.auth-page {
    padding: 2rem 1rem;
}

/* 后台管理 */
.admin-header {
    background: #1a1a1a !important;
    border-radius: var(--brand-radius-lg) !important;
    box-shadow: var(--brand-shadow) !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.admin-header h1 {
    color: #fff !important;
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

.admin-nav a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
    border-radius: 9999px !important;
    padding: 0.5rem 1rem !important;
}

.admin-nav a:hover {
    background: rgba(255, 240, 0, 0.2) !important;
    color: #fff !important;
    transform: none !important;
}

.admin-nav a.active {
    background: var(--brand-yellow) !important;
    color: var(--brand-grey) !important;
    font-weight: 700 !important;
}

.admin-main,
.admin-content {
    background: #fff !important;
    border-radius: var(--brand-radius-lg) !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: var(--brand-shadow) !important;
}

.admin-table th {
    background: var(--brand-light) !important;
    color: var(--brand-grey) !important;
}

.admin-table tr:hover {
    background: #fffef0 !important;
}

.stat-card {
    border-radius: var(--brand-radius-lg) !important;
    border: 1px solid #f0f0f0 !important;
}

.stat-card .stat-value {
    color: var(--brand-grey) !important;
}

/* 设计师/买家中心 */
.center-sidebar,
.dashboard-sidebar {
    background: #1a1a1a !important;
    border-radius: var(--brand-radius-lg) !important;
}

.center-sidebar a.active,
.dashboard-sidebar a.active {
    background: var(--brand-yellow) !important;
    color: var(--brand-grey) !important;
}

.center-main,
.dashboard-main {
    background: #fff !important;
    border-radius: var(--brand-radius-lg) !important;
    border: 1px solid #f0f0f0 !important;
}

/* Banner 区域 */
.banner-section,
.site-banner {
    border-radius: var(--brand-radius-lg) !important;
    overflow: hidden;
}

/* 内页内容区 */
.designs-page,
.showcase-page,
.requirement-page {
    max-width: var(--bph-content-max);
    margin: 0 auto;
    padding: 0 var(--bph-content-pad) 2rem;
}

#page-main {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 5rem);
}

/* 供应商/品牌商黄页卡片 */
.suppliers-yellow-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.supplier-yellow-card {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 1.5rem !important;
    padding: 1.5rem !important;
    box-shadow: var(--brand-shadow) !important;
    transition: transform 0.3s, border-color 0.3s;
}

.supplier-yellow-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-yellow) !important;
}

.supplier-logo-yellow {
    background: var(--brand-light) !important;
    border-radius: 1rem !important;
}

.logo-placeholder {
    color: var(--brand-grey) !important;
    font-weight: 900;
}

.channel-select-card {
    border-radius: 1.5rem !important;
    border: 1px solid #f0f0f0 !important;
    padding: 2rem !important;
    background: #fff !important;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.channel-select-card h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-grey);
    margin: 0.75rem 0;
}

.channel-select-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.channel-select-features li {
    padding: 0.25rem 0;
}

.channel-select-card:hover {
    border-color: var(--brand-yellow) !important;
    box-shadow: var(--brand-shadow) !important;
}

.btn-select-channel {
    background: var(--brand-yellow) !important;
    color: var(--brand-grey) !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
}

/* —— 内页列表：多行多列 Grid，禁止纵向单列（首页无 #navbar 不受影响）—— */
body.site-with-navbar .design-grid,
body.site-with-navbar .design-list,
body.site-with-navbar .user-grid,
body.site-with-navbar .product-grid,
body.site-with-navbar .showcase-grid,
body.site-with-navbar .designers-grid,
body.site-with-navbar .suppliers-yellow-pages,
body.site-with-navbar .designers-list-pages,
body.site-with-navbar .designs-scheme-pages,
body.site-with-navbar .bph-record-grid,
body.site-with-navbar .files-page .bph-record-grid {
    display: grid !important;
    gap: 1.25rem !important;
    width: 100% !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

body.site-with-navbar .suppliers-yellow-pages,
body.site-with-navbar .designers-list-pages,
body.site-with-navbar .designs-scheme-pages {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    padding: 0 !important;
}

@media (min-width: 769px) {
    body.site-with-navbar .suppliers-yellow-pages,
    body.site-with-navbar .designers-list-pages,
    body.site-with-navbar .designs-scheme-pages {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }

    body.site-with-navbar .designers-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    body.site-with-navbar .suppliers-yellow-pages,
    body.site-with-navbar .designers-list-pages,
    body.site-with-navbar .designs-scheme-pages {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    body.site-with-navbar .design-grid,
    body.site-with-navbar .design-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

body.site-with-navbar .design-grid > .design-card,
body.site-with-navbar .design-list > *,
body.site-with-navbar .designers-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 640px) {
    body.site-with-navbar .suppliers-yellow-pages,
    body.site-with-navbar .designers-list-pages,
    body.site-with-navbar .designs-scheme-pages {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    body.site-with-navbar .designers-grid,
    body.site-with-navbar .design-grid,
    body.site-with-navbar .design-list,
    body.site-with-navbar .bph-record-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.site-with-navbar .supplier-yellow-card.supplier-card-large,
    body.site-with-navbar .supplier-yellow-card.supplier-card-small {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: unset !important;
    }

    body.site-with-navbar .designer-card-link.designer-card-large {
        grid-column: span 2 !important;
        width: auto !important;
        max-width: none !important;
        flex: unset !important;
    }

    body.site-with-navbar .designer-card-link.designer-card-small {
        grid-column: span 1 !important;
        width: auto !important;
        max-width: none !important;
        flex: unset !important;
    }
}

@media (min-width: 1024px) {
    body.site-with-navbar .design-grid,
    body.site-with-navbar .design-list {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}

@media (max-width: 380px) {
    body.site-with-navbar .design-grid,
    body.site-with-navbar .designers-grid,
    body.site-with-navbar .bph-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    body.site-with-navbar .design-card img {
        height: 130px !important;
    }

    body.site-with-navbar .design-info {
        padding: 0.65rem !important;
    }
}

/* 买家/设计师中心 */
.buyer-center-page .stats-grid,
.designer-center-page .stats-grid,
.buyer-center .stats-grid,
.designer-center .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

.buyer-center-page .content-grid,
.designer-center-page .content-grid,
.buyer-center .content-grid,
.designer-center .content-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 1.25rem !important;
}

.buyer-center-page .stat-card,
.buyer-center-page .content-card,
.bph-record-card {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--brand-shadow) !important;
    padding: 1.25rem !important;
}

.bph-record-card:hover {
    border-color: var(--brand-yellow) !important;
    transform: translateY(-2px);
}

.bph-record-title {
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
}

.bph-record-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}

.bph-record-meta dt {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0;
}

.bph-record-meta dd {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--brand-grey);
    font-weight: 600;
}

.bph-record-meta dd.positive { color: #16a34a; }
.bph-record-meta dd.negative { color: #dc2626; }

.bph-record-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.bph-record-actions a {
    color: var(--brand-grey) !important;
    font-weight: 600;
    font-size: 0.875rem;
}

/* 表格列表改为卡片 grid 后隐藏表头表格 */
.content-card .data-table.bph-as-grid,
.files-card .data-table.bph-as-grid {
    display: none !important;
}

.category-filter,
.filter-tabs,
.tabs-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}