/* 商家后台前台样式：与后台 skin-black-blue 风格一致，移动优先自适应 */
:root {
    --shop-primary: #3c8dbc;
    --shop-dark: #222d32;
    --shop-dark-2: #2c3b41;
    --shop-border: #e4e8eb;
    --shop-text: #333;
    --shop-muted: #8a9299;
}

* { box-sizing: border-box; }

body.shop-body {
    margin: 0;
    background: #ecf0f5;
    color: var(--shop-text);
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
    font-size: 14px;
    padding-top: 50px;
}

/* ---------- 顶栏 ---------- */
.shop-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 50px;
    background: var(--shop-primary);
    z-index: 1030;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.shop-topbar-inner {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
.shop-nav-toggle {
    background: none;
    border: 0;
    color: #fff;
    font-size: 18px;
    width: 38px;
    height: 38px;
    border-radius: 3px;
    cursor: pointer;
}
.shop-nav-toggle:hover { background: rgba(0,0,0,.1); }
.shop-brand {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}
.shop-brand:hover, .shop-brand:focus { color: #fff; text-decoration: none; }
.shop-brand i { margin-right: 6px; }
.shop-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.shop-user-name { color: rgba(255,255,255,.9); font-size: 13px; }
.shop-topbar-link {
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 13px;
}
.shop-topbar-link:hover, .shop-topbar-link:focus { color: #fff; background: rgba(0,0,0,.1); text-decoration: none; }

/* ---------- 侧栏 ---------- */
.shop-sidebar {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 210px;
    background: var(--shop-dark);
    overflow-y: auto;
    z-index: 1025;
    transition: transform .25s ease;
}
.shop-sidebar-head {
    padding: 18px 15px;
    background: var(--shop-dark-2);
    text-align: center;
}
.shop-avatar {
    width: 52px; height: 52px;
    line-height: 52px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 22px;
}
.shop-sidebar-name { color: #fff; font-size: 14px; font-weight: 600; word-break: break-all; }
.shop-sidebar-sub { color: var(--shop-muted); font-size: 12px; margin-top: 3px; }
.shop-menu { list-style: none; margin: 8px 0 0; padding: 0; }
.shop-menu > li > a {
    display: block;
    padding: 12px 15px;
    color: #b8c7ce;
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: 14px;
}
.shop-menu > li > a i { width: 20px; margin-right: 6px; text-align: center; }
.shop-menu > li > a:hover { background: #1e282c; color: #fff; }
.shop-menu > li.active > a {
    background: #1e282c;
    color: #fff;
    border-left-color: var(--shop-primary);
}
.shop-sidebar-foot { padding: 12px 15px 24px; }
.shop-sidebar-foot a { color: var(--shop-muted); font-size: 13px; text-decoration: none; }
.shop-sidebar-foot a:hover { color: #fff; }
.shop-nav-mask {
    display: none;
    position: fixed;
    top: 50px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4);
    z-index: 1024;
}

/* ---------- 主体 ---------- */
.shop-main {
    margin-left: 210px;
    padding: 15px;
    min-height: calc(100vh - 50px);
}
.shop-page-title {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 500;
}
.shop-page-title small { color: var(--shop-muted); font-size: 13px; margin-left: 8px; }
.shop-footer {
    margin-top: 25px;
    padding-top: 12px;
    border-top: 1px solid var(--shop-border);
    color: var(--shop-muted);
    font-size: 12px;
    text-align: center;
}

/* ---------- 卡片 / 统计 ---------- */
.shop-card {
    background: #fff;
    border: 1px solid var(--shop-border);
    border-radius: 3px;
    margin-bottom: 15px;
}
.shop-card-head {
    padding: 10px 15px;
    border-bottom: 1px solid var(--shop-border);
    font-weight: 600;
}
.shop-card-head .pull-right { font-weight: 400; font-size: 13px; }
.shop-card-body { padding: 15px; }
.shop-stat-row { display: flex; flex-wrap: wrap; margin: 0 -6px 5px; }
.shop-stat-col { width: 25%; padding: 0 6px 12px; }
.shop-stat {
    background: #fff;
    border: 1px solid var(--shop-border);
    border-radius: 3px;
    border-top: 3px solid var(--shop-primary);
    padding: 14px 12px;
    height: 100%;
}
.shop-stat.is-green { border-top-color: #00a65a; }
.shop-stat.is-yellow { border-top-color: #f39c12; }
.shop-stat.is-red { border-top-color: #dd4b39; }
.shop-stat-label { color: var(--shop-muted); font-size: 12px; margin-bottom: 6px; }
.shop-stat-value { font-size: 22px; font-weight: 600; line-height: 1.2; word-break: break-all; }
.shop-stat-value small { font-size: 13px; font-weight: 400; color: var(--shop-muted); }

/* ---------- 表格 ---------- */
.shop-table { width: 100%; background: #fff; border-collapse: collapse; }
.shop-table th, .shop-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--shop-border);
    font-size: 13px;
    vertical-align: middle;
    text-align: left;
}
.shop-table th { background: #f7f9fa; font-weight: 600; white-space: nowrap; }
.shop-table tbody tr:hover { background: #f9fbfc; }
.shop-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shop-empty { text-align: center; color: var(--shop-muted); padding: 30px 10px; }

/* ---------- 筛选表单 ---------- */
.shop-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.shop-filter .shop-filter-item { flex: 0 1 190px; min-width: 150px; }
.shop-filter label { display: block; font-size: 12px; color: var(--shop-muted); margin-bottom: 4px; font-weight: 400; }
.shop-filter .form-control { height: 34px; }
.shop-filter-btns { display: flex; gap: 8px; flex: 0 0 auto; }

/* ---------- 徽标 ---------- */
.shop-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
    background: var(--shop-muted);
    white-space: nowrap;
}
.shop-badge.is-green { background: #00a65a; }
.shop-badge.is-yellow { background: #f39c12; }
.shop-badge.is-red { background: #dd4b39; }
.shop-badge.is-blue { background: var(--shop-primary); }

/* ---------- 收款码卡片 ---------- */
.shop-qr-grid { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.shop-qr-col { width: 33.3333%; padding: 0 7px 14px; }
.shop-qr-card {
    background: #fff;
    border: 1px solid var(--shop-border);
    border-radius: 3px;
    padding: 14px;
    height: 100%;
    text-align: center;
}
.shop-qr-card img { width: 100%; max-width: 190px; margin: 0 auto 10px; display: block; }
.shop-qr-title { font-weight: 600; margin-bottom: 6px; }
.shop-qr-meta { font-size: 12px; color: var(--shop-muted); text-align: left; line-height: 1.9; word-break: break-all; }
.shop-qr-actions { margin-top: 10px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

/* ---------- 详情表 ---------- */
.shop-detail { width: 100%; border-collapse: collapse; background: #fff; }
.shop-detail th, .shop-detail td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--shop-border);
    font-size: 13px;
    text-align: left;
}
.shop-detail th { width: 130px; background: #f7f9fa; font-weight: 600; color: #555; }

/* ---------- 分页 ---------- */
.shop-pager { text-align: center; margin-top: 12px; }
.shop-pager .pagination { margin: 0; flex-wrap: wrap; }

/* ---------- 提示条 ---------- */
.shop-tip {
    background: #f2f9fd;
    border: 1px solid #c8e4f5;
    border-radius: 3px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 15px;
}
.shop-tip.is-warn { background: #fdf7ee; border-color: #f5dfb8; }

/* ---------- 登录页 ---------- */
body.shop-login-body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #2c3b41 0%, #3c8dbc 100%);
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.shop-login-box { width: 100%; max-width: 380px; }
.shop-login-logo { text-align: center; color: #fff; margin-bottom: 18px; }
.shop-login-logo .shop-login-title { font-size: 22px; font-weight: 600; }
.shop-login-logo .shop-login-sub { font-size: 13px; opacity: .8; margin-top: 5px; }
.shop-login-card {
    background: #fff;
    border-radius: 4px;
    padding: 25px 22px;
    box-shadow: 0 8px 25px rgba(0,0,0,.2);
}
.shop-login-card .form-group { margin-bottom: 15px; }
.shop-login-card .form-control { height: 42px; font-size: 14px; }
.shop-login-btn {
    width: 100%;
    height: 42px;
    background: var(--shop-primary);
    border: 0;
    color: #fff;
    border-radius: 3px;
    font-size: 15px;
    cursor: pointer;
}
.shop-login-btn:hover { background: #367fa9; }
.shop-login-btn:disabled { opacity: .65; cursor: not-allowed; }
.shop-login-msg {
    display: none;
    margin-bottom: 15px;
    padding: 9px 12px;
    border-radius: 3px;
    font-size: 13px;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: #a94442;
}
.shop-login-captcha { display: flex; gap: 8px; align-items: stretch; }
.shop-login-captcha .form-control { flex: 1 1 auto; }
.shop-login-captcha img { height: 42px; border-radius: 3px; cursor: pointer; border: 1px solid var(--shop-border); }
.shop-login-foot { text-align: center; margin-top: 15px; font-size: 12px; color: rgba(255,255,255,.75); }
.shop-login-foot a { color: #fff; text-decoration: underline; }

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
    .shop-stat-col { width: 50%; }
    .shop-qr-col { width: 50%; }
}
@media (max-width: 767px) {
    .shop-sidebar { transform: translateX(-100%); box-shadow: 2px 0 8px rgba(0,0,0,.2); }
    body.shop-nav-open .shop-sidebar { transform: translateX(0); }
    body.shop-nav-open .shop-nav-mask { display: block; }
    .shop-main { margin-left: 0; padding: 12px; }
    .shop-page-title { font-size: 18px; }
    .shop-stat-value { font-size: 19px; }
    .shop-qr-col { width: 100%; }
    .shop-filter .shop-filter-item { flex: 1 1 100%; }
    .shop-filter-btns { flex: 1 1 100%; }
    .shop-filter-btns .btn { flex: 1 1 0; }
}
@media (max-width: 360px) {
    .shop-stat-value { font-size: 17px; }
}

/* ---------- 手机端：表格转卡片列表 ---------- */
@media (max-width: 767px) {
    .shop-table.is-stack { border-collapse: separate; border-spacing: 0; }
    .shop-table.is-stack thead { display: none; }
    .shop-table.is-stack tbody tr {
        display: block;
        border: 1px solid var(--shop-border);
        border-radius: 3px;
        margin-bottom: 10px;
        padding: 4px 0;
        background: #fff;
    }
    .shop-table.is-stack tbody tr:last-child { margin-bottom: 0; }
    .shop-table.is-stack tbody tr:hover { background: #fff; }
    .shop-table.is-stack td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        border: 0;
        padding: 7px 12px;
        text-align: right;
        word-break: break-all;
    }
    .shop-table.is-stack td:before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--shop-muted);
        font-size: 12px;
        text-align: left;
        white-space: nowrap;
    }
    .shop-table.is-stack td.is-main {
        display: block;
        text-align: left;
        font-weight: 600;
        border-bottom: 1px dashed var(--shop-border);
        padding-bottom: 8px;
        margin-bottom: 2px;
    }
    .shop-table.is-stack td.is-main:before { display: block; margin-bottom: 2px; font-weight: 400; }
    .shop-table.is-stack td.is-act { justify-content: flex-end; }
    .shop-table.is-stack td.is-act:before { display: none; }
    .shop-table.is-stack .shop-empty { display: block; text-align: center; }
    .shop-table.is-stack .shop-empty:before { display: none; }
    .shop-detail th { width: 96px; padding: 9px 10px; }
    .shop-detail td { padding: 9px 10px; }
}