/* รอบ 32: รายจ่าย (/expenses) + กำไรขาดทุน (/profit-loss)
   - ใช้โครง .fit ของ fit.css + การ์ดตัวเลข/กราฟของ dash.css (.dash-seg, .dash-kpi, .dch)
   - สีหมวดมาจากตัวแปร --cat (ตั้งที่ style ของแต่ละแถว/ชิป), สีช่องทางจ่ายมาจาก --pf
   - สีอื่นทั้งหมดใช้ตัวแปรของธีม จึงใช้กับโหมดมืดได้ (กรณีพิเศษ override ไว้ท้ายไฟล์)
   - พิมพ์: ปุ่มพิมพ์ตั้ง data-print="pl" → พิมพ์เฉพาะ .pl-print บนกระดาษ A4 */

@media screen {
  /* ---------- ตัวแปรช่องทางจ่าย ---------- */
  .pf-drawer { --pf: var(--brand); }
  .pf-account { --pf: #2F6FB3; }
  .pf-cash { --pf: #2E8B57; }
  /* รอบ 62e โรงเรียน: จ่ายจากเงินที่เก็บวันนี้ */
  .pf-collect { --pf: var(--plc-exp, #D98A12); }
  .exp-fit, .pl-fit, .mdl, .drw { --plc-exp: #D98A12; }

  /* ---------- หัว + แถบช่วงเวลา ---------- */
  .exp-tools, .pl-tools { gap: 8px; }
  .exp-add-btn, .pl-print-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }
  .exp-search { width: 260px; }
  .exp-bar, .pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .exp-periods { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .exp-periods .chip { cursor: pointer; font: inherit; font-size: .88rem; padding: 6px 14px; }
  .exp-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .exp-dates .field.inline input { min-height: 38px; padding: 6px 10px; }
  .exp-range { font-size: .85rem; }
  .exp-ro-note { margin-left: auto; font-size: .82rem; }
  .pl-busy { margin-left: auto; font-size: .82rem; }

  /* ---------- จุดสีหมวด / ป้ายช่องทางจ่าย ---------- */
  .exp-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--muted)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat, var(--muted)) 22%, transparent); }
  .exp-cat { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
  .exp-cat > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exp-pf {
    display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; white-space: nowrap;
    font-size: .78rem; font-weight: 700; color: var(--pf); background: color-mix(in srgb, var(--pf) 13%, transparent);
  }
  .exp-shared {
    display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--chip); color: var(--muted); font-size: .78rem; font-weight: 700;
  }
  .exp-void-tag {
    display: inline-block; padding: 0 8px; border-radius: 999px; white-space: nowrap;
    background: var(--danger-soft); color: var(--danger); font-size: .72rem; font-weight: 700; text-decoration: none;
  }

  /* ---------- ตัวเลขสรุป ---------- */
  .exp-stats { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1.1fr); }
  .exp-stats .fit-stat small { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .exp-stat-total { background: var(--brand); color: var(--brand-ink); }
  .exp-stat-total.fit-stat.hl strong { color: var(--brand-ink); }
  .exp-stat-total > span, .exp-stat-total > small.muted { color: var(--brand-ink); opacity: .85; }
  .exp-pfbar { display: flex; gap: 2px; height: 9px; margin: 7px 0 5px; border-radius: 999px; overflow: hidden; background: var(--chip); }
  .exp-pfbar > span { display: block; min-width: 4px; background: var(--pf); }
  .exp-stat-pf > span:first-child { white-space: nowrap; }
  .exp-pflegend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .78rem; color: var(--muted); white-space: normal !important; overflow: visible !important; }
  .exp-pflegend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .exp-pflegend i { width: 8px; height: 8px; border-radius: 2px; background: var(--pf); }
  .exp-pflegend b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  .exp-top-name { display: flex; align-items: center; gap: 8px; min-width: 0; }

  /* ---------- พื้นที่หลัก ---------- */
  .panel.exp-main { padding: 12px 14px 6px; }
  .exp-chips {
    flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 2px;
    scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  .exp-chip {
    --cat: var(--ink);
    flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; min-height: 34px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: .86rem; white-space: nowrap; cursor: pointer;
  }
  .exp-chip b { font-weight: 700; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .exp-chip:hover { border-color: var(--muted); }
  .exp-chip.on { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 13%, var(--surface)); font-weight: 700; }
  .exp-chip.on b { color: var(--ink); }
  .exp-scroll.table-wrap { border: 0; border-radius: 0; background: transparent; }
  .exp-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
  .exp-table th { padding: 9px 12px; }
  .exp-table tr:last-child td { border-bottom: 0; }
  .exp-c-date { white-space: nowrap; color: var(--muted); font-size: .86rem; }
  .exp-c-cat { max-width: 200px; }
  .exp-c-detail { max-width: 360px; }
  .exp-payee { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exp-note { display: block; font-size: .78rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exp-c-branch { white-space: nowrap; font-size: .88rem; }
  .exp-c-amt { white-space: nowrap; }
  .exp-c-amt strong { font-weight: 700; }
  .exp-c-amt .exp-void-tag { display: table; margin: 2px 0 0 auto; }
  .exp-c-rcpt { width: 44px; padding-left: 0 !important; text-align: center; }
  .exp-rcpt {
    display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
    color: var(--brand-strong, var(--brand)); background: var(--brand-tint);
  }
  .exp-rcpt:hover { background: var(--brand-soft); }
  .exp-row.voided td { color: var(--muted); }
  .exp-row.voided .exp-c-amt strong, .exp-row.voided .exp-payee, .exp-row.voided .exp-cat > span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .exp-row.voided .exp-dot { opacity: .45; }
  .exp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; margin: auto 0; }
  .exp-empty p { margin: 0; }
  .exp-empty-ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }

  /* แผงข้าง: แยกตามหมวด */
  .panel.exp-side { padding: 14px 14px 12px; }
  .exp-manage { font-size: .84rem; font-weight: 600; text-decoration: none; }
  .exp-manage:hover { text-decoration: underline; }
  .exp-catlist { display: flex; flex-direction: column; gap: 2px; }
  .exp-catrow {
    display: grid; gap: 4px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px;
    background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  }
  .exp-catrow:hover { background: var(--chip); }
  .exp-catrow.on { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 9%, var(--surface)); }
  .exp-catrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; font-size: .9rem; }
  .exp-catrow-top strong { flex: none; font-size: .9rem; }
  .exp-catrow small { font-size: .74rem; }
  .exp-track { display: block; height: 7px; border-radius: 999px; background: var(--chip); overflow: hidden; }
  .exp-track.thin { height: 5px; }
  .exp-fill { display: block; height: 100%; border-radius: 999px; background: var(--cat, var(--brand)); }
  .exp-side-empty { margin: 0; padding: 24px 6px; text-align: center; }
  .exp-side-foot { flex: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 4px 0; border-top: 1px dashed var(--line); }
  .exp-side-pf { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; }
  .exp-side-pf .exp-pf { font-size: .74rem; }

  .exp-mbar { display: none; }

  /* ---------- ลิ้นชักรายละเอียด ---------- */
  .drw-sub .exp-pf, .drw-sub .exp-void-tag { margin-left: 8px; }
  .exp-d-amount {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px;
    background: color-mix(in srgb, var(--cat) 10%, var(--surface)); border-left: 5px solid var(--cat);
  }
  .exp-d-amount strong { font-size: 1.85rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
  .exp-d-amount.voided strong { text-decoration: line-through; color: var(--muted); }
  .exp-d-voided strong { font-weight: 700; }
  .exp-form, .void-box.exp-form {
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--chip);
  }
  .void-box.exp-form input { min-width: 0; padding: 9px 12px; background: var(--surface); color: var(--ink); }
  .exp-form .actions { margin: 0; }
  .exp-form-note { margin: 0; }
  .exp-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
  .exp-edit-grid .field small { font-size: .74rem; }
  .exp-d-receipt { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--chip); }
  .exp-d-receipt img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
  .exp-d-norcpt { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; font-size: .9rem; }
  .exp-file-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; overflow: hidden; cursor: pointer; }
  .exp-file-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
  .exp-file-btn.is-busy { opacity: .6; pointer-events: none; }

  /* ---------- ป๊อปอัปบันทึก ---------- */
  .exp-create { display: flex; flex-direction: column; gap: 16px; }
  .exp-create .alert { margin: 0; }
  .exp-amount-field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .9rem; }
  .exp-amount-box {
    display: flex; align-items: center; gap: 10px; padding: 2px 18px; border: 2px solid var(--line); border-radius: 18px;
    background: var(--surface); transition: border-color .12s, box-shadow .12s;
  }
  .exp-amount-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
  .exp-amount-box input.exp-amount {
    flex: 1 1 auto; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: none; color: var(--ink);
    font: inherit; font-size: 2.1rem; font-weight: 800; letter-spacing: -.01em;
  }
  .exp-amount::placeholder { color: var(--line); }
  .exp-amount-cur { flex: none; font-size: 1.35rem; font-weight: 700; color: var(--muted); }
  .exp-fgroup { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .exp-flabel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .9rem; }
  .exp-flabel .link { font-size: .84rem; font-weight: 600; text-decoration: none; }
  .exp-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .exp-catbtn {
    display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 46px; padding: 8px 12px;
    border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
  }
  .exp-catbtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exp-catbtn:hover { border-color: color-mix(in srgb, var(--cat) 60%, var(--line)); }
  .exp-catbtn.on { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 13%, var(--surface)); box-shadow: inset 0 0 0 1px var(--cat); font-weight: 700; }
  .exp-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
  .exp-pfseg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .exp-pfseg.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-pfseg button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 70px;
    padding: 8px 6px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: .84rem; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer;
  }
  .exp-pfseg button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pf) 60%, var(--line)); }
  .exp-pfseg button.on { border-color: var(--pf); background: color-mix(in srgb, var(--pf) 12%, var(--surface)); box-shadow: inset 0 0 0 1px var(--pf); }
  .exp-pfseg button:disabled { opacity: .45; cursor: not-allowed; }
  .exp-pfseg-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--pf); background: color-mix(in srgb, var(--pf) 14%, transparent); }
  .exp-hint { margin: 0; font-size: .82rem; color: var(--muted); }
  .exp-hint.warn { padding: 6px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .exp-upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .exp-upload-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
  .exp-upload-name { font-size: .86rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exp-upload small { font-size: .78rem; }

  /* ---------- จัดการหมวด ---------- */
  .exp-cats { display: flex; flex-direction: column; gap: 12px; }
  .exp-cats .alert { margin: 0; }
  .exp-cats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .exp-cats-head p { margin: 0; }
  .exp-cats-head .btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
  .exp-catform { border-left: 5px solid var(--cat); }
  .exp-catform-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: end; }
  .exp-catform-active { min-height: 42px; }
  .exp-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .exp-swatch {
    width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 3px solid var(--surface); cursor: pointer;
    background: var(--cat); box-shadow: 0 0 0 1px var(--line);
  }
  .exp-swatch.on { box-shadow: 0 0 0 2px var(--ink); }
  .exp-color-input { width: 44px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
  .exp-catman { list-style: none; margin: 0; padding: 0; }
  .exp-catman li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); }
  .exp-catman li:first-child { border-top: 0; }
  .exp-catman li.off { opacity: .6; }
  .exp-catman-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
  .exp-catman-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exp-catman-name small { font-size: .76rem; }

  /* ---------- แจ้งเตือนลอย ---------- */
  .exp-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px));
    padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--ink); color: var(--surface);
    box-shadow: var(--shadow-lg); font-size: .92rem; font-weight: 600; animation: exp-toast-in .2s ease-out;
  }
  .exp-toast.warn { background: var(--warn-soft); color: var(--warn-text, #7a5300); border: 1px solid color-mix(in srgb, var(--warn-text, #7a5300) 35%, transparent); }
  .exp-toast-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: rgba(127,127,127,.18); color: inherit; cursor: pointer; }
  @keyframes exp-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

  /* =========================== กำไรขาดทุน =========================== */
  .pl-branch {
    display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 10px; max-width: 100%;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted);
  }
  .pl-branch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .pl-branch select { min-width: 0; max-width: 240px; padding: 8px 2px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
  .pl-exp-link { display: inline-flex; align-items: center; min-height: 42px; }
  .pl-print { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .pl-print-head { display: none; }

  .pl-kpis .dash-kpi-ico.pl-ico-exp { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .pl-kpi-net.pos { background: color-mix(in srgb, var(--ok) 11%, var(--surface)); }
  .pl-kpi-net.neg { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
  .pl-kpi-net.pos .dash-kpi-ico { background: var(--ok-soft); color: var(--ok); }
  .pl-kpi-net.neg .dash-kpi-ico { background: var(--danger-soft); color: var(--danger); }
  .pl-kpi-net.pos .dash-kpi-body > strong, .pl-kpi-net.pos .dash-kpi-sub { color: var(--ok); }
  .pl-kpi-net.neg .dash-kpi-body > strong, .pl-kpi-net.neg .dash-kpi-sub { color: var(--danger); }
  .pl-kpi-net .dash-kpi-sub { font-weight: 700; }

  .pl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
  .pl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .panel.pl-card { margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .pl-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
  .pl-card-head h2 { margin: 0; font-size: 1.02rem; }
  .pl-card-meta { color: var(--muted); font-size: .82rem; }
  .pl-none { margin: 0; padding: 20px 6px; text-align: center; }

  /* งบกำไรขาดทุน */
  .pl-lines { display: flex; flex-direction: column; }
  .pl-line {
    display: grid; grid-template-columns: minmax(0, 1fr) 4.6em minmax(8.5em, auto); align-items: baseline; gap: 10px;
    padding: 6px 8px; font-size: .93rem; line-height: 1.35;
  }
  .pl-line > :nth-child(2), .pl-line > :nth-child(3) { text-align: right; white-space: nowrap; }
  .pl-line > :first-child { min-width: 0; }
  .pl-pct { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
  .pl-line.minus > :first-child, .pl-line.plus > :first-child, .pl-line.exp > :first-child { padding-left: 14px; }
  .pl-line.minus > :last-child { color: var(--muted); }
  .pl-line.sub { border-top: 1px solid var(--line); font-weight: 700; }
  .pl-line.total { margin: 3px 0; border-radius: 10px; background: var(--chip); font-weight: 800; }
  .pl-line.head { margin-top: 8px; font-weight: 700; grid-template-columns: minmax(0, 1fr) auto; }
  .pl-line.head > :last-child { display: none; }
  .pl-exp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-line.head .pl-pct { font-size: .72rem; font-weight: 600; }
  .pl-line.exp { padding-top: 4px; padding-bottom: 4px; font-size: .9rem; }
  .pl-line.exp > :first-child { display: flex; align-items: center; gap: 8px; overflow: hidden; }
  .pl-line.exp > :first-child small { flex: none; font-size: .74rem; }
  .pl-line.exp.none > :first-child { font-size: .86rem; }
  .pl-line.net {
    margin-top: 8px; padding: 12px; border-radius: 12px; font-size: 1.08rem; font-weight: 800;
    box-shadow: inset 0 3px 0 -1px currentColor;
  }
  .pl-line.net .pl-pct { color: inherit; font-size: .86rem; font-weight: 700; }
  .pl-line.net.pos { background: var(--ok-soft); color: var(--ok); }
  .pl-line.net.neg { background: var(--danger-soft); color: var(--danger); }
  .pl-notes { margin: 0; padding: 10px 0 0 18px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .8rem; line-height: 1.5; }
  .pl-notes li { margin: 2px 0; }
  .pl-note-warn { color: var(--warn-text, #7a5300); font-weight: 600; }

  /* กราฟรายเดือน */
  .pl-chart .dch-plot { min-height: 220px; }
  .plc-rev { fill: var(--brand); }
  .plc-cogs { fill: var(--muted); fill-opacity: .45; }
  .plc-exp { fill: var(--plc-exp); }
  .plc .dch-slot:hover .plc-rev, .plc .dch-slot:hover .plc-cogs, .plc .dch-slot:hover .plc-exp { filter: brightness(1.08); }
  .plc-net { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
  .plc-dot {
    position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--ok); box-shadow: 0 0 0 3px var(--surface);
  }
  .plc-dot.neg { background: var(--danger); }
  .pl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); }
  .pl-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .pl-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }
  .pl-key.cogs::before { background: color-mix(in srgb, var(--muted) 45%, var(--surface)); }
  .pl-key.exp::before { background: var(--plc-exp); }
  .pl-key.net::before { width: 16px; height: 0; border-radius: 2px; border-top: 3px solid var(--ok); background: none; }

  /* โดนัทค่าใช้จ่าย */
  .pl-donut-wrap { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; }
  .pl-donut { position: relative; width: 150px; aspect-ratio: 1; }
  .pl-donut svg { display: block; width: 100%; height: 100%; }
  .pl-donut circle { fill: none; stroke-width: 6.5; }
  .pl-donut-track { stroke: var(--chip); }
  .pl-donut-seg { stroke: var(--cat, var(--muted)); }
  .pl-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
  .pl-donut-mid small { color: var(--muted); font-size: .72rem; }
  .pl-donut-mid strong { font-size: 1.2rem; font-weight: 800; }
  .pl-blist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
  .pl-blist li { display: grid; gap: 3px; min-width: 0; }
  .pl-blist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; font-size: .88rem; }
  .pl-blist-amt { flex: none; font-weight: 700; }
  .pl-blist small { font-size: .74rem; }

  /* ตารางแยกสาขา */
  .pl-btable-wrap { overflow-x: auto; margin: 0 -6px; }
  .pl-btable th, .pl-btable td { padding: 8px 10px; font-size: .88rem; white-space: nowrap; }
  .pl-btable td { border-bottom: 1px solid var(--line); }
  .pl-bname { font-weight: 600; white-space: normal !important; }
  .pl-shared-row td { background: var(--chip); }
  .pl-total-row td { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 800; }
}

/* ---------- แท็บเล็ต / จอคอม ---------- */
@media screen and (min-width: 1025px) {
  .exp-split { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .exp-side { min-height: 0; }
  .exp-catlist { flex: 1 1 auto; }
  .pl-print { flex: 1 1 auto; min-height: 0; }
  .pl-print > .dash-kpis { flex: none; }
  .pl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
@media screen and (min-width: 1025px) and (max-width: 1360px) {
  .exp-search { width: 210px; }
  .exp-split { grid-template-columns: minmax(0, 1fr) 280px; }
  .exp-c-detail { max-width: 260px; }
  .pl-kpis .dash-kpi { padding: 12px 14px; gap: 12px; }
  .pl-kpis .dash-kpi-ico { width: 38px; height: 38px; border-radius: 12px; }
  .pl-kpis .dash-kpi-body > strong { font-size: 1.3rem; }
  .pl-donut-wrap { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .pl-donut { width: 120px; }
}
@media screen and (min-width: 1500px) {
  .exp-split { grid-template-columns: minmax(0, 1fr) 380px; }
  .exp-c-detail { max-width: 480px; }
  .pl-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); }
  .pl-chart .dch-plot { min-height: 250px; }
  .pl-break .pl-donut-wrap { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
  .pl-break .pl-donut { width: 170px; }
  .pl-break .pl-blist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- มือถือ ---------- */
@media screen and (max-width: 760px) {
  .exp-tools { flex-wrap: wrap; }
  .exp-tools .exp-scope { flex: 1 1 100%; }
  .exp-scope button { flex: 1 1 0; }
  .exp-tools .exp-add-btn { display: none; }
  .exp-search { width: auto; }
  .exp-bar, .pl-bar { gap: 8px; }
  .exp-periods { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .exp-periods::-webkit-scrollbar { display: none; }
  .exp-periods .chip { flex: none; }
  .exp-ro-note { margin-left: 0; width: 100%; }
  .exp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-stats .fit-stat { padding: 10px 12px; }
  .exp-stat-pf .exp-pflegend { gap: 0 8px; }

  .panel.exp-main { padding: 0; background: none; border: 0; box-shadow: none; }
  .exp-chips { margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .exp-chips::-webkit-scrollbar { display: none; }
  .exp-side { display: none !important; }
  .exp-table thead { display: none; }
  .exp-table, .exp-table tbody { display: block; width: 100%; }
  .exp-table tr.exp-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 8px; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  }
  .exp-table tr.exp-row td { display: block; padding: 0 !important; border: 0; background: none !important; max-width: none; }
  .exp-table .exp-c-cat { order: 1; flex: 1 1 0; min-width: 0; font-weight: 700; }
  .exp-table .exp-c-amt { order: 2; flex: none; font-size: 1.02rem; }
  .exp-table .exp-c-detail { order: 3; flex: 1 1 100%; font-size: .9rem; }
  .exp-table .exp-c-date { order: 4; font-size: .8rem; }
  .exp-table .exp-c-branch { order: 5; font-size: .8rem; color: var(--muted); }
  .exp-table .exp-c-pf { order: 6; }
  .exp-table .exp-c-rcpt { order: 7; width: auto; margin-left: auto; }
  .exp-table .exp-note { white-space: normal; }
  .exp-rcpt { width: 30px; height: 30px; }
  .exp-mbar {
    display: block; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 15;
    margin: 0 -16px; padding: 8px 16px; background: linear-gradient(to top, var(--bg) 70%, transparent);
  }
  .exp-mbar .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; font-size: 1rem; box-shadow: var(--shadow-lg); }
  .exp-toast { bottom: calc(146px + env(safe-area-inset-bottom)); }

  .exp-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-amount-box input.exp-amount { font-size: 1.8rem; }
  .exp-pfseg button { font-size: .78rem; min-height: 66px; }
  .exp-edit-grid { grid-template-columns: minmax(0, 1fr); }

  .pl-tools { flex-wrap: wrap; }
  .pl-tools .pl-branch { flex: 1 1 100%; }
  .pl-branch select { max-width: none; flex: 1 1 auto; }
  .pl-tools .pl-exp-link { flex: 1 1 0; justify-content: center; }
  .pl-tools .pl-print-btn { flex: 1 1 0; justify-content: center; }
  .pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-kpis .dash-kpi { padding: 12px 14px; }
  .pl-kpis .dash-kpi-ico { display: none; }
  .pl-kpis .dash-kpi-body > strong { font-size: 1.12rem; }
  .panel.pl-card { padding: 14px; }
  .pl-line { grid-template-columns: minmax(0, 1fr) 3.6em auto; gap: 8px; padding: 6px 4px; font-size: .88rem; }
  .pl-line.minus > :first-child, .pl-line.plus > :first-child, .pl-line.exp > :first-child { padding-left: 8px; }
  .pl-line.exp > :first-child small { display: none; }
  .pl-line.net { font-size: 1rem; padding: 10px; }
  .pl-chart .dch-plot { min-height: 190px; grid-template-columns: 38px minmax(0, 1fr); }
  .pl-chart .dch-x { margin-left: 38px; }
  .pl-donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pl-blist { width: 100%; }
  .pl-btable-wrap { margin: 0; overflow: visible; }
  .pl-btable thead { display: none; }
  .pl-btable, .pl-btable tbody, .pl-btable tfoot { display: block; width: 100%; }
  .pl-btable tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
  .pl-btable td { display: flex; flex-direction: column; padding: 0; border: 0 !important; text-align: left; background: none !important; font-size: .86rem; }
  .pl-btable td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 500; }
  .pl-btable .pl-bname { grid-column: 1 / -1; margin-bottom: 4px; font-size: .95rem; }
  .pl-btable .pl-bcogs, .pl-btable .pl-bmargin { display: none; }
  .pl-btable .pl-shared-row, .pl-btable .pl-total-row { background: var(--chip); }
}

/* ---------- โหมดมืด ---------- */
@media screen {
  html[data-theme="dark"] .pf-account { --pf: #8CC4F2; }
  html[data-theme="dark"] .pf-cash { --pf: #6FD39A; }
  html[data-theme="dark"] .exp-fit, html[data-theme="dark"] .pl-fit { --plc-exp: #F0B44C; }
  html[data-theme="dark"] .exp-pf.pf-drawer, html[data-theme="dark"] .exp-pfseg-ico { filter: brightness(1.25); }
  html[data-theme="dark"] .exp-toast:not(.warn) { background: #ECE7E1; color: #1F1D1B; }
  html[data-theme="dark"] .exp-stat-total { background: color-mix(in srgb, var(--brand) 70%, #1F1D1B); }
  html[data-theme="dark"] .exp-amount::placeholder { color: #4A453F; }
}

/* =========================== พิมพ์ (A4) =========================== */
@page pl-a4 { size: A4; margin: 12mm; }
@media print {
  html[data-print="pl"], html[data-print="pl"] body {
    page: pl-a4; margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #111 !important;
    --ink: #111; --muted: #555; --surface: #fff; --line: #CFCFCF; --chip: #F2F2F2; --bg: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  html[data-print="pl"]:has(.pl-print) body *:not(:has(.pl-print)):not(.pl-print):not(.pl-print *) { display: none !important; }
  html[data-print="pl"]:has(.pl-print) body *:has(.pl-print) {
    display: block !important; position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; background: none !important; box-shadow: none !important; transform: none !important;
  }
  html[data-print="pl"] .pl-print, html[data-print="pl"] .pl-print * { visibility: visible !important; }
  html[data-print="pl"] .pl-print { display: block !important; font-size: 10pt; color: #111; }
  html[data-print="pl"] .pl-print-head { display: block; margin: 0 0 5mm; padding-bottom: 3mm; border-bottom: 1.5px solid #111; }
  html[data-print="pl"] .pl-print-head h1 { margin: 0 0 1mm; font-size: 16pt; }
  html[data-print="pl"] .pl-print-head p { margin: 0; font-size: 10.5pt; font-weight: 600; }
  html[data-print="pl"] .pl-print-head small { color: #555; font-size: 8.5pt; }
  html[data-print="pl"] .pl-kpis { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-bottom: 5mm; }
  html[data-print="pl"] .dash-kpi { padding: 2.5mm 3mm; border: 1px solid #CFCFCF; border-radius: 3mm; box-shadow: none; background: #fff !important; color: #111; }
  html[data-print="pl"] .dash-kpi-ico { display: none; }
  html[data-print="pl"] .dash-kpi-body > strong { font-size: 13pt; }
  html[data-print="pl"] .dash-kpi-label, html[data-print="pl"] .dash-kpi-sub { font-size: 8.5pt; }
  html[data-print="pl"] .pl-body { display: block !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  html[data-print="pl"] .pl-grid, html[data-print="pl"] .pl-col, html[data-print="pl"] .pl-side { display: block !important; }
  html[data-print="pl"] .panel.pl-card { margin: 0 0 5mm; padding: 3.5mm 4mm; border: 1px solid #CFCFCF; border-radius: 3mm; box-shadow: none; background: #fff; break-inside: avoid; }
  html[data-print="pl"] .pl-line { font-size: 10pt; padding: 1.4mm 2mm; }
  html[data-print="pl"] .pl-line.net { font-size: 11.5pt; }
  html[data-print="pl"] .pl-chart .dch-plot { min-height: 55mm; }
  html[data-print="pl"] .pl-btable th, html[data-print="pl"] .pl-btable td { font-size: 9pt; padding: 1.4mm 2mm; }
  html[data-print="pl"] .pl-donut-wrap { grid-template-columns: 38mm 1fr; }
  html[data-print="pl"] .pl-donut { width: 38mm; }
}

/* ฟอร์มย่อยในป๊อปอัป: ไม่ให้แถวปุ่มติดขอบล่างแบบปุ่มหลักของป๊อปอัป */
@media screen {
  .mdl-body .exp-form .actions, .mdl-body .exp-form .actions:last-child {
    position: static; margin: 0; padding: 0; border: 0; background: none;
  }
  .mdl-body .exp-form .actions .btn { flex: 0 0 auto; min-height: 40px; }
}

/* ตารางรายจ่ายบนจอคอม: ความกว้างคอลัมน์คงที่ ไม่ล้นแผง (หมวด/รายละเอียดตัดด้วย …) */
@media screen and (min-width: 761px) {
  .exp-table { table-layout: fixed; }
  .exp-table th.exp-c-date { width: 86px; }
  .exp-table th.exp-c-cat { width: 27%; }
  .exp-table th.exp-c-branch { width: 120px; }
  .exp-table th.exp-c-pf { width: 92px; }
  .exp-table th.exp-c-amt { width: 136px; }
  .exp-table th.exp-c-rcpt { width: 48px; }
  .exp-table .exp-c-cat, .exp-table .exp-c-detail { max-width: none; overflow: hidden; }
  .exp-table .exp-c-branch { overflow: hidden; text-overflow: ellipsis; }
}
@media screen {
  .exp-br-inline { display: none; }
}
@media screen and (min-width: 761px) and (max-width: 1360px) {
  .exp-table th.exp-c-date { width: 76px; }
  .exp-table th.exp-c-cat { width: 25%; }
  .exp-table th.exp-c-pf { width: 80px; }
  .exp-table th.exp-c-amt { width: 118px; }
  .exp-table th.exp-c-rcpt { width: 44px; }
  .exp-table th, .exp-table td { padding-left: 9px; padding-right: 9px; }
  /* จอแคบ: ชื่อสาขาย้ายไปอยู่ใต้รายละเอียด แทนคอลัมน์ของตัวเอง */
  .exp-table .exp-c-branch { display: none; }
  .exp-br-inline { display: inline-block; margin-top: 2px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .72rem; font-weight: 700; }
}
@media screen and (min-width: 1025px) and (max-width: 1360px) {
  .exp-split { grid-template-columns: minmax(0, 1fr) 260px; }
}