/* ==========================================================
   羊奶门店寄存管理系统 - 门店风格样式
   原则：低对比、大字号、按钮大、操作路径短
   ========================================================== */

/* ----------------------------------------------------------
   VI 色板（取自品牌 logo）
   主色  #004EA2  深蓝（logo 主体、CHILVER 色块）
   辅色  #D8D24E  黄绿（logo 背景圈，仅小面积点缀）
   换品牌色只需改本节 6 个变量，全站同步生效
   ---------------------------------------------------------- */
:root {
    --yn-primary: #004EA2;          /* 品牌主色：深蓝 */
    --yn-primary-dark: #003A7A;     /* 主色加深：悬停、渐变末端 */
    --yn-primary-light: #E8F0FA;    /* 主色淡底：徽章、选中行 */
    --yn-accent: #D8D24E;           /* 品牌辅色：黄绿，仅点缀 */
    --yn-side: #0F3355;             /* 侧栏背景：品牌深蓝 */
    --yn-side-hover: #17456F;       /* 侧栏悬停 */
    --yn-border: #e6e8eb;
    --yn-text: #2c3038;
    --yn-muted: #8a94a0;
    --yn-bg: #f4f6f8;
    --yn-danger: #e04b4b;
    --yn-warn: #e6a23c;

    /* VI 橘色：生日提醒等"需要被注意到"的提示专用，不参与主色体系 */
    --yn-orange: #E8802A;           /* 徽章、通知点、标题条 */
    --yn-orange-dark: #C4661A;      /* 正文文字、按钮悬停 */
    --yn-orange-light: #FDF1E3;     /* 浅底：提醒条、卡片 */
    --yn-orange-border: #F6D3AC;    /* 浅底描边 */
}

body.yn-body {
    background: var(--yn-bg);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--yn-text);
}

/* ---------------- 顶部 ---------------- */
.layui-header.yn-header {
    background: #fff;
    border-bottom: 1px solid var(--yn-border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
    padding-right: 20px;
}

.yn-logo {
    float: left;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    overflow: hidden;
}

.yn-logo a {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    color: var(--yn-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
}

.yn-logo img {
    max-height: 34px;
    max-width: 150px;
    vertical-align: middle;
    margin-right: 6px;
}

.yn-logo i {
    font-size: 22px;
    margin-right: 6px;
    vertical-align: -2px;
}

.yn-header-nav > li > a {
    color: var(--yn-text) !important;
    font-size: 14px;
}

.yn-header-nav .layui-nav-child a {
    color: var(--yn-text);
}

.yn-quick > a {
    color: var(--yn-primary) !important;
    font-weight: 500;
}

.yn-role-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    font-style: normal;
    color: var(--yn-primary);
    background: var(--yn-primary-light);
    border-radius: 3px;
    vertical-align: 1px;
}

/* ---------------- 左侧菜单 ---------------- */
.layui-side.yn-side {
    background: var(--yn-side);
}

.yn-side .layui-nav-tree {
    background: var(--yn-side);
    width: 100%;
}

.yn-side .layui-nav-item a {
    color: #c6cfd8;
    font-size: 14px;
    height: 46px;
    line-height: 46px;
}

.yn-side .layui-nav-item a:hover {
    background: var(--yn-side-hover);
    color: #fff;
}

.yn-side .layui-nav-tree .layui-this > a {
    background: var(--yn-primary) !important;
    color: #fff !important;
}

.yn-side .layui-nav-tree .layui-this > a .layui-icon {
    color: #fff;
}

.yn-side .layui-nav-child dd a {
    padding-left: 45px !important;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
}

.yn-side .layui-nav-itemed > a {
    color: #fff !important;
    background: var(--yn-side-hover);
}

.yn-side .layui-icon {
    margin-right: 8px;
    color: #8fa3b5;
}

/* ---------------- 内容区 ---------------- */
.yn-content {
    padding: 15px;
    min-height: calc(100vh - 120px);
}

.yn-footer {
    color: var(--yn-muted);
    font-size: 12px;
    text-align: center;
    background: transparent;
}

/* ---------------- 卡片 ---------------- */
.yn-card {
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 4px;
    margin-bottom: 15px;
}

.yn-card-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--yn-border);
    font-size: 15px;
    font-weight: 600;
}

