/* ต้นแบบ inventory-buddy index.html <body> <style> (หน้า / modal) */

    #page-dashboard-ap .apd-section{ margin-bottom:18px; }
    #page-dashboard-ap .apd-2col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    #page-dashboard-ap .apd-2col.apd-2col-wide{ grid-template-columns:1.3fr 1fr; }
    #page-dashboard-ap .apd-kpi-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }

    /* ── KPI Strip cards — subtle tinted bg with colored icon accent ── */
    #page-dashboard-ap .apd-stat{
      text-align:center; padding:14px 10px;
      background:#f8f9ff; border:1px solid #e0e4f0; border-radius:10px;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    #page-dashboard-ap .apd-kpi-grid .apd-stat:hover{ border-color:#b0badd; box-shadow:0 2px 8px rgba(80,100,180,.08); }
    #page-dashboard-ap .apd-stat-label{ font-size:11px; color:var(--text-secondary); margin-bottom:4px; }
    #page-dashboard-ap .apd-stat-val{ font-size:16px; font-weight:700; font-family:'Noto Sans Thai',sans-serif; }

    /* ── KPI strip icon accent colors ── */
    #page-dashboard-ap .apd-stat:nth-child(1) { background:#eef6ff; border-color:#c7dff7; }
    #page-dashboard-ap .apd-stat:nth-child(1) i { color:#1976d2 !important; }
    #page-dashboard-ap .apd-stat:nth-child(2) { background:#f0faf3; border-color:#b8dfc7; }
    #page-dashboard-ap .apd-stat:nth-child(2) i { color:#2e7d32 !important; }
    #page-dashboard-ap .apd-stat:nth-child(3) { background:#f5f0ff; border-color:#d4c5f5; }
    #page-dashboard-ap .apd-stat:nth-child(3) i { color:#6d3fc7 !important; }
    #page-dashboard-ap .apd-stat:nth-child(4) { background:#fff8f0; border-color:#f5d9b5; }
    #page-dashboard-ap .apd-stat:nth-child(4) i { color:#e65100 !important; }
    #page-dashboard-ap .apd-stat:nth-child(5) { background:#f5f5f5; border-color:#d8d8d8; }
    #page-dashboard-ap .apd-stat:nth-child(5) i { color:#555 !important; }

    /* ── Hero summary ── */
    #page-dashboard-ap .apd-hero-grid{
      display:flex; align-items:stretch; background:var(--bg-card);
      border:1px solid #c7dff7; border-radius:14px; overflow:hidden;
    }
    #page-dashboard-ap .apd-hero-main{
      flex:1.05; padding:22px 28px; display:flex; flex-direction:column; justify-content:center;
      gap:7px; border-right:1px solid #c7dff7;
      background:linear-gradient(135deg, #e3f0ff 0%, #dbeeff 100%);
      border-radius:12px 0 0 12px;
    }
    #page-dashboard-ap .apd-hero-main-label{
      font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
      color:#5580a8; display:flex; align-items:center; gap:6px;
    }
    #page-dashboard-ap .apd-hero-main-label i { color:#5580a8 !important; }
    #page-dashboard-ap .apd-hero-main-val{
      font-size:36px; font-weight:800; font-family:'Noto Sans Thai',sans-serif;
      letter-spacing:-0.8px; line-height:1.1; color:#1a3a5c;
    }
    #page-dashboard-ap .apd-hero-main-sub{ font-size:12px; color:#5580a8; }
    #page-dashboard-ap .apd-hero-cols{ flex:1.7; display:grid; grid-template-columns:repeat(3,1fr); }
    #page-dashboard-ap .apd-hero-col{
      padding:18px 20px; display:flex; flex-direction:column; justify-content:center; gap:6px;
      border-right:1px solid var(--border-color); transition:background .15s ease;
    }
    #page-dashboard-ap .apd-hero-col:last-child{ border-right:none; }
    #page-dashboard-ap .apd-hero-col:hover{ background:#f5f7ff; }
    #page-dashboard-ap .apd-hero-col-label{
      font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
      color:var(--text-muted); display:flex; align-items:center; gap:5px;
    }
    #page-dashboard-ap .apd-hero-col-val{
      font-size:19px; font-weight:700; font-family:'Noto Sans Thai',sans-serif; color:var(--text-primary);
    }
    #page-dashboard-ap .apd-hero-col-val.is-alert{ color:var(--danger); }
    #page-dashboard-ap .apd-hero-col-sub{ font-size:10.5px; color:var(--text-muted); }
    @media (max-width: 980px) {
      #page-dashboard-ap .apd-hero-grid{ flex-direction:column; }
      #page-dashboard-ap .apd-hero-main{ border-right:none; border-bottom:1px solid var(--border-color); }
    }
    @media (max-width: 575px) {
      #page-dashboard-ap .apd-hero-cols{ grid-template-columns:1fr; }
      #page-dashboard-ap .apd-hero-col{ border-right:none; border-bottom:1px solid var(--border-color); }
      #page-dashboard-ap .apd-hero-col:last-child{ border-bottom:none; }
    }
    #page-dashboard-ap .apd-chart-wrap{ padding:16px; }
    #page-dashboard-ap .apd-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; margin-bottom:10px; }
    #page-dashboard-ap .apd-legend span.dot{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; }
    @media (max-width: 980px) {
      #page-dashboard-ap .apd-2col,
      #page-dashboard-ap .apd-2col.apd-2col-wide{ grid-template-columns:1fr; }
      #page-dashboard-ap .apd-kpi-grid{ grid-template-columns:repeat(3,1fr); }
    }
    @media (max-width: 575px) {
      #page-dashboard-ap .apd-kpi-grid{ grid-template-columns:repeat(2,1fr); }
    }

    /* ── Unified Financial Statements Filter Bar ───────────────────── */
    .fs-filter-card { margin-bottom:16px; }
    .fs-filter-card .card-box-header { padding:14px 20px; }
    .fs-filter-row {
      display:flex; flex-wrap:wrap; align-items:flex-end;
      gap:12px 14px;
    }
    .fs-filter-row > * { min-width:0; }
    .fs-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
    .fs-field > .form-label-custom {
      font-size:11px; margin:0; line-height:1.2;
      color:var(--text-secondary); font-weight:500;
      display:flex; align-items:center; gap:4px;
      white-space:nowrap;
    }
    .fs-field > .input-custom { height:38px; }
    .fs-action {
      align-self:flex-end;
      height:38px; display:inline-flex; align-items:center; gap:6px;
      white-space:nowrap;
    }
    .fs-toggle {
      align-self:flex-end;
      display:inline-flex; align-items:center; gap:8px;
      height:38px; padding:0 14px;
      background:var(--bg-main);
      border:1px solid var(--border-color);
      border-radius:8px;
      font-size:12px; color:var(--text-secondary);
      cursor:pointer; user-select:none; white-space:nowrap;
    }
    .fs-toggle input[type="checkbox"] { margin:0; cursor:pointer; }
    .fs-spacer { flex:1 1 0; min-width:0; }
    .fs-filter-sub {
      display:flex; flex-wrap:wrap; align-items:flex-end;
      gap:12px 14px;
      margin-top:12px; padding-top:12px;
      border-top:1px dashed var(--border-color);
    }
    .fs-filter-note {
      font-size:11px; color:var(--text-muted); line-height:1.5;
      align-self:center; display:flex; align-items:center; gap:4px;
    }
  

    #page-dashboard-ar .ard-section{ margin-bottom:18px; }
    #page-dashboard-ar .ard-2col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    #page-dashboard-ar .ard-kpi-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }

    /* ── KPI Strip cards ── */
    #page-dashboard-ar .ard-stat{
      text-align:center; padding:14px 10px;
      background:#f8fff9; border:1px solid #c8e6c9; border-radius:10px;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    #page-dashboard-ar .ard-kpi-grid .ard-stat:hover{ border-color:#81c784; box-shadow:0 2px 8px rgba(46,125,50,.08); }
    #page-dashboard-ar .ard-stat-label{ font-size:11px; color:var(--text-secondary); margin-bottom:4px; }
    #page-dashboard-ar .ard-stat-val{ font-size:16px; font-weight:700; font-family:'Noto Sans Thai',sans-serif; }

    /* ── KPI strip accent colors ── */
    #page-dashboard-ar .ard-stat:nth-child(1) { background:#e8f5e9; border-color:#a5d6a7; }
    #page-dashboard-ar .ard-stat:nth-child(1) i { color:#2e7d32 !important; }
    #page-dashboard-ar .ard-stat:nth-child(2) { background:#eef6ff; border-color:#c7dff7; }
    #page-dashboard-ar .ard-stat:nth-child(2) i { color:#1976d2 !important; }
    #page-dashboard-ar .ard-stat:nth-child(3) { background:#f5f0ff; border-color:#d4c5f5; }
    #page-dashboard-ar .ard-stat:nth-child(3) i { color:#6d3fc7 !important; }
    #page-dashboard-ar .ard-stat:nth-child(4) { background:#fff8f0; border-color:#f5d9b5; }
    #page-dashboard-ar .ard-stat:nth-child(4) i { color:#e65100 !important; }
    #page-dashboard-ar .ard-stat:nth-child(5) { background:#f5f5f5; border-color:#d8d8d8; }
    #page-dashboard-ar .ard-stat:nth-child(5) i { color:#555 !important; }

    /* ── Hero summary ── */
    #page-dashboard-ar .ard-hero-grid{
      display:flex; align-items:stretch; background:var(--bg-card);
      border:1px solid #a5d6a7; border-radius:14px; overflow:hidden;
    }
    #page-dashboard-ar .ard-hero-main{
      flex:1.05; padding:22px 28px; display:flex; flex-direction:column; justify-content:center;
      gap:7px; border-right:1px solid #a5d6a7;
      background:linear-gradient(135deg, #e8f5e9 0%, #dcedc8 100%);
      border-radius:12px 0 0 12px;
    }
    #page-dashboard-ar .ard-hero-main-label{
      font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
      color:#4a7c59; display:flex; align-items:center; gap:6px;
    }
    #page-dashboard-ar .ard-hero-main-label i { color:#4a7c59 !important; }
    #page-dashboard-ar .ard-hero-main-val{
      font-size:36px; font-weight:800; font-family:'Noto Sans Thai',sans-serif;
      letter-spacing:-0.8px; line-height:1.1; color:#1b5e20;
    }
    #page-dashboard-ar .ard-hero-main-sub{ font-size:12px; color:#4a7c59; }
    #page-dashboard-ar .ard-hero-cols{ flex:1.7; display:grid; grid-template-columns:repeat(3,1fr); }
    #page-dashboard-ar .ard-hero-col{
      padding:18px 20px; display:flex; flex-direction:column; justify-content:center; gap:6px;
      border-right:1px solid var(--border-color); transition:background .15s ease;
    }
    #page-dashboard-ar .ard-hero-col:last-child{ border-right:none; }
    #page-dashboard-ar .ard-hero-col:hover{ background:#f1f8e9; }
    #page-dashboard-ar .ard-hero-col-label{
      font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
      color:var(--text-muted); display:flex; align-items:center; gap:5px;
    }
    #page-dashboard-ar .ard-hero-col-val{
      font-size:19px; font-weight:700; font-family:'Noto Sans Thai',sans-serif; color:var(--text-primary);
    }
    #page-dashboard-ar .ard-hero-col-val.is-alert{ color:var(--danger); }
    #page-dashboard-ar .ard-hero-col-sub{ font-size:10.5px; color:var(--text-muted); }
    #page-dashboard-ar .ard-chart-wrap{ padding:16px; }
    #page-dashboard-ar .ard-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; margin-bottom:10px; }
    #page-dashboard-ar .ard-legend span.dot{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; }

    /* ── Responsive ── */
    @media (max-width: 980px) {
      #page-dashboard-ar .ard-hero-grid{ flex-direction:column; }
      #page-dashboard-ar .ard-hero-main{ border-right:none; border-bottom:1px solid var(--border-color); }
      #page-dashboard-ar .ard-2col{ grid-template-columns:1fr; }
      #page-dashboard-ar .ard-kpi-grid{ grid-template-columns:repeat(3,1fr); }
    }
    @media (max-width: 575px) {
      #page-dashboard-ar .ard-hero-cols{ grid-template-columns:1fr; }
      #page-dashboard-ar .ard-hero-col{ border-right:none; border-bottom:1px solid var(--border-color); }
      #page-dashboard-ar .ard-hero-col:last-child{ border-bottom:none; }
      #page-dashboard-ar .ard-kpi-grid{ grid-template-columns:repeat(2,1fr); }
    }
  
