/* 2026-11-08 客户应收账款管理（只读汇总）
 * 2026-11-08 改版：暗黑为默认配色（与 funnystore 主题默认 dark 一致，避免首屏白闪），
 *                   浅色由 body[data-theme="light"] 覆盖
 */

/* 默认 = 暗黑 */
body {
    --cr-bg-card: #1e293b;
    --cr-bg-soft: #0b1220;
    --cr-border: #334155;
    --cr-border-soft: #263449;
    --cr-text: #e2e8f0;
    --cr-text-soft: #94a3b8;
    --cr-text-dim: #8b9bb4;
    --cr-head-bg: #134e4a;
    --cr-head-text: #99f6e4;
    --cr-due: #cbd5e1;
    --cr-paid: #34d399;
    --cr-bal: #f87171;
    --cr-hover: #24334a;
    --cr-input-bg: #0f172a;
    --cr-input-border: #475569;
    --cr-btn-bg: #2563eb;
    --cr-btn-text: #f8fafc;
    --cr-tag-bg: #334155;
    --cr-tag-text: #cbd5e1;
    --cr-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    --cr-warn-line: #f87171;
    --cr-rent-accent: #38bdf8;
    --cr-rent-due: #7dd3fc;
}

body[data-theme="light"] {
    --cr-bg-card: #ffffff;
    --cr-bg-soft: #f8fafc;
    --cr-border: #e5e7eb;
    --cr-border-soft: #eef2f7;
    --cr-text: #0f172a;
    --cr-text-soft: #6b7280;
    --cr-text-dim: #94a3b8;
    --cr-head-bg: #d9fbf8;
    --cr-head-text: #164e55;
    --cr-due: #334155;
    --cr-paid: #059669;
    --cr-bal: #dc2626;
    --cr-hover: #f8fafc;
    --cr-input-bg: #ffffff;
    --cr-input-border: #cbd5e1;
    --cr-btn-bg: #1d4ed8;
    --cr-btn-text: #ffffff;
    --cr-tag-bg: #f1f5f9;
    --cr-tag-text: #475569;
    --cr-shadow: 0 6px 18px rgba(24, 39, 75, .05);
    --cr-warn-line: #f87171;
    --cr-rent-accent: #0284c7;
    --cr-rent-due: #0369a1;
}

.cr-wrap { max-width: 1600px; margin: 0 auto; padding: 16px; }
.cr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.cr-head h1 { font-size: 22px; margin: 0 0 6px; color: var(--cr-text); }
.cr-head p { margin: 0; color: var(--cr-text-soft); font-size: 13px; }

/* 7 张卡：minmax(190px, 1fr) + auto-fit，
   金额长（如 ¥10,235,855.29 约 157px 宽）时才不会挤出卡片，
   也不像固定 7 列那样把每列压到 152px 导致溢出。 */
.cr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.cr-stat { background: var(--cr-bg-card); border: 1px solid var(--cr-border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--cr-shadow); min-width: 0; }
.cr-stat__label { font-size: 12px; color: var(--cr-text-soft); margin-bottom: 6px; }
.cr-stat__value { font-size: 22px; font-weight: 700; color: var(--cr-text); font-variant-numeric: tabular-nums; }
.cr-stat__sub { font-size: 11px; color: var(--cr-text-dim); margin-top: 4px; }
.cr-stat--ok .cr-stat__value { color: var(--cr-paid); }
.cr-stat--warn .cr-stat__value { color: var(--cr-bal); }
/* 设备租金统计卡：左侧描边区分于商品订单 */
.cr-stat--rent { border-left: 3px solid var(--cr-rent-accent); }
.cr-stat--rent.cr-stat--ok { border-left-color: var(--cr-paid); }
.cr-stat--rent.cr-stat--warn { border-left-color: var(--cr-bal); }