.yn-card-head .layui-btn {
    float: right;
    margin-top: -4px;
}

.yn-card-body {
    padding: 16px;
}

.yn-card-body.p0 {
    padding: 0;
}

/* ---------------- 搜索栏 ---------------- */
.yn-search {
    padding: 14px 16px 2px;
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 4px;
    margin-bottom: 12px;
}

.yn-search .layui-form-item {
    margin-bottom: 12px;
}

.yn-search .layui-input {
    height: 36px;
    line-height: 36px;
}

.yn-search .layui-btn {
    height: 36px;
    line-height: 36px;
}

/* ---------------- 统计卡片 ---------------- */
.yn-stat-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -7px 15px;
}

.yn-stat {
    flex: 1;
    min-width: 150px;
    margin: 0 7px 14px;
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 4px;
    padding: 16px 18px;
    border-left: 3px solid var(--yn-primary);
}

.yn-stat .num {
    font-size: 26px;
    font-weight: 600;
    color: var(--yn-text);
    line-height: 1.2;
}

.yn-stat .num small {
    font-size: 13px;
    font-weight: 400;
    color: var(--yn-muted);
    margin-left: 3px;
}

.yn-stat .label {
    font-size: 13px;
    color: var(--yn-muted);
    margin-top: 6px;
}

.yn-stat.is-warn {
    border-left-color: var(--yn-warn);
}

.yn-stat.is-danger {
    border-left-color: var(--yn-danger);
}

.yn-stat.is-primary {
    border-left-color: var(--yn-primary);
}

.yn-stat .num.c-warn {
    color: var(--yn-warn);
}

.yn-stat .num.c-danger {
    color: var(--yn-danger);
}

.yn-stat .num.c-primary {
    color: var(--yn-primary);
}

.yn-stat.is-orange {
    border-left-color: var(--yn-orange);
}

.yn-stat .num.c-orange {
    color: var(--yn-orange);
}

/* ---------------- 标签 ---------------- */
.yn-tag {
    display: inline-block;
    padding: 0 7px;
    height: 22px;
    line-height: 22px;
    border-radius: 3px;
    font-size: 12px;
    background: #f0f2f5;
    color: #69707a;
}

.yn-tag-green {
    background: #eaf6ef;
    color: #2f8f5b;
}

.yn-tag-blue {
    background: #ecf3fd;
    color: #2b6cd4;
}

.yn-tag-orange {
    background: #fdf3e7;
    color: #d18b2c;
}

.yn-tag-red {
    background: #fdecec;
    color: #d64b4b;
}

.yn-tag-gray {
    background: #f0f2f5;
    color: #8a94a0;
}

/* ---------------- 表格 ---------------- */
.yn-content .layui-table-view {
    margin: 0;
}

.layui-table th {
    background: #fafbfc;
    color: #5a6470;
    font-weight: 600;
}

.layui-table td, .layui-table th {
    font-size: 13px;
}

/* 手机号等关键信息加强显示 */
.yn-mobile {
    font-family: "SF Mono", Consolas, Monaco, monospace;
    font-weight: 500;
    letter-spacing: .3px;
}

/* ---------------- 表单 ---------------- */
.yn-form .layui-form-label {
    width: 90px;
    color: #5a6470;
}

.yn-form .layui-input-block {
    margin-left: 120px;
}

.yn-form .layui-input, .yn-form .layui-textarea, .yn-form .layui-select {
    height: 36px;
    line-height: 36px;
}

.yn-form .layui-textarea {
    height: auto;
    min-height: 80px;
}

.yn-required:after {
    content: " *";
    color: var(--yn-danger);
}

/* ---------------- 商品明细行 ---------------- */
.yn-item-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--yn-border);
}

.yn-item-table th {
    background: #fafbfc;
    padding: 9px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #5a6470;
    border-bottom: 1px solid var(--yn-border);
    text-align: left;
}

.yn-item-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.yn-item-table tr:last-child td {
    border-bottom: none;
}

