.csm-shell,.csm-empty{color:#20242a}
.csm-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 25px;border:1px solid #dfe3e8;border-radius:18px 18px 0 0;background:#fff}
.csm-head h2,.csm-empty h2{margin:6px 0 3px;font-size:25px;letter-spacing:-.035em}
.csm-head p,.csm-empty p{margin:0;color:#79818c;font-size:11px}
.csm-head>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
.csm-head button,.csm-empty>button{min-height:38px;padding:0 13px;border:1px solid #dbe0e5;border-radius:9px;background:#fff;color:#343a43;font-weight:750}
.csm-head button.is-danger{border-color:#ef3340;background:#ef3340;color:#fff}
.csm-status{display:inline-flex;align-items:center;gap:7px;color:#68717c;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.csm-status i{width:7px;height:7px;border-radius:50%;background:#8e97a2}
.csm-status.is-open{color:#087747}
.csm-status.is-open i{background:#15935b;box-shadow:0 0 0 4px #e5f6ec}
.csm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #dfe3e8;border-top:0;background:#fff}
.csm-metrics article{display:grid;gap:5px;min-height:96px;align-content:center;padding:16px 20px;border-left:1px solid #e5e8ec}
.csm-metrics article:first-child{border-left:0}
.csm-metrics span,.csm-ledger>header span,.csm-history>header span,.csm-action-form>div span{color:#7e8691;font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.csm-metrics b{font-size:22px;letter-spacing:-.025em}
.csm-metrics small{color:#8b929d;font-size:9px}
.csm-metrics .is-cash{background:#171b22;color:#fff}
.csm-metrics .is-cash span,.csm-metrics .is-cash small{color:#9ca4af}
.csm-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:14px;margin-top:14px}
.csm-ledger,.csm-history{border:1px solid #dfe3e8;border-radius:14px;background:#fff}
.csm-ledger>header,.csm-history>header{display:flex;align-items:end;justify-content:space-between;padding:17px 19px;border-bottom:1px solid #e6e9ed}
.csm-ledger h3,.csm-history h3{margin:3px 0 0;font-size:15px}
.csm-ledger>header>b{color:#7a828d;font-size:12px}
.csm-operations article{display:grid;grid-template-columns:43px 30px minmax(0,1fr) minmax(130px,auto);gap:10px;align-items:center;padding:13px 18px;border-bottom:1px solid #eceef1}
.csm-operations article:last-child{border-bottom:0}
.csm-operations time{color:#7e8691;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace}
.csm-operations article>i{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;background:#eaf8f0;color:#087747;font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.csm-operations article.is-out>i{background:#fff0f1;color:#b5222d}
.csm-operations article>div{display:grid;gap:3px;min-width:0}
.csm-operations article>div b{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.csm-operations article>div span,.csm-operations article>div small{overflow:hidden;color:#7c8490;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.csm-operations aside{display:grid;justify-items:end;gap:3px;text-align:right}
.csm-operations aside>b{font-size:12px}
.csm-operations article.is-out aside>b{color:#b5222d}
.csm-operations aside span,.csm-operations aside small{color:#858d98;font-size:9px}
.csm-history>div{padding:7px}
.csm-history button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px;border:0;border-radius:9px;background:#fff;text-align:left}
.csm-history button:hover,.csm-history button:focus-visible{background:#f5f6f8;outline:0}
.csm-history button.is-selected{background:#fff2f3;box-shadow:inset 3px 0 #ef3340}
.csm-history button span{display:grid;gap:3px}
.csm-history button b{font-size:10px}
.csm-history button small{color:#858d98;font-size:8px}
.csm-history button em{color:#555d68;font-size:9px;font-style:normal;font-weight:800}
.csm-history p{padding:12px;color:#858d98;font-size:10px}
.csm-action-form{display:grid;grid-template-columns:minmax(170px,1fr) 160px minmax(190px,1fr) auto;gap:10px;align-items:end;padding:15px 18px;border:1px solid #f0c5c9;border-top:0;background:#fff7f8}
.csm-action-form>div{display:grid;gap:4px}
.csm-action-form>div b{font-size:11px}
.csm-action-form label{display:grid;gap:5px}
.csm-action-form label>span{color:#68717e;font-size:9px;font-weight:750}
.csm-action-form input{box-sizing:border-box;width:100%;height:38px;padding:0 10px;border:1px solid #d9dde3;border-radius:8px;background:#fff;font:inherit}
.csm-action-form button{height:38px;padding:0 14px;border:0;border-radius:8px;background:#ef3340;color:#fff;font-weight:800}
.csm-action-form.is-open{grid-template-columns:1fr 1fr auto;margin-top:18px;border:1px solid #dde2e7;border-radius:12px;background:#fff}
.csm-empty{display:grid;justify-items:start;padding:26px;border:1px solid #dde2e7;border-radius:16px;background:#fff}
.csm-empty>span{color:#087747;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.csm-empty>button{margin-top:16px}
.csm-error{margin:0;padding:10px 18px;background:#fff0f1;color:#b5222d;font-size:11px}
.csm-loading,.csm-no-operations{display:grid;min-height:180px;place-content:center;justify-items:center;gap:7px;color:#828a95;font-size:10px}
.csm-loading i{width:24px;height:24px;border:2px solid #e2e5e9;border-top-color:#ef3340;border-radius:50%;animation:csm-spin .7s linear infinite}
.csm-no-operations b{color:#434a54}
@keyframes csm-spin{to{transform:rotate(360deg)}
}
@media(max-width:950px){.csm-metrics{grid-template-columns:repeat(2,1fr)}
.csm-metrics article:nth-child(3){border-top:1px solid #e5e8ec;border-left:0}
.csm-metrics article:nth-child(4){border-top:1px solid #e5e8ec}
.csm-layout{grid-template-columns:1fr}
.csm-history{grid-row:1}
.csm-history>div{display:flex;overflow:auto}
.csm-history button{min-width:170px}
.csm-action-form{grid-template-columns:1fr 1fr}
.csm-action-form>div,.csm-action-form button{grid-column:1/-1}
}
@media(max-width:620px){.csm-head{align-items:flex-start;flex-direction:column}
.csm-metrics{grid-template-columns:1fr}
.csm-metrics article{border-top:1px solid #e5e8ec;border-left:0}
.csm-metrics article:first-child{border-top:0}
.csm-operations article{grid-template-columns:35px 28px minmax(0,1fr)}
.csm-operations aside{grid-column:3;justify-items:start;text-align:left}
.csm-action-form,.csm-action-form.is-open{grid-template-columns:1fr}
.csm-action-form>*{grid-column:auto!important}
}
@media(prefers-reduced-motion:reduce){.csm-loading i{animation:none}
}

/* Cash drawer operations and exact payment breakdown. */
.csm-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.csm-payment-breakdown{margin-top:14px;border:1px solid #dfe3e8;border-radius:14px;background:#fff}
.csm-payment-breakdown>header{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid #e6e9ed}
.csm-payment-breakdown>header span{color:#7e8691;font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.csm-payment-breakdown>header b{font-size:10px}
.csm-payment-breakdown>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.csm-payment-breakdown article{display:grid;gap:4px;padding:13px 18px;border-left:1px solid #eceef1}
.csm-payment-breakdown article:first-child{border-left:0}
.csm-payment-breakdown article span{color:#747d88;font-size:9px;font-weight:800}
.csm-payment-breakdown article b{font-size:15px}
.csm-payment-breakdown article small{color:#8b929d;font-size:8px}
.csm-action-form.is-movement{grid-template-columns:minmax(170px,.8fr) 145px minmax(180px,1fr) minmax(180px,1fr) auto;border-color:#d7e4dc;background:#f7fcf9}
.csm-reconciliation{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dce4df;border-top:0;background:#f4fbf7}
.csm-reconciliation article{display:grid;gap:4px;padding:13px 20px;border-left:1px solid #dce4df}.csm-reconciliation article:first-child{border-left:0}
.csm-reconciliation span{color:#6f7b74;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.csm-reconciliation b{font-size:16px}.csm-reconciliation small{color:#737d77;font-size:9px}
.csm-reconciliation.is-mismatch{border-color:#f0c5c9;background:#fff5f6}.csm-reconciliation.is-mismatch article{border-color:#f0c5c9}.csm-reconciliation.is-mismatch article:last-child b{color:#b5222d}
.csm-reconciliation.is-automatic{display:block;border-color:#e1e4e8;background:#f7f8fa}.csm-reconciliation.is-automatic>div{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;padding:13px 20px}.csm-reconciliation.is-automatic b{font-size:13px}
.csm-action-form.is-movement button{background:#168a55}
@media(max-width:950px){.csm-action-form.is-movement{grid-template-columns:1fr 1fr}.csm-action-form.is-movement>div,.csm-action-form.is-movement>button{grid-column:1/-1}}
@media(max-width:620px){.csm-action-form.is-movement{grid-template-columns:1fr}.csm-payment-breakdown>div{grid-template-columns:1fr}.csm-payment-breakdown article{border-top:1px solid #eceef1;border-left:0}.csm-payment-breakdown article:first-child{border-top:0}}
@media(max-width:620px){.csm-reconciliation{grid-template-columns:1fr}.csm-reconciliation article{border-top:1px solid #dce4df;border-left:0}.csm-reconciliation article:first-child{border-top:0}.csm-reconciliation.is-automatic>div{grid-template-columns:1fr;gap:4px}}