.cr-toolbar { background: var(--cr-bg-card); border: 1px solid var(--cr-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cr-toolbar label { font-size: 12px; color: var(--cr-text-soft); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.cr-toolbar input[type="text"], .cr-toolbar input[type="number"], .cr-toolbar select {
    padding: 6px 10px; border: 1px solid var(--cr-input-border); border-radius: 6px; font-size: 13px;
    background: var(--cr-input-bg); color: var(--cr-text);
}
.cr-toolbar input[type="checkbox"] { accent-color: var(--cr-btn-bg); }
/* 客户名输入框：桌面固定 170px，手机由 @media 改成自适应（用 class 而非内联样式，
   内联 style 会盖掉媒体查询） */
.cr-toolbar .cr-input-key { width: 170px; }
.cr-toolbar button { padding: 6px 18px; background: var(--cr-btn-bg); color: var(--cr-btn-text); border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.cr-toolbar button:hover { filter: brightness(1.08); }
.cr-toolbar .cr-toolbar__spacer { flex: 1; }
.cr-toolbar .cr-toolbar__link { font-size: 12px; color: var(--cr-text-soft); text-decoration: none; }
.cr-toolbar .cr-toolbar__link:hover { color: var(--cr-head-text); text-decoration: underline; }
/* 操作区：桌面端横向排在一行末尾。
   注意：不能给 flex:1 1 auto —— 之前加了"租金口径"下拉后，
   基础宽度撑不下导致整个工具栏换行成两行。 */
.cr-toolbar__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.cr-panel { background: var(--cr-bg-card); border: 1px solid var(--cr-border); border-radius: 10px; overflow: hidden; }
.cr-panel__head { padding: 14px 18px; border-bottom: 1px solid var(--cr-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cr-panel__head h2 { font-size: 16px; margin: 0; color: var(--cr-text); }
.cr-panel__head span { font-size: 12px; color: var(--cr-text-soft); }
.cr-scroll { overflow: auto; max-height: 66vh; }

.cr-table { width: 100%; min-width: 1500px; border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--cr-text); }
.cr-table th, .cr-table td { padding: 9px 10px; border-right: 1px solid var(--cr-border-soft); border-bottom: 1px solid var(--cr-border-soft); text-align: left; white-space: nowrap; }
.cr-table th { position: sticky; top: 0; z-index: 2; background: var(--cr-head-bg); color: var(--cr-head-text); font-weight: 700; }
.cr-table th.cr-th-customer, .cr-table td.cr-td-customer { position: sticky; left: 0; z-index: 1; background: var(--cr-bg-card); }
.cr-table th.cr-th-customer { z-index: 3; background: var(--cr-head-bg); }
.cr-table tbody tr:hover td { background: var(--cr-hover); }
.cr-table tbody tr:hover td.cr-td-customer { background: var(--cr-hover); }
.cr-table tr.cr-row--warn td.cr-td-customer { box-shadow: inset 3px 0 0 var(--cr-warn-line); }

/* 客户列：客户名可能很长（实测撑到 460px），限宽 + 换行，
   否则粘性列比视口还宽时会把其它列全盖住 */
.cr-customer {
    font-weight: 650; color: var(--cr-text);
    min-width: 180px; max-width: 260px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.cr-customer .cr-sub { display: block; color: var(--cr-text-dim); font-size: 11px; font-weight: 400; margin-top: 2px; word-break: break-all; }
.cr-num { text-align: right; font-variant-numeric: tabular-nums; }
.cr-due { color: var(--cr-due); }
.cr-paid { color: var(--cr-paid); }
.cr-bal { color: var(--cr-bal); font-weight: 700; }
.cr-bal--ok { color: var(--cr-paid); font-weight: 600; }
.cr-bal--zero { color: var(--cr-text-dim); font-weight: 500; }
.cr-total { font-weight: 700; }

/* 设备租金列组：与商品订单区分（青色系） */
.cr-rent-due { color: var(--cr-rent-due); }
.cr-rent-paid { color: var(--cr-paid); }
.cr-table th.cr-th-rent { color: var(--cr-rent-due); }
.cr-table td.cr-rent-due { color: var(--cr-rent-due) !important; }
.cr-table td.cr-rent-paid { color: var(--cr-paid) !important; }

.cr-month { min-width: 132px; }
.cr-month b { display: block; font-size: 12px; font-weight: 600; }
.cr-month small { display: block; font-size: 11px; margin-top: 2px; }
.cr-month-empty { color: var(--cr-text-dim); }

.cr-tag { display: inline-block; border-radius: 20px; padding: 2px 8px; background: var(--cr-tag-bg); color: var(--cr-tag-text); font-size: 11px; }

.cr-notice { background: var(--cr-bg-card); border: 1px solid var(--cr-border); border-radius: 10px; }
.cr-notice--deny { background: rgba(220, 38, 38, .08); border-color: rgba(248, 113, 113, .45); color: var(--cr-bal); }
.cr-notice--deny input { background: var(--cr-input-bg); color: var(--cr-text); border: 1px solid var(--cr-input-border); border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.cr-notice a { color: var(--cr-head-text); text-decoration: underline; }

.cr-empty { padding: 44px 20px; text-align: center; color: var(--cr-text-soft); }
.cr-foot { margin: 12px 2px 0; font-size: 12px; color: var(--cr-text-soft); line-height: 1.7; }
.cr-foot code { background: var(--cr-tag-bg); color: var(--cr-tag-text); padding: 1px 6px; border-radius: 4px; }

/* ============================================================
 * 2026-11-11 手机版
 * 问题（实测 390px）：
 *   1) 表格 22 列，横向滚动条滑块只占 12.9%，几乎看不到数据
 *   2) 客户粘性列实测 460px > 视口 364px → 永远盖住其它 21 列
 *   3) 统计卡 ¥10,232,620.29 溢出卡片
 *   4) 工具栏高 285px，查询/重置/导出被推到折叠线以下
 * 方案：手机走"卡片 + 展开月度明细"（PHP 按 UA 服务端只渲染卡片），桌面不变。
 * ============================================================ */

/* 复选框文案：手机/桌面各显示一份短的/完整的 */
.cr-only-mobile { display: none; }
.cr-hide-mobile { display: inline; }
/* 工具栏折叠（手机）：默认收起，点"筛选"展开 */
.cr-toolbar__toggle { display: none; }
.cr-toolbar__body { display: contents; }

/* --- 卡片列表（手机版主体） ---
   .cr-wrap--cards 由 PHP 按 UA/参数加在容器上，
   卡片版 = 隐藏宽表格 + 显示卡片。不用媒体查询判断，
   这样 ?mobile=1（窄屏桌面窗口）也能生效。 */
.cr-cards { display: none; }
.cr-wrap--cards .cr-scroll { display: none; }
.cr-wrap--cards .cr-cards { display: block; }

.cr-card {
    border-bottom: 1px solid var(--cr-border-soft);
    padding: 12px 14px;
}
.cr-card:last-child { border-bottom: 0; }
.cr-card--warn { box-shadow: inset 3px 0 0 var(--cr-warn-line); }

.cr-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cr-card__name {
    font-weight: 650; font-size: 15px; color: var(--cr-text);
    word-break: break-word; line-height: 1.35;
}
.cr-card__id { color: var(--cr-text-dim); font-size: 12px; font-weight: 400; margin-left: 4px; }
.cr-card__sub {
    color: var(--cr-text-dim); font-size: 12px; margin-top: 3px;
    word-break: break-all; line-height: 1.4;
}

/* 指标两列网格：标签 / 数值 */
.cr-card__grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    margin-top: 10px;
    font-size: 13px;
}
.cr-card__k { color: var(--cr-text-soft); white-space: nowrap; }
.cr-card__v {
    color: var(--cr-text); text-align: right;
    font-variant-numeric: tabular-nums; word-break: break-all;
}
/* 租金三项加左侧标记，和商品订单区分 */
.cr-card__k--rent { position: relative; padding-left: 9px; }
.cr-card__k--rent::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 3px; border-radius: 2px; background: var(--cr-rent-accent);
}

.cr-card__more { margin-top: 10px; }
.cr-card__more > summary {
    cursor: pointer; font-size: 12px; color: var(--cr-head-text);
    list-style: none; user-select: none;
    padding: 5px 0; display: inline-block;
}
.cr-card__more > summary::-webkit-details-marker { display: none; }
.cr-card__more > summary::before { content: '▸ '; }
.cr-card__more[open] > summary::before { content: '▾ '; }

.cr-card__months {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; margin-top: 6px;
}
.cr-card__month {
    background: var(--cr-bg-soft);
    border: 1px solid var(--cr-border-soft);
    border-radius: 8px; padding: 8px 10px;
}
.cr-card__month-h {
    font-size: 12px; font-weight: 700; color: var(--cr-head-text);
    margin-bottom: 4px;
}
.cr-card__month-l { font-size: 12px; color: var(--cr-text-soft); line-height: 1.6; }
.cr-card__month-l b { color: var(--cr-text); font-weight: 650; }
.cr-card__month-l--rent { border-top: 1px dashed var(--cr-border-soft); padding-top: 3px; margin-top: 3px; }
.cr-card__month-empty { color: var(--cr-text-dim); font-size: 12px; grid-column: 1 / -1; }

.cr-card--total { border-top: 1px solid var(--cr-border); }
.cr-card--total .cr-card__name { font-weight: 700; }

/* --- 手机断点 ---
   .cr-stats 用 auto-fit + minmax(190px,1fr) 自适应，
   桌面窄一点就自动少几列，不需要额外的 1400px 断点。 */
@media (max-width: 900px) {
    .cr-wrap { padding: 12px; }

    /* 统计卡：手机上改成横向紧凑条（1 行标签 + 1 行金额，7 张排 2 列 × 4 行太占高度） */
    .cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 6px 0; }
    .cr-stat { padding: 6px 9px; border-radius: 7px; box-shadow: none; }
    .cr-stat__label {
        font-size: 10px; margin-bottom: 1px; line-height: 1.3;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cr-stat__value { font-size: 14px; line-height: 1.25; }
    .cr-stat__sub { display: none; }

    /* 手机上复选框用短文案 */
    .cr-hide-mobile { display: none; }
    .cr-only-mobile { display: inline; }

    /* 工具栏：手机上默认收起，点"筛选"才展开（首屏直接看到数据） */
    .cr-toolbar {
        flex-direction: row; flex-wrap: wrap; align-items: center;
        gap: 6px 10px; padding: 8px 10px; margin-bottom: 8px;
    }
    .cr-toolbar__toggle {
        display: inline-flex; align-items: center; gap: 6px;
        width: 100%; justify-content: center;
        padding: 8px 12px; font-size: 14px; font-weight: 600;
        background: var(--cr-btn-bg); color: var(--cr-btn-text);
        border: 0; border-radius: 6px; cursor: pointer;
    }
    .cr-toolbar__toggle::after { content: '▾'; font-size: 11px; }
    .cr-toolbar__toggle[aria-expanded="true"]::after { content: '▴'; }
    /* 收起时整个 body 隐藏 */
    .cr-toolbar__body { display: none; }
    .cr-toolbar__body.cr-toolbar__body--open {
        display: flex; flex-direction: column; align-items: stretch;
        gap: 8px; width: 100%; padding-top: 8px;
        border-top: 1px solid var(--cr-border-soft);
    }
    .cr-toolbar__body--open label { width: 100%; }
    .cr-toolbar__body--open select,
    .cr-toolbar__body--open input[type="text"] { max-width: 100%; width: 100%; }

    .cr-toolbar label {
        display: flex; align-items: center; gap: 6px;
        width: auto; flex: 0 0 auto;
    }
    .cr-toolbar input[type="text"],
    .cr-toolbar input[type="number"],
    .cr-toolbar select {
        min-width: 0; width: auto; padding: 6px 8px; font-size: 13px;
    }
    /* 客户输入：占满一行 */
    .cr-toolbar__key { flex: 1 1 100%; }
    .cr-toolbar .cr-input-key { flex: 1; width: auto; max-width: none; font-size: 14px; }
    /* 年份 / 租金口径 / 排序：各占一个窄列 */
    .cr-toolbar select { flex: 0 1 auto; }
    .cr-toolbar button { padding: 7px 16px; font-size: 14px; }
    .cr-toolbar .cr-toolbar__spacer { display: none; }
    .cr-toolbar__link { font-size: 13px; }
    /* 手机上：操作按钮一行排开，都在首屏内 */
    .cr-toolbar__actions {
        display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
        flex: 1 1 100%; justify-content: flex-start;
        padding-top: 6px; margin-top: 2px;
        border-top: 1px solid var(--cr-border-soft);
    }
    .cr-toolbar__actions button { flex: 0 0 auto; }

    /* 面板标题竖排 */
    .cr-panel__head { padding: 12px 14px; }
    .cr-panel__head h2 { font-size: 15px; }
    .cr-panel__head span { font-size: 11px; }

    /* 标题区压缩 */
    .cr-head { margin: 2px 0 0; }
    .cr-head h1 { font-size: 18px; margin-bottom: 2px; }
    .cr-head p { font-size: 12px; }

    /* 主题切换按钮是 position:fixed 固定在右上角（z-index:10000），
       会压住 .mobile-header 里的标题（实测标题末字被切掉 ~4px）。
       给标题右侧留出按钮宽度。 */
    .mobile-header { padding-right: 104px; }
    .mobile-header > span {
        font-size: 16px !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 100%;
    }

    /* 复选框那行文字很长，手机上让它独占一行并缩小 */
    .cr-toolbar label:has(input[type="checkbox"]) { flex: 1 1 100%; font-size: 11px; }

    /* 三个下拉：按内容宽度排，允许换行 */
    .cr-toolbar select { max-width: 46%; }

    /* 表格在手机上不渲染（服务端已按 UA 跳过），此处兜底隐藏 */
    .cr-scroll { display: none; }

    /* 月度明细：单列更易读 */
    .cr-card__months { grid-template-columns: minmax(0, 1fr); }

    .cr-foot { font-size: 11px; line-height: 1.8; }
}

/* 窄屏（<=420px）：指标网格的标签列收窄 */
@media (max-width: 420px) {
    .cr-stat__value { font-size: 15px; }
    .cr-card__grid { gap: 4px 8px; font-size: 12.5px; }
}

/* 暗黑细滚动条（默认），浅色回归原生 */
.cr-scroll { scrollbar-color: #475569 #0b1220; }
.cr-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cr-scroll::-webkit-scrollbar-track { background: #0b1220; }
.cr-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 6px; }
body[data-theme="light"] .cr-scroll { scrollbar-color: #cbd5e1 #f8fafc; }
body[data-theme="light"] .cr-scroll::-webkit-scrollbar-track { background: #f8fafc; }
body[data-theme="light"] .cr-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* funnystore_theme.css 在本页 CSS 之后加载，且对 table/th/td/button 用了
   body[data-theme="dark"] xxx !important（权重 0,1,2）。
   这里用 body[data-theme] 前缀把权重提到 0,2,x，保证本页语义色不被全局染色覆盖 */
body[data-theme] .cr-toolbar button,
body[data-theme] .cr-toolbar button:hover {
    background: var(--cr-btn-bg) !important;
    color: var(--cr-btn-text) !important;
    border: 0 !important;
}
body[data-theme] .cr-table th,
body[data-theme] .cr-table th.cr-th-customer {
    background: var(--cr-head-bg) !important;
    color: var(--cr-head-text) !important;
    border-color: var(--cr-border-soft) !important;
}
body[data-theme] .cr-table td { border-color: var(--cr-border-soft) !important; }
body[data-theme] .cr-table td.cr-td-customer { background: var(--cr-bg-card) !important; }
body[data-theme] .cr-table tbody tr:hover td { background: var(--cr-hover) !important; }
body[data-theme] .cr-table tbody tr:hover td.cr-td-customer { background: var(--cr-hover) !important; }
body[data-theme] .cr-table td.cr-customer { color: var(--cr-text) !important; }
body[data-theme] .cr-table td.cr-due { color: var(--cr-due) !important; }
body[data-theme] .cr-table td.cr-paid { color: var(--cr-paid) !important; }
body[data-theme] .cr-table td.cr-bal { color: var(--cr-bal) !important; }
body[data-theme] .cr-table td.cr-bal--ok { color: var(--cr-paid) !important; }
body[data-theme] .cr-table td.cr-bal--zero { color: var(--cr-text-dim) !important; }