.yn-item-table .layui-input {
    height: 34px;
    line-height: 34px;
}

.yn-item-table .num-input {
    width: 90px;
    text-align: center;
}

.yn-item-table .price-input {
    width: 100px;
}

.yn-item-row-empty td {
    text-align: center;
    color: var(--yn-muted);
    padding: 26px 0;
}

/* ---------------- 寄存单状态 ---------------- */
.yn-deposit-no {
    font-family: "SF Mono", Consolas, Monaco, monospace;
    font-size: 13px;
    color: #2b6cd4;
}

.yn-remain {
    font-weight: 600;
    color: var(--yn-primary);
    font-size: 15px;
}

.yn-remain.zero {
    color: var(--yn-muted);
    font-weight: 400;
}

/* ---------------- 通用工具类 ---------------- */
.yn-mt10 { margin-top: 10px; }
.yn-mt15 { margin-top: 15px; }
.yn-mb10 { margin-bottom: 10px; }
.yn-mb15 { margin-bottom: 15px; }
.yn-text-muted { color: var(--yn-muted); }
.yn-text-danger { color: var(--yn-danger); }
.yn-text-warn { color: var(--yn-warn); }
.yn-text-success { color: var(--yn-primary); }
.yn-fs12 { font-size: 12px; }
.yn-fs13 { font-size: 13px; }
.yn-tc { text-align: center; }
.yn-tr { text-align: right; }
.yn-fw { font-weight: 600; }

.yn-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--yn-muted);
    font-size: 13px;
}

.yn-empty .layui-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
    color: #d5dbe2;
}

/* ---------------- 登录页（V7：全屏背景图 + 玻璃卡片，移动端自适应） ---------------- */
.ynlg {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0a1230;
}

/* 背景图：cover 铺满，保证手机竖屏也不变形 */
.ynlg-bg {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.02);
}

/* 蒙版：让白色卡片和文字在任何图上都看得清 */
.ynlg-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(3, 16, 40, .88) 0%, rgba(24, 14, 58, .74) 45%, rgba(3, 16, 40, .9) 100%);
}

.ynlg-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 20px;
}

.ynlg-card {
    width: 400px;
    max-width: 100%;
    background: rgba(255, 255, 255, .975);
    border-radius: 14px;
    padding: 36px 34px 30px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ynlg-brand {
    text-align: center;
    margin-bottom: 26px;
}

.ynlg-brand img {
    max-height: 58px;
    max-width: 220px;
    margin-bottom: 12px;
}

.ynlg-brand .name {
    font-size: 21px;
    font-weight: 600;
    color: var(--yn-text);
    letter-spacing: .5px;
    line-height: 1.35;
}

.ynlg-brand .sub {
    font-size: 12px;
    color: var(--yn-muted);
    margin-top: 7px;
    letter-spacing: 1.5px;
}

.ynlg-field {
    position: relative;
    margin-bottom: 16px;
}

.ynlg-field .layui-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #b3bcc7;
    z-index: 2;
    pointer-events: none;
}

.ynlg-field input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    background: #fafbfc;
    font-size: 15px;
    color: var(--yn-text);
    outline: none;
    -webkit-appearance: none;
    transition: border-color .15s, background .15s;
}

.ynlg-field input:focus {
    border-color: var(--yn-primary);
    background: #fff;
}

.ynlg-field input::placeholder {
    color: #aeb6bf;
}

.ynlg-btn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    background: var(--yn-primary);
    color: #fff;
    font-size: 16px;
    letter-spacing: 3px;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background .15s;
}

.ynlg-btn:hover {
    background: var(--yn-primary-dark);
}

.ynlg-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.ynlg-tip {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    color: #9aa4b0;
    line-height: 1.7;
}

.ynlg-foot {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    line-height: 1.7;
}

/* ---------- 平板 ---------- */
@media screen and (max-width: 768px) {
    .ynlg-body {
        padding: 26px 16px 12px;
    }

    .ynlg-card {
        padding: 30px 24px 24px;
        border-radius: 12px;
    }

    .ynlg-brand {
        margin-bottom: 22px;
    }

    .ynlg-brand .name {
        font-size: 19px;
    }
}