/* R-123: รายการ Rule ไม่ล้นกรอบ */ #pcc-linked-rules>div,#ac-linked-rules>div{flex-wrap:wrap;row-gap:6px} #pcc-linked-rules>div>span,#ac-linked-rules>div>span{white-space:nowrap;flex-shrink:0} #pcc-linked-rules>div>span.pcc-rule-name,#ac-linked-rules>div>span.pcc-rule-name{white-space:normal;flex:1 1 220px;min-width:180px;flex-shrink:1}

      /* ── Inventory Command Center — responsive & operational ── */
      #page-wh-dashboard .whd{--wh-good:#16a34a;--wh-warn:#f59e0b;--wh-bad:#dc2626;--wh-info:#2563eb;--wh-muted:#64748b;--wh-line:#e5e7eb;--wh-surface:#ffffff;--wh-soft:#f8fafc}
      #page-wh-dashboard .whd-section{margin-bottom:20px}
      #page-wh-dashboard .whd-section-hd{display:flex;align-items:center;gap:8px;margin:4px 2px 10px;font-size:13px;font-weight:700;color:var(--text-primary);font-family:'Noto Sans Thai',sans-serif}
      #page-wh-dashboard .whd-section-hd i{font-size:16px;color:var(--wh-info)}
      #page-wh-dashboard .whd-section-hd .hint{font-weight:400;font-size:11px;color:var(--wh-muted);margin-left:auto}
      /* KPI grid */
      #page-wh-dashboard .whd-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
      #page-wh-dashboard .whd-kpi{background:var(--wh-surface);border:1px solid var(--wh-line);border-radius:10px;padding:12px 14px;cursor:pointer;transition:.15s;position:relative;overflow:hidden;min-width:0}
      #page-wh-dashboard .whd-kpi:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.08);border-color:#cbd5e1}
      #page-wh-dashboard .whd-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--wh-info)}
      #page-wh-dashboard .whd-kpi.warn::before{background:var(--wh-warn)} 
      #page-wh-dashboard .whd-kpi.bad::before{background:var(--wh-bad)}
      #page-wh-dashboard .whd-kpi.good::before{background:var(--wh-good)}
      #page-wh-dashboard .whd-kpi .k-lbl{font-size:11.5px;color:var(--wh-muted);font-weight:600;display:flex;align-items:center;gap:6px}
      #page-wh-dashboard .whd-kpi .k-lbl i{font-size:14px}
      #page-wh-dashboard .whd-kpi .k-val{font-family:'Noto Sans Thai',sans-serif;font-size:22px;font-weight:800;color:var(--text-primary);margin-top:4px;line-height:1.15;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      #page-wh-dashboard .whd-kpi .k-sub{font-size:11px;color:var(--wh-muted);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
      #page-wh-dashboard .whd-kpi .delta{font-weight:700}
      #page-wh-dashboard .whd-kpi .delta.up{color:var(--wh-good)}
      #page-wh-dashboard .whd-kpi .delta.down{color:var(--wh-bad)}
      #page-wh-dashboard .whd-kpi .k-badge{position:absolute;top:8px;right:10px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;background:#eff6ff;color:var(--wh-info)}
      #page-wh-dashboard .whd-kpi.warn .k-badge{background:#fff7ed;color:#b45309}
      #page-wh-dashboard .whd-kpi.bad .k-badge{background:#fef2f2;color:var(--wh-bad)}
      #page-wh-dashboard .whd-kpi.good .k-badge{background:#f0fdf4;color:var(--wh-good)}
      /* Panels */
      #page-wh-dashboard .whd-panels-2{display:grid;grid-template-columns:2fr 1fr;gap:12px}
      #page-wh-dashboard .whd-panels-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
      #page-wh-dashboard .whd-panels-eq2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
      #page-wh-dashboard .whd-panel{background:var(--wh-surface);border:1px solid var(--wh-line);border-radius:10px;padding:14px;display:flex;flex-direction:column;min-width:0}
      #page-wh-dashboard .whd-panel-hd{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--text-primary);margin-bottom:10px;font-family:'Noto Sans Thai',sans-serif}
      #page-wh-dashboard .whd-panel-hd .link{margin-left:auto;font-size:11px;color:var(--wh-info);cursor:pointer;font-weight:600}
      #page-wh-dashboard .whd-panel-hd .link:hover{text-decoration:underline}
      /* Movement tiles */
      #page-wh-dashboard .whd-mv-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
      #page-wh-dashboard .whd-mv{background:var(--wh-soft);border:1px solid var(--wh-line);border-radius:8px;padding:10px 12px;cursor:pointer;transition:.15s;min-width:0}
      #page-wh-dashboard .whd-mv:hover{background:#eef2f7;border-color:#cbd5e1}
      #page-wh-dashboard .whd-mv .mv-lbl{font-size:11px;color:var(--wh-muted);font-weight:600;display:flex;align-items:center;gap:5px}
      #page-wh-dashboard .whd-mv .mv-lbl i{font-size:13px}
      #page-wh-dashboard .whd-mv .mv-qty{font-family:'Noto Sans Thai',sans-serif;font-weight:800;font-size:18px;color:var(--text-primary);margin-top:4px;letter-spacing:-.4px}
      #page-wh-dashboard .whd-mv .mv-sub{font-size:10.5px;color:var(--wh-muted);margin-top:2px}
      /* Health tables */
      #page-wh-dashboard .whd-tbl{width:100%;font-size:12px;border-collapse:collapse}
      #page-wh-dashboard .whd-tbl th{text-align:left;font-weight:600;color:var(--wh-muted);padding:6px 8px;border-bottom:1px solid var(--wh-line);font-size:11px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
      #page-wh-dashboard .whd-tbl td{padding:8px;border-bottom:1px solid #f1f5f9;color:var(--text-primary);vertical-align:middle}
      #page-wh-dashboard .whd-tbl tr:hover td{background:var(--wh-soft)}
      #page-wh-dashboard .whd-tbl .num{font-family:'Noto Sans Thai',sans-serif;text-align:right;white-space:nowrap}
      #page-wh-dashboard .whd-tbl .code{font-family:'Noto Sans Thai',sans-serif;font-size:11px;color:var(--wh-muted)}
      #page-wh-dashboard .whd-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px}
      #page-wh-dashboard .whd-pill.bad{background:#fef2f2;color:var(--wh-bad)}
      #page-wh-dashboard .whd-pill.warn{background:#fff7ed;color:#b45309}
      #page-wh-dashboard .whd-pill.good{background:#f0fdf4;color:var(--wh-good)}
      #page-wh-dashboard .whd-pill.info{background:#eff6ff;color:var(--wh-info)}
      #page-wh-dashboard .whd-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1;max-height:340px;overflow-y:auto}
      #page-wh-dashboard .whd-empty{text-align:center;padding:22px 10px;color:var(--wh-muted);font-size:12px}
      /* Alerts */
      #page-wh-dashboard .whd-alert-list{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow-y:auto}
      #page-wh-dashboard .whd-alert{display:flex;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--wh-line);background:var(--wh-soft);cursor:pointer;align-items:flex-start;transition:.15s}
      #page-wh-dashboard .whd-alert:hover{background:#eef2f7}
      #page-wh-dashboard .whd-alert .a-ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:16px}
      #page-wh-dashboard .whd-alert.bad .a-ic{background:#fef2f2;color:var(--wh-bad)}
      #page-wh-dashboard .whd-alert.warn .a-ic{background:#fff7ed;color:#b45309}
      #page-wh-dashboard .whd-alert.info .a-ic{background:#eff6ff;color:var(--wh-info)}
      #page-wh-dashboard .whd-alert .a-body{flex:1;min-width:0}
      #page-wh-dashboard .whd-alert .a-title{font-size:12.5px;font-weight:700;color:var(--text-primary);line-height:1.3}
      #page-wh-dashboard .whd-alert .a-sub{font-size:11px;color:var(--wh-muted);margin-top:2px}
      #page-wh-dashboard .whd-alert .a-count{font-family:'Noto Sans Thai',sans-serif;font-weight:800;font-size:16px;color:var(--text-primary);align-self:center}
      /* Aging */
      #page-wh-dashboard .whd-aging-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px}
      #page-wh-dashboard .whd-aging-row .lbl{width:80px;font-weight:600;color:var(--text-primary)}
      #page-wh-dashboard .whd-aging-row .bar{flex:1;height:14px;background:#f1f5f9;border-radius:4px;overflow:hidden;position:relative}
      #page-wh-dashboard .whd-aging-row .bar>span{display:block;height:100%;border-radius:4px}
      #page-wh-dashboard .whd-aging-row .val{width:120px;text-align:right;font-family:'Noto Sans Thai',sans-serif;font-weight:700;color:var(--text-primary);font-size:11.5px}
      #page-wh-dashboard .whd-aging-row .pct{width:44px;text-align:right;font-size:10.5px;color:var(--wh-muted);font-family:'Noto Sans Thai',sans-serif}
      /* Turnover / KPI list */
      #page-wh-dashboard .whd-metric{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:1px dashed var(--wh-line)}
      #page-wh-dashboard .whd-metric:last-child{border-bottom:none}
      #page-wh-dashboard .whd-metric .m-lbl{font-size:12px;color:var(--text-primary);font-weight:600}
      #page-wh-dashboard .whd-metric .m-formula{font-size:10.5px;color:var(--wh-muted);font-family:'Noto Sans Thai',sans-serif;margin-top:2px}
      #page-wh-dashboard .whd-metric .m-val{font-family:'Noto Sans Thai',sans-serif;font-size:18px;font-weight:800;color:var(--text-primary);text-align:right;letter-spacing:-.4px}

      /* ── Responsive breakpoints ── */
      @media (max-width:1200px){
        #page-wh-dashboard .whd-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
        #page-wh-dashboard .whd-mv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
        #page-wh-dashboard .whd-panels-2{grid-template-columns:1fr}
        #page-wh-dashboard .whd-panels-3{grid-template-columns:repeat(2,minmax(0,1fr))}
      }
      @media (max-width:820px){
        #page-wh-dashboard .whd-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        #page-wh-dashboard .whd-mv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        #page-wh-dashboard .whd-panels-3{grid-template-columns:1fr}
        #page-wh-dashboard .whd-panels-eq2{grid-template-columns:1fr}
        #page-wh-dashboard .whd-kpi .k-val{font-size:19px}
        #page-wh-dashboard .whd-aging-row .lbl{width:64px}
        #page-wh-dashboard .whd-aging-row .val{width:88px}
      }
      @media (max-width:520px){
        #page-wh-dashboard .whd-kpi-grid{grid-template-columns:1fr 1fr}
        #page-wh-dashboard .whd-mv-grid{grid-template-columns:1fr 1fr}
      }
    

  @keyframes ai-spin { to { transform: rotate(360deg); } }
  @keyframes ai-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
  .ai-mapping-ok { border-left:3px solid #16a34a !important; }
  .ai-mapping-warn { border-left:3px solid #f59e0b !important; }
  .ai-mapping-err { border-left:3px solid #dc2626 !important; }
  .ai-field-err { border-color:#dc2626 !important; background:#fef2f2 !important; }
  .ai-badge-ok { background:#dcfce7;color:#15803d;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px }
  .ai-badge-warn { background:#fef9c3;color:#a16207;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px }
  .ai-badge-err { background:#fee2e2;color:#b91c1c;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px }
  .ai-badge-fallback { background:#dbeafe;color:#1d4ed8;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px }
  .ai-bill-tab { padding:10px 16px;font-size:12px;font-weight:600;border:none;background:transparent;cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:all .15s }
  .ai-bill-tab.active { color:#7c3aed;border-bottom-color:#7c3aed }
  .ai-bill-tab:hover:not(.active) { color:var(--text-primary) }
  .ai-select-check { width:18px;height:18px;accent-color:#7c3aed;cursor:pointer;flex-shrink:0 }
  /* AI action buttons */
  .ai-action-btn { border:none;border-radius:7px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:opacity .15s }
  .ai-action-btn:hover { opacity:.85 }
  .ai-action-btn-warn { background:#a16207;color:#fff }
  .ai-action-btn-blue { background:#1d4ed8;color:#fff }
  /* GL Rule info box */
  .ai-rule-detail-box { background:#f8faff;border:1px solid #e0e7ff;border-radius:8px;padding:10px 12px;margin-top:8px;font-size:11px }
  .ai-rule-detail-box .rule-line { display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid #eef1fb }
  .ai-rule-detail-box .rule-line:last-child { border-bottom:none }
  .ai-cr-tag { background:#fee2e2;color:#b91c1c;font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.5px }
  .ai-dr-tag { background:#dbeafe;color:#1e40af;font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.5px }
  /* Progress confidence bar */
  .ai-confidence-bar { height:3px;border-radius:2px;background:#e5e7eb;overflow:hidden;margin-top:4px }
  .ai-confidence-fill { height:100%;border-radius:2px;transition:width .4s }
  /* Supplier card enhanced */
  .ai-sup-card-ok { background:linear-gradient(135deg,#f0fdf4,#f7fef9);border:1px solid #bbf7d0 }
  .ai-sup-card-warn { background:linear-gradient(135deg,#fffbeb,#fffff4);border:1px solid #fde047 }
  

        #modalPayment .pay-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);background:var(--input-bg);border:1px solid var(--border-color);border-radius:20px;padding:3px 10px;line-height:1.6}
        #modalPayment .pay-chip b{font-family:'Noto Sans Thai',sans-serif;font-weight:700;font-size:12px;color:var(--text-primary)}
        #modalPayment .pay-chip.is-paid b{color:var(--success)}
        #modalPayment .pay-chip.is-remain{background:#fff5f5;border-color:#ffcdd2}
        #modalPayment .pay-chip.is-remain b{color:var(--danger)}
        #modalPayment .pay-items-flat{border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden}
        #modalPayment .pay-items-flat > *:not(:last-child){border-bottom:1px solid var(--border-color)}
        #modalPayment .seg{display:inline-flex;gap:8px;flex-wrap:wrap}
        #modalPayment .seg label{margin:0;cursor:pointer;font-size:12px;font-weight:500;color:var(--text-secondary);padding:8px 14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);line-height:1.4;transition:all .15s;display:inline-flex;align-items:center;gap:8px;min-width:160px}
        #modalPayment .seg label:hover{border-color:var(--text-muted)}
        #modalPayment .seg label:has(input:checked){border-color:var(--accent);color:var(--text-primary);font-weight:600}
        #modalPayment .seg input[type="radio"]{display:inline-block;appearance:auto;-webkit-appearance:auto;margin:0;width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
        #modalPayment .pay-settings-bar{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:12px 14px;background:var(--bg-page);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:14px}
        #modalPayment .pay-settings-bar > .lbl,#modalPayment .pay-settings-bar #rcp-paytype-row{display:flex!important;flex-direction:column;align-items:flex-start;gap:6px}
        #modalPayment .pay-settings-bar .lbl > span:first-child,#modalPayment #rcp-paytype-row > span:first-child{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:0.4px;text-transform:uppercase}
        #modalPayment .pay-settings-bar .lbl{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:0.4px;text-transform:uppercase}
        /* ── ช่องทางการชำระเงิน: toggle chip (แตะเพื่อเพิ่ม/ลบ) ── */
        #modalPayment .pay-method-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:20px;border:1.5px solid var(--border-color);background:var(--bg-page);font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:.12s;user-select:none}
        #modalPayment .pay-method-chip i{font-size:15px}
        #modalPayment .pay-method-chip:hover{border-color:var(--text-muted)}
        #modalPayment .pay-method-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
      

        #modalRcpView .pay-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);background:var(--input-bg);border:1px solid var(--border-color);border-radius:20px;padding:3px 10px;line-height:1.6}
        #modalRcpView .pay-chip b{font-family:'Noto Sans Thai',sans-serif;font-weight:700;font-size:12px;color:var(--text-primary)}
        #modalRcpView .pay-items-flat{border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden}
        #modalRcpView .pay-items-flat > *:not(:last-child){border-bottom:1px solid var(--border-color)}
        #modalRcpView .rv-seg{display:inline-flex;gap:8px;flex-wrap:wrap}
        #modalRcpView .rv-seg .rv-opt{margin:0;font-size:12px;font-weight:500;color:var(--text-secondary);padding:8px 14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);line-height:1.4;display:inline-flex;align-items:center;gap:8px;min-width:160px;opacity:0.6;cursor:not-allowed}
        #modalRcpView .rv-seg .rv-opt.is-active{border-color:var(--accent);color:var(--text-primary);font-weight:600;opacity:1;background:var(--bg-card)}
        #modalRcpView .rv-seg .rv-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--text-muted);display:inline-block;position:relative;flex-shrink:0}
        #modalRcpView .rv-seg .rv-opt.is-active .rv-radio{border-color:var(--accent)}
        #modalRcpView .rv-seg .rv-opt.is-active .rv-radio::after{content:'';position:absolute;inset:2px;background:var(--accent);border-radius:50%}
      

@media print {
  /* hide everything except the JV print modal content */
  body > *:not(#modalJVPrint) { display: none !important; }
  #modalJVPrint {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #modalJVPrint > div {
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  #modalJVPrint > div > div:first-child { display: none !important; } /* hide toolbar */
  #jvPrintBody { padding: 16px !important; }
}


.ar-bill-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.ar-bill-card:hover { border-color: var(--accent); }
.ar-bill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg,var(--bg-card) 0%,var(--bg-main) 100%);
  border-bottom: 1px solid var(--border-color);
}
.ar-bill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft,#ede9fe);
  padding: 3px 10px;
  border-radius: 20px;
}
.ar-bill-body { padding: 12px 14px; }
.ar-bill-field { display: flex; flex-direction: column; gap: 3px; }
.ar-bill-field label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.ar-bill-select2-wrap select { width: 100%; }
.ar-bill-lines-mini { font-size: 11px; color: var(--text-muted); }
.ar-bill-lines-mini td { padding: 3px 8px; }
.ar-group-btn {
  border: none;
  border-radius: 5px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.ar-group-btn:hover { opacity: .8; }