/**
 * Aylaobuy Design System — 通用组件样式
 * 依赖 design-system.css 中的 Token，提供跨页面复用的基础组件类（按钮 / 卡片 / 输入框 / 徽标 / 板块标题）。
 * 需在引入本文件前先引入 design-system.css。
 */

.ay-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:var(--btn-radius);
    padding:var(--btn-padding-y) var(--btn-padding-x);
    font-weight:var(--btn-font-weight);
    font-size:var(--btn-font-size);
    font-family:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s;
}
.ay-btn:hover{ transform:translateY(-2px); }
.ay-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.ay-btn-primary{
    background:var(--btn-primary-bg);
    color:var(--btn-primary-color);
    box-shadow:var(--shadow-md);
}
.ay-btn-secondary{
    background:var(--btn-secondary-bg);
    color:var(--btn-secondary-color);
    border:var(--btn-secondary-border);
}
.ay-btn-secondary:hover{ border-color:var(--ay-gold); color:var(--ay-red); }
.ay-btn-accent{
    background:var(--btn-accent-bg);
    color:var(--btn-accent-color);
}
.ay-btn-gold{
    background:var(--ay-gradient-gold);
    color:#fff;
    box-shadow:var(--shadow-md);
}

.ay-btn-sub{
    display:block;
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-semibold);
    opacity:.85;
    margin-top:2px;
}
.ay-btn-block{
    display:flex;
    width:100%;
    padding-top:16px;
    padding-bottom:16px;
}

.ay-card{
    background:var(--card-bg);
    border:var(--card-border);
    border-radius:var(--card-radius);
    box-shadow:var(--card-shadow);
    padding:var(--card-padding);
}

/* ── 后台 Dashboard 统计卡片 ── */
.ay-stat-card{
    display:block;
    text-decoration:none;
    border-radius:var(--card-radius);
    padding:var(--card-padding);
    color:#fff;
    box-shadow:var(--card-shadow);
    height:100%;
    box-sizing:border-box;
}
.ay-stat-card-label{ font-size:var(--font-size-sm); opacity:.9; }
.ay-stat-card-value{ font-size:32px; font-weight:var(--font-weight-black); margin:6px 0; }
.ay-stat-card-sub{ font-size:var(--font-size-xs); opacity:.85; }
.ay-stat-card-red{ background:var(--ay-gradient-brand); }
.ay-stat-card-blue{ background:var(--ay-blue); }
.ay-stat-card-gold{ background:var(--ay-gradient-gold); }
.ay-stat-card-muted{ background:var(--ay-muted); }
.ay-stat-card-ok{ background:var(--ay-success); }
.ay-stat-card-danger{ background:var(--ay-danger); }

/* ── 后台数据表格 ── */
.ay-table{
    width:100%;
    border-collapse:collapse;
    background:var(--card-bg);
}
.ay-table th{
    background:var(--ay-blue);
    color:#fff;
    text-align:left;
    padding:10px 12px;
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-bold);
}
.ay-table td{
    padding:10px 12px;
    border-bottom:1px solid var(--ay-border);
    font-size:var(--font-size-sm);
}
.ay-table tbody tr:nth-child(even){ background:var(--ay-ivory); }
.ay-table tbody tr:hover{ background:#FBEFD9; }

.ay-input{
    width:100%;
    box-sizing:border-box;
    background:var(--input-bg);
    border:var(--input-border);
    border-radius:var(--input-radius);
    padding:var(--input-padding-y) var(--input-padding-x);
    font-size:var(--input-font-size);
    font-family:inherit;
}
.ay-input:focus{
    outline:none;
    border-color:var(--input-focus-border);
}

.ay-badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:var(--radius-pill);
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-bold);
}
.ay-badge-gold{ background:#FBF0D2; color:var(--ay-clay); border:1px solid #E7C876; }
.ay-badge-ok{ background:#E4F1EC; color:var(--ay-success); }
.ay-badge-danger{ background:#FBE4E2; color:var(--ay-danger); }
.ay-badge-primary{ background:var(--ay-blue); color:#fff; }
.ay-badge-info{ background:#E3EEF5; color:var(--ay-blue); }
.ay-badge-secondary{ background:#EFE9E0; color:var(--ay-muted); }

.ay-section-title{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:var(--space-lg) 0 var(--space-sm);
}
.ay-section-bar{
    display:inline-block;
    width:5px;
    height:16px;
    background:linear-gradient(180deg,var(--ay-red),var(--ay-gold));
    border-radius:3px;
}
.ay-section-title-lo{ font-size:19px; font-weight:var(--font-weight-black); color:var(--ay-ink); }
.ay-section-title-zh{ font-size:12px; color:var(--ay-muted); font-weight:600; }

/* ── 分页 ── */
.ay-pagination{
    display:flex;
    list-style:none;
    gap:6px;
    padding:0;
    margin:var(--space-md) 0 0;
    flex-wrap:wrap;
}
.ay-pagination li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 10px;
    border-radius:var(--radius-md);
    background:var(--card-bg);
    border:1px solid var(--ay-border);
    color:var(--ay-blue);
    text-decoration:none;
    font-weight:var(--font-weight-semibold);
    font-size:var(--font-size-sm);
    transition:all .15s;
    box-sizing:border-box;
}
.ay-pagination li a:hover{ border-color:var(--ay-gold); background:#FBEFD9; }
.ay-pagination li.active a{
    background:var(--ay-gradient-brand);
    border-color:transparent;
    color:#fff;
}