/* ---------- 手机 ---------- */
@media screen and (max-width: 420px) {
    .ynlg-body {
        align-items: flex-start;
        padding: calc(30px + env(safe-area-inset-top)) 14px 10px;
    }

    .ynlg-card {
        width: 100%;
        padding: 26px 20px 22px;
    }

    .ynlg-brand img {
        max-height: 48px;
        margin-bottom: 8px;
    }

    .ynlg-brand .name {
        font-size: 18px;
    }

    /* iOS 上 input 字号小于 16px 会自动放大页面，这里统一压住 */
    .ynlg-field input {
        font-size: 16px;
        height: 46px;
        line-height: 46px;
    }

    .ynlg-btn {
        height: 46px;
        line-height: 46px;
        font-size: 16px;
    }

    .ynlg-foot {
        font-size: 11px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}

/* 横屏手机（高度很小）时不要撑太高 */
@media screen and (max-height: 480px) and (orientation: landscape) {
    .ynlg-body {
        align-items: flex-start;
        padding-top: 18px;
    }

    .ynlg-brand {
        margin-bottom: 14px;
    }

    .ynlg-brand img {
        max-height: 40px;
    }
}

/* ---------------- 打印 ---------------- */
@media print {
    .layui-header, .layui-side, .layui-footer, .yn-no-print {
        display: none !important;
    }
    .layui-body {
        left: 0 !important;
        top: 0 !important;
    }
    .yn-content {
        padding: 0;
    }
}

/* ---------------- 响应式 ---------------- */
@media screen and (max-width: 768px) {
    .yn-logo { width: auto; padding-left: 10px; }
    .yn-quick { display: none; }
    .yn-stat { min-width: 45%; }
}

/* ---------------- 单据详情弹窗 ---------------- */
.yn-detail {
    padding: 16px 18px;
}

.yn-detail-head {
    width: 100%;
    border-collapse: collapse;
}

.yn-detail-head th {
    width: 90px;
    text-align: right;
    padding: 7px 10px;
    color: #8a94a0;
    font-weight: 400;
    font-size: 13px;
    background: #fafbfc;
    border: 1px solid var(--yn-border);
}

.yn-detail-head td {
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid var(--yn-border);
    color: var(--yn-text);
}

.yn-detail-table th,
.yn-detail-table td {
    font-size: 13px;
    padding: 8px 10px;
}

/* ---------------- 寄存明细核销表 ---------------- */
.yn-pickup-table th,
.yn-pickup-table td {
    text-align: center;
}

.yn-pickup-table td:first-child,
.yn-pickup-table th:first-child {
    text-align: left;
}

.yn-remain-hl {
    color: var(--yn-primary);
    font-weight: 600;
    font-size: 15px;
}

/* ==========================================================
   VI 品牌主题：覆盖 layui 默认亮蓝（#1E9FFF）
   说明：admin.css 在 layui.css 之后加载，同类名规则后者胜出
   目的：让按钮、分页、开关、选中项统一为 logo 深蓝
   ========================================================== */

/* ---- 1. 主按钮：默认 / normal 统一为品牌蓝 ---- */
/* 用 :not 精确排除，避免误伤 primary / danger / warm / disabled */
.layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled) {
    background-color: var(--yn-primary);
}

.layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled):hover {
    background-color: var(--yn-primary-dark);
    color: #fff;
}

/* 线框按钮：悬停时用品牌蓝描边，代替 layui 默认绿 */
.layui-btn-primary:hover {
    border-color: var(--yn-primary);
    color: var(--yn-primary);
}

/* ---- 2. 表单：复选框 / 单选框 / 开关 ---- */
.layui-form-checked[lay-skin="primary"] i,
.layui-form-checkbox[lay-skin="primary"]:hover i,
.layui-form-checked i {
    border-color: var(--yn-primary) !important;
    background-color: var(--yn-primary);
}

.layui-form-radio > i:hover,
.layui-form-radioed > i {
    color: var(--yn-primary);
}

.layui-form-onswitch {
    border-color: var(--yn-primary);
    background-color: var(--yn-primary);
}

.layui-form-switch.layui-form-onswitch i {
    color: var(--yn-primary);
}

/* ---- 3. 输入框聚焦 ---- */
.layui-input:focus,
.layui-textarea:focus {
    border-color: var(--yn-primary) !important;
}

/* ---- 4. 下拉选择：选中项 ---- */
.layui-form-select dl dd.layui-this {
    background-color: var(--yn-primary);
}

.layui-form-select dl dd:hover {
    background-color: var(--yn-primary-light);
}

/* ---- 5. 选项卡 ---- */
.layui-tab-brief > .layui-tab-title .layui-this {
    color: var(--yn-primary);
}

.layui-tab-brief > .layui-tab-title .layui-this:after,
.layui-tab-brief > .layui-tab-more li.layui-this:after {
    border-bottom-color: var(--yn-primary);
}

/* ---- 6. 分页 ---- */
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: var(--yn-primary);
}

.layui-laypage a:hover,
.layui-laypage .layui-laypage-curr em {
    color: var(--yn-primary);
}

/* ---- 7. 表格：悬停与选中行 ---- */
.layui-table-view .layui-table tbody tr:hover,
.layui-table-hover {
    background-color: #f5f8fd;
}

.layui-table-click {
    background-color: var(--yn-primary-light) !important;
}

/* ---- 8. 数据表格的排序、复选框 ---- */
.layui-table-sort .layui-table-sort-asc:hover,
.layui-table-sort .layui-table-sort-desc:hover {
    border-top-color: var(--yn-primary);
}

/* ---- 9. 加载动画 ---- */
.layui-layer-loading .layui-layer-loading1,
.layui-anim-loading {
    color: var(--yn-primary);
}

/* ---- 10. 品牌辅助色：仅用于需要引起注意的小面积元素 ---- */
.yn-accent-bar {
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--yn-accent);
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: -2px;
}

/* ================================================================
   权限相关通用样式（店员与权限页、带权限提示的列表页共用）
   ================================================================ */

/* 提示条：列表页顶部的说明文字 */
.yn-tip-bar {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #3d4653;
    background: var(--yn-primary-light);
    border: 1px solid #cfe0f2;
    border-radius: 4px;
}

.yn-tip-bar .layui-icon {
    color: var(--yn-primary);
    font-size: 15px;
    margin-top: 3px;
}

/* 无权限的按钮统一隐藏（配合 common.js 的 YN.applyPerm） */
.yn-perm-hidden {
    display: none !important;
}


/* ================================================================
   会员跟进记录（客户列表弹窗 + 会员详情页共用）
   ================================================================ */

/* 弹窗顶部：会员姓名 + 手机号 */
.yn-fl-head {
    padding: 14px 20px;
    background: #f7f9fc;
    border-bottom: 1px solid var(--yn-border);
    font-size: 13px;
    color: var(--yn-muted);
}
.yn-fl-head b { color: #2c3038; font-size: 15px; margin-right: 10px; }

/* 弹窗内录入区 */
.yn-fl-form { padding: 14px 20px 10px; border-bottom: 1px dashed var(--yn-border); }
.yn-fl-row { display: flex; gap: 10px; align-items: flex-start; }
.yn-fl-row .date { width: 150px; flex: none; }
.yn-fl-row .txt { flex: 1; }

/* 弹窗内列表 */
.yn-fl-list { padding: 10px 20px 20px; max-height: 320px; overflow-y: auto; }

/* 时间线单条（弹窗与详情页共用） */
.yn-fl-item { position: relative; padding: 10px 0 10px 18px; border-left: 2px solid var(--yn-border); }
.yn-fl-item:before {
    content: '';
    position: absolute;
    left: -6px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--yn-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #c9d8ec;
}
.yn-fl-item .d,
.yn-fl-date { font-size: 12px; color: var(--yn-muted); }
.yn-fl-item .c,
.yn-fl-content {
    font-size: 14px;
    color: #2c3038;
    line-height: 1.65;
    margin: 3px 0 2px;
    word-break: break-all;
}
.yn-fl-item .op { position: absolute; right: 0; top: 8px; }
.yn-fl-item .op a { color: var(--yn-muted); font-size: 12px; margin-left: 8px; cursor: pointer; }
.yn-fl-item .op a:hover { color: var(--yn-primary); }

.yn-fl-empty { text-align: center; color: #a8b1bd; padding: 30px 0; font-size: 13px; }
.yn-fl-edit-tip { display: none; font-size: 12px; color: #c98a00; padding: 6px 20px 8px; }
.yn-fl-list-detail { max-width: 900px; }

/* ==========================================================
   生日提醒（右上角铃铛 / 弹窗 / 提醒页）
   配色统一走 VI 橘色，见 :root 的 --yn-orange*
   ========================================================== */

/* ---------------- 通用橘色按钮 ---------------- */
.layui-btn.yn-btn-orange {
    background: var(--yn-orange);
    color: #fff;
    border-color: var(--yn-orange);
}

.layui-btn.yn-btn-orange:hover {
    background: var(--yn-orange-dark);
    border-color: var(--yn-orange-dark);
    color: #fff;
}

/* ---------------- 右上角铃铛 ---------------- */
.yn-bell-btn {
    position: relative;
    display: block;
}

.yn-bell-btn .layui-icon {
    font-size: 20px;
    vertical-align: -2px;
    transition: color .2s;
}

.yn-bell-btn:hover .layui-icon {
    color: var(--yn-orange) !important;
}

.yn-bell-badge {
    position: absolute;
    top: 11px;
    right: 6px;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--yn-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    font-style: normal;
}

/* ---------------- 铃铛下拉面板 ---------------- */
.yn-bell-panel {
    position: absolute;
    top: 60px;
    right: 0;
    width: 384px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
    z-index: 2030;
    overflow: hidden;
    text-align: left;
    line-height: 1.5;
}

/* 抵消 layui 导航对 a 的白色/块级样式 */
/* 抵消 layui 导航对 a 的白色/块级样式
   选择器要压过 .layui-nav .layui-nav-item a，否则面板里的链接会变成白字看不见 */
.layui-nav .layui-nav-item .yn-bell-panel a,
.yn-bell-panel a {
    display: inline;
    padding: 0;
    color: var(--yn-primary);
    line-height: inherit;
}

.layui-nav .layui-nav-item .yn-bell-panel a:hover,
.layui-nav .layui-nav-item .yn-bell-panel a.layui-this,
.yn-bell-panel a:hover {
    color: var(--yn-orange-dark);
    background: none;
    opacity: 1;
}

.yn-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--yn-orange-light);
    border-bottom: 1px solid var(--yn-orange-border);
}

.yn-bell-head .ttl {
    font-size: 14px;
    font-weight: 600;
    color: var(--yn-orange-dark);
}

.yn-bell-head .ttl .layui-icon {
    margin-right: 4px;
    font-size: 15px;
}

.yn-bell-head .sub {
    font-size: 12px;
    color: #a1805d;
}

.yn-bell-list {
    max-height: 336px;
    overflow-y: auto;
}

.yn-bell-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f4f5f7;
    cursor: pointer;
    transition: background .15s;
}

.yn-bell-item:hover {
    background: #fafbfc;
}

.yn-bell-item .d {
    flex: 0 0 52px;
    width: 52px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--yn-orange-dark);
}

.yn-bell-item .d.today {
    background: var(--yn-orange);
    color: #fff;
    border-radius: 3px;
    padding: 3px 0;
}

.yn-bell-item .info {
    flex: 1;
    min-width: 0;
    padding-left: 8px;
}

.yn-bell-item .nm {
    font-size: 14px;
    color: var(--yn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yn-bell-item .mt {
    font-size: 12px;
    color: var(--yn-muted);
    margin-top: 2px;
}

.yn-bell-empty {
    padding: 28px 14px;
    text-align: center;
    color: #a8b1bd;
    font-size: 13px;
}

.yn-bell-foot {
    padding: 9px 14px;
    text-align: center;
    border-top: 1px solid var(--yn-border);
    background: #fafbfc;
}

.yn-bell-foot a {
    font-size: 13px;
}

/* ---------------- 生日弹窗 ---------------- */
.yn-bd-pop {
    font-family: inherit;
}

.yn-bd-pop-head {
    padding: 16px 20px 14px;
    background: var(--yn-orange);
    color: #fff;
}

.yn-bd-pop-head .t {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
}

.yn-bd-pop-head .t .layui-icon {
    margin-right: 6px;
    font-size: 17px;
    vertical-align: -1px;
}

.yn-bd-pop-head .s {
    font-size: 12px;
    opacity: .92;
    margin-top: 5px;
}

.yn-bd-pop-body {
    max-height: 360px;
    overflow-y: auto;
    padding-bottom: 6px;
}

.yn-bd-group {
    padding: 11px 20px 4px;
    font-size: 12px;
    color: var(--yn-muted);
    letter-spacing: .2px;
}

.yn-bd-row {
    display: flex;
    align-items: center;
    padding: 9px 20px;
    border-bottom: 1px solid #f5f6f8;
}

.yn-bd-row:last-child {
    border-bottom: 0;
}

.yn-bd-row .who {
    flex: 1;
    min-width: 0;
}

.yn-bd-row .who .nm {
    font-size: 14px;
    color: var(--yn-text);
    font-weight: 600;
}

.yn-bd-row .who .mt {
    font-size: 12px;
    color: var(--yn-muted);
    margin-top: 2px;
}

.yn-bd-row .who .mt .yn-mobile {
    font-size: 12px;
}

.yn-bd-row .act a {
    font-size: 13px;
    color: var(--yn-primary);
}

.yn-bd-pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-top: 1px solid var(--yn-border);
    background: #fafbfc;
}

.yn-bd-pop-foot .left {
    font-size: 12px;
    color: var(--yn-muted);
}

/* ---------------- 提醒页 ---------------- */
.yn-bd-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--yn-orange-light);
    border: 1px solid var(--yn-orange-border);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.75;
    color: #7a4a12;
}

.yn-bd-tip .layui-icon {
    color: var(--yn-orange);
    font-size: 17px;
    line-height: 1.5;
    flex: 0 0 auto;
}

.yn-bd-tip code {
    background: #fff;
    border: 1px solid var(--yn-orange-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
    color: var(--yn-orange-dark);
}

.yn-bd-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.yn-bd-channel {
    flex: 1;
    min-width: 220px;
    padding: 12px 14px;
    border: 1px solid var(--yn-border);
    border-radius: 4px;
    background: #fafbfc;
}

.yn-bd-channel.is-on {
    border-color: var(--yn-orange-border);
    background: var(--yn-orange-light);
}

.yn-bd-channel .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--yn-text);
}

.yn-bd-channel .state {
    font-size: 12px;
    color: var(--yn-muted);
    margin-top: 3px;
}

.yn-bd-channel .state.on {
    color: #2f8f5b;
}

.yn-bd-channel .url {
    font-size: 12px;
    color: #a8b1bd;
    margin-top: 6px;
    word-break: break-all;
    font-family: "SF Mono", Consolas, Monaco, monospace;
}

.yn-bd-cron {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--yn-border);
}

.yn-bd-cron .lb {
    font-size: 12px;
    color: var(--yn-muted);
    margin-bottom: 6px;
}

.yn-bd-cron code {
    background: #f0f2f5;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 12px;
}

/* V7：自助绑定页的分步引导 */
.yn-bd-steps {
    background: #f7f9fc;
    border: 1px solid #e8eef6;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.yn-bd-step {
    position: relative;
    padding-left: 30px;
    font-size: 13px;
    color: #4a5561;
    line-height: 1.75;
    margin-bottom: 8px;
}

.yn-bd-step:last-child {
    margin-bottom: 0;
}

.yn-bd-step b {
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: var(--yn-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

/* 表格里"距生日"和会员列表的生日标记 */
.yn-bd-days {
    display: inline-block;
    padding: 0 7px;
    height: 22px;
    line-height: 22px;
    border-radius: 3px;
    font-size: 12px;
    background: #f0f2f5;
    color: #69707a;
}

.yn-bd-days.is-soon {
    background: var(--yn-orange-light);
    color: var(--yn-orange-dark);
}

.yn-bd-days.is-urgent {
    background: #fdf0e2;
    color: #b8560d;
    font-weight: 600;
}

.yn-bd-days.is-today {
    background: var(--yn-orange);
    color: #fff;
    font-weight: 600;
}

.yn-bd-mark {
    margin-top: 2px;
    color: var(--yn-orange-dark);
    font-size: 12px;
    line-height: 1.3;
}

/* ---------------- 工作台生日卡片 ---------------- */
.yn-bd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.yn-bd-card-head .ttl .layui-icon {
    color: var(--yn-orange);
    margin-right: 5px;
}

.yn-bd-card-head .cnt {
    font-size: 12px;
    color: var(--yn-muted);
    font-weight: 400;
    margin-left: 8px;
}

@media screen and (max-width: 768px) {
    .yn-bell-panel {
        width: 320px;
    }
}

/* 生日提醒页的档位切换按钮（只作用于该页，避免影响其他按钮组） */
#dayGroup .layui-btn.layui-this {
    background: var(--yn-primary);
    border-color: var(--yn-primary);
    color: #fff;
}

/* 弹窗用自绘关闭按钮，避免 layui 默认白色标题区压在橘色头上 */
.layui-layer.yn-bd-pop-layer {
    border-radius: 6px;
    overflow: hidden;
}

.layui-layer.yn-bd-pop-layer .layui-layer-content {
    border-radius: 6px;
    overflow: hidden;
}

.yn-bd-pop-head {
    position: relative;
    padding-right: 46px;
}

.yn-bd-pop-x {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    font-size: 20px;
    font-family: Arial, sans-serif;
    color: #fff;
    opacity: .85;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s, opacity .15s;
    user-select: none;
}

.yn-bd-pop-x:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .2);
}

/* =====================================================================
   V7：销售出库 · 整单售价与分摊
   ===================================================================== */
.yn-sale-table th {
    white-space: nowrap;
}

.yn-sale-table td {
    vertical-align: middle;
}

.yn-sale-lack td {
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* 底部结算区：左边汇总、右边整单售价 */
.yn-sale-sum .yn-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
}

.yn-sale-sum-left {
    flex: 1 1 220px;
    min-width: 200px;
}

.yn-sale-sum-line {
    font-size: 13px;
    color: var(--yn-muted);
    line-height: 2;
}

.yn-sale-sum-line .lb {
    display: inline-block;
    min-width: 68px;
}

.yn-sale-sum-line .vl {
    font-size: 16px;
    font-weight: 600;
    color: var(--yn-text);
    font-family: "SF Mono", Consolas, Monaco, monospace;
}

.yn-sale-sum-right {
    flex: 0 0 auto;
    min-width: 260px;
    text-align: right;
}

.yn-sale-deal-label {
    display: block;
    font-size: 13px;
    color: var(--yn-muted);
    margin-bottom: 6px;
}

.yn-sale-deal-input {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--yn-primary);
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
    height: 48px;
}

.yn-sale-deal-input .cur {
    font-size: 18px;
    color: var(--yn-primary);
    margin-right: 4px;
    font-weight: 500;
}

.yn-sale-deal-input input {
    width: 168px;
    border: 0;
    outline: none;
    font-size: 24px;
    font-weight: 600;
    color: #e04b4b;
    text-align: right;
    background: transparent;
    font-family: "SF Mono", Consolas, Monaco, monospace;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.yn-sale-deal-input input::-webkit-outer-spin-button,
.yn-sale-deal-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.yn-sale-deal-tip {
    font-size: 12px;
    color: var(--yn-muted);
    margin-top: 8px;
    line-height: 1.6;
    max-width: 280px;
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .yn-sale-sum .yn-card-body {
        display: block;
    }

    .yn-sale-sum-right {
        text-align: left;
        margin-top: 14px;
    }

    .yn-sale-deal-input {
        width: 100%;
        box-sizing: border-box;
    }

    .yn-sale-deal-input input {
        width: 100%;
        flex: 1;
        font-size: 20px;
    }

    .yn-sale-deal-tip {
        margin-left: 0;
        max-width: none;
    }
}