/* The counting layout shared by every screen where someone stands in front of
   stock and types what is actually there: goods receiving, transfer picking,
   transfer receipt and stock counts.

   Receiving owns the reference design in GoodsReceivingDetail.razor.css. That
   copy stays scoped to its page; this one carries the same measurements under a
   cs- prefix so the other screens can wear it without four copies drifting
   apart. Keep the two in step when either changes.

   The shape: a counting table on the left, and a summary column on the right
   that answers "what am I about to commit" without scrolling back up. */

.cs-sheet{display:block;max-width:1440px;color:#23392f}
.cs-sheet :is(a,button,input,textarea,select):focus-visible{outline:3px solid #9fcbb4;outline-offset:2px}

.cs-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.cs-main,.cs-side{display:grid;gap:22px;min-width:0}

/* The summary column rides down the page with the counter. A sheet runs to
   hundreds of lines, and the two numbers that say "what am I about to commit"
   are worth nothing at the top of a scroll that ends elsewhere. 84px clears the
   sticky top bar, the same offset the purchase-order summary uses. Where the
   column is taller than the screen it scrolls on its own, so Cancel count never
   ends up stranded below the fold. Only in the two-column layout: under
   1100px the column sits above the rows and has nothing to follow. */
@media(min-width:1101px){
    .cs-side{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain}
    .cs-side::-webkit-scrollbar{width:8px}
    .cs-side::-webkit-scrollbar-track{background:transparent}
    .cs-side::-webkit-scrollbar-thumb{border-radius:99px;background:#d9e2dc}
}

.cs-card{min-width:0;border:1px solid #e2e9e4;border-radius:12px;background:#fff;box-shadow:0 3px 8px rgba(23,56,45,.012);overflow:hidden}
.cs-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px}
.cs-card-head>div{min-width:0}
.cs-card-head h2{margin:0;font:650 1.05rem 'Manrope',sans-serif;letter-spacing:-.02em;color:#17382d}
.cs-card-head p{margin:6px 0 0;color:#73817b;font-size:.76rem}
.cs-card-icon{display:grid;place-items:center;color:#8a9f90}
.cs-card-icon svg{width:17px;height:17px}
.cs-eyebrow{margin-bottom:5px;color:#1b634b;font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.cs-optional{padding:3px 7px;border-radius:4px;background:#f3f5f2;color:#73817b;font-size:.63rem;font-weight:500}
.cs-count{padding:4px 10px;border-radius:20px;background:#f0f4f0;color:#73817b;font-size:.7rem}

.cs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px 20px}
.cs-scan-hint{display:flex;align-items:center;gap:8px;color:#73817b;font-size:.72rem;line-height:1.5}
.cs-scan-hint svg{width:17px;height:17px;flex:none}
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 14px;border:1px solid #d6e0d9;border-radius:7px;background:#fff;color:#1b634b;font-size:.76rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s}
.cs-btn:hover:enabled{background:#e5eee8}
.cs-btn:disabled{opacity:.45;cursor:not-allowed}
.cs-btn svg{width:16px;height:16px;flex:none}
.cs-btn.cs-primary{border-color:#1b634b;background:#1b634b;color:#fff}
.cs-btn.cs-primary:hover:enabled{background:#124c38}
.cs-btn.cs-danger{border-color:#d9b4ae;background:#fff;color:#9a4034}
.cs-btn.cs-danger:hover:enabled{background:#fdf2f0}
.cs-help{margin:0 24px 18px;color:#73817b;font-size:.72rem;line-height:1.6}
.cs-note{margin:0 24px 20px;padding:10px 12px;border:1px solid #e6ede3;border-radius:7px;background:#f5f8f3;color:#61766a;font-size:.72rem;line-height:1.6}

/* Five columns on the desktop table; the header labels them once rather than
   repeating a label inside every row. */
.cs-table-head,.cs-row{display:grid;grid-template-columns:minmax(160px,1fr) 46px 118px 104px 112px;gap:14px;align-items:start}
.cs-table-head{padding:11px 24px;border-block:1px solid #e2e9e4;background:#f8faf8;color:#73817b;font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cs-row{min-height:138px;padding:24px;border-bottom:1px solid #e2e9e4}
.cs-rows .cs-row:last-child{border-bottom:0}
/* Screens with nothing to put in the actions column drop it rather than leave
   a ragged gap down the right of every row. */
.cs-table--lean .cs-table-head,.cs-table--lean .cs-row{grid-template-columns:minmax(160px,1fr) 70px 118px 104px}
.cs-row.is-hit{background:#f4faf5}

.cs-product{min-width:0;padding-top:3px}
.cs-name{font-size:.84rem;font-weight:600;line-height:1.55;color:#23392f;overflow-wrap:anywhere}
.cs-sku{margin-top:4px;color:#73817b;font-size:.72rem}
.cs-flag{display:inline-block;margin-top:5px;color:#1b634b;font-size:.65rem}
.cs-flag.is-warn{color:#86662a}

.cs-due-cell{padding-top:7px}
.cs-due{display:inline-block;padding:3px 10px;border-radius:5px;background:#edf5ef;font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}
.cs-due.is-quiet{background:#f3f5f2;color:#73817b}

.cs-qty-cell,.cs-second-cell{min-width:0}
.cs-stepper{display:flex;align-items:stretch;width:112px;height:42px;border:1px solid #d6e0d9;border-radius:7px;background:#fff;overflow:hidden;isolation:isolate}
.cs-stepper button{flex:0 0 32px;width:32px;display:grid;place-items:center;padding:0;border:0;background:#f4f8f3;color:#1b634b;font-size:1.05rem;line-height:1;cursor:pointer}
.cs-stepper button:hover:enabled{background:#e5eee8}
.cs-stepper button:disabled{background:#f8faf7;color:#a8b9af;cursor:not-allowed}
.cs-stepper input{flex:1 1 0;width:0;min-width:0;height:100%;margin:0;padding:0 2px;border:0;border-inline:1px solid #e2e9e4;background:#fff;color:#17382d;font-size:.88rem;font-weight:650;text-align:center;appearance:textfield;font-variant-numeric:tabular-nums}
.cs-stepper input::-webkit-inner-spin-button,.cs-stepper input::-webkit-outer-spin-button{appearance:none;margin:0}
.cs-stepper:focus-within{outline:2px solid #91bfa3;outline-offset:2px}
.cs-stepper input:focus-visible{outline:0}
.cs-stepper input.is-dirty{background:#fffaf0;color:#7a5a18}
.cs-text-btn{margin-top:5px;padding:4px 0 0;border:0;background:transparent;color:#1b634b;font-size:.66rem;font-weight:600;cursor:pointer}
.cs-text-btn:disabled{opacity:.45;cursor:not-allowed}

.cs-second-field{display:block;margin:0;width:100%}
.cs-second-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cs-second-input{display:block}
.cs-second-input input{width:100%;min-width:0;height:42px;padding:8px 10px;border:1px solid #d6e0d9;border-radius:7px;background:#fff;color:#17382d;font-size:.88rem;font-weight:600;text-align:center;appearance:textfield;font-variant-numeric:tabular-nums}
.cs-second-input input::-webkit-inner-spin-button,.cs-second-input input::-webkit-outer-spin-button{appearance:none;margin:0}
/* The derived number the counter actually cares about. */
.cs-derived{display:flex;align-items:center;gap:5px;margin-top:9px;color:#1b634b;font-size:.66rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-derived::before{content:"";width:4px;height:4px;flex:none;border-radius:50%;background:#75a487}
.cs-derived.is-up{color:#1b634b}
.cs-derived.is-up::before{background:#75a487}
.cs-derived.is-down{color:#9a4034}
.cs-derived.is-down::before{background:#c98279}
.cs-derived.is-flat{color:#73817b}
.cs-derived.is-flat::before{background:#b8c3ba}

.cs-actions{display:grid;gap:7px;padding-top:4px;min-width:0}
.cs-actions button{display:flex;align-items:center;gap:6px;min-height:26px;padding:2px 0;border:0;background:none;color:#5d7364;font-size:.66rem;white-space:nowrap;text-align:left;cursor:pointer}
.cs-actions button:hover{color:#17382d}
.cs-actions button:disabled{opacity:.45;cursor:not-allowed}
.cs-actions svg{width:14px;height:14px;flex:none}
.cs-actions .cs-row-scan{justify-content:center;padding:6px 7px;min-height:34px;border:1px solid #d6e5da;border-radius:6px;background:#edf5ef;color:#1b634b;font-weight:600}
.cs-actions .cs-row-scan:hover{background:#e0eee3}

.cs-helper{display:flex;align-items:center;gap:8px;padding:14px 24px;border-top:1px solid #e2e9e4;background:#fbfcfa;color:#73817b;font-size:.7rem;line-height:1.6}
.cs-helper svg{width:14px;height:14px;flex:none}

.cs-form{padding:0 24px 24px}
.cs-field{display:block;margin-bottom:17px;color:#54685a;font-size:.72rem;font-weight:600}
.cs-field :is(input,select){display:block;width:100%;min-width:0;height:41px;margin-top:7px;padding:10px 11px;border:1px solid #d6e0d8;border-radius:6px;background:#fff;color:#17382d;font-size:.78rem;font-weight:500}
.cs-field input::placeholder{color:#a0ada3;font-weight:400}
.cs-field input:disabled{background:#f3f5f2;color:#6c7e72;cursor:not-allowed}
.cs-check{display:flex;align-items:center;gap:8px;color:#68796e;font-size:.72rem;cursor:pointer}
.cs-check input{width:15px;height:15px;flex:none;accent-color:#1b634b}

.cs-summary{padding:0 24px 22px}
.cs-summary-row{display:flex;justify-content:space-between;gap:12px;margin:12px 0;color:#73817b;font-size:.78rem}
.cs-summary-row strong{color:#17382d;font-weight:600;font-variant-numeric:tabular-nums}
.cs-summary-key{margin:17px -12px 0;padding:13px 12px;border-top:1px solid #e2e9e4;border-radius:6px;background:#f4f8f3;color:#1b634b}
.cs-summary-key strong{color:#1b634b;font-size:1rem}
.cs-summary-key.is-warn{background:#faf3e2;color:#86662a}
.cs-summary-key.is-warn strong{color:#86662a}
.cs-progress{height:5px;margin:17px 0 23px;border-radius:4px;background:#edf1eb;overflow:hidden}
.cs-progress>div{height:100%;background:#418b65;transition:width .2s}
.cs-submit{width:100%;min-height:43px;font-size:.78rem}
.cs-submit+.cs-submit{margin-top:8px}
.cs-summary-foot{margin:9px 0 0;color:#73817b;font-size:.68rem;text-align:center}

/* Pages that already have their own side column carry the running total and the
   commit button in a footer strip instead, so the counter still sees both
   without a second narrow column squeezing the table. */
.cs-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:18px 24px;border-top:1px solid #e2e9e4;background:#fbfcfa}
.cs-foot-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-right:auto;min-width:0}
.cs-foot-fact{display:flex;align-items:baseline;gap:7px;color:#73817b;font-size:.74rem;white-space:nowrap}
.cs-foot-fact strong{color:#17382d;font-size:.95rem;font-weight:650;font-variant-numeric:tabular-nums}
.cs-foot-fact.is-key strong{color:#1b634b}
.cs-foot .cs-btn{min-height:43px}

.cs-empty{padding:30px;text-align:center}
.cs-empty strong{font-size:.78rem;font-weight:600;color:#17382d}
.cs-empty p{margin:5px 0 0;color:#73817b;font-size:.72rem}

/* A refusal and a confirmation have to be told apart at a glance: the counter
   is standing in an aisle, reading this at arm's length. */
.cs-banner{display:flex;align-items:flex-start;gap:11px;margin:0 0 16px;padding:13px 15px;border:1px solid;border-left-width:4px;border-radius:9px}
.cs-banner svg{width:17px;height:17px;flex:none;margin-top:1px}
.cs-banner-text{display:grid;gap:2px;min-width:0}
.cs-banner-text strong{font-size:.82rem;font-weight:700}
.cs-banner-text span{font-size:.78rem;line-height:1.5;overflow-wrap:anywhere}
.cs-banner-x{flex:none;margin-left:auto;padding:0 4px;border:0;background:none;color:inherit;font-size:1.15rem;line-height:1;opacity:.6;cursor:pointer}
.cs-banner-x:hover{opacity:1}
.cs-banner.is-error{border-color:#e4b9b3;border-left-color:#b4493c;background:#fdf3f1;color:#8d382e}
.cs-banner.is-ok{border-color:#cfe3d5;border-left-color:#1b634b;background:#f2f8f3;color:#1b634b}

/* The offending row can be well off-screen on a paged sheet, so the complaint
   is repeated under the field it is about. */
.cs-line-error{display:flex;align-items:flex-start;gap:6px;margin:7px 0 0;color:#8d382e;font-size:.68rem;line-height:1.45}
.cs-line-error svg{width:12px;height:12px;flex:none;margin-top:1px}

.cs-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 24px;border-top:1px solid #e2e9e4;background:#fbfcfa}
.cs-pager-count{color:#73817b;font-size:.72rem;font-variant-numeric:tabular-nums}
.cs-pager-steps{display:flex;align-items:center;gap:10px}
.cs-pager-steps .cs-btn{min-height:38px}
.cs-pager-page{color:#17382d;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Rendered by the app rather than a native dialog, which would need interop. */
.cs-dlg-scrim{position:fixed;inset:0;z-index:120;background:rgba(22,51,42,.4);backdrop-filter:blur(2px)}
.cs-dlg{position:fixed;z-index:130;top:50%;left:50%;transform:translate(-50%,-50%);width:min(430px,calc(100vw - 32px));max-height:min(88vh,860px);overflow-y:auto;padding:24px;border:1px solid #e2e9e4;border-radius:14px;background:#fff;color:#17382d;box-shadow:0 24px 80px rgba(16,45,42,.19)}
.cs-dlg h2{margin:0 0 8px;font:650 1.05rem 'Manrope',sans-serif;letter-spacing:-.02em}
.cs-dlg-product{margin:0 0 4px;color:#17382d;font-size:.82rem;font-weight:600}
.cs-dlg-product i{padding:0 6px;color:#b8c3ba;font-style:normal}
.cs-dlg-lead{margin:0 0 18px;color:#73817b;font-size:.76rem;line-height:1.6}
.cs-dlg .cs-code-input{font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
.cs-dlg footer{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.cs-dlg-status{margin-right:auto;color:#73817b;font-size:.7rem;text-align:left}
.cs-dlg .camera-scanner{margin:0 0 16px}
.cs-dlg .camera-open{width:100%;min-height:42px;border:1px solid #d6e0d9;border-radius:7px;background:#edf5ef;color:#1b634b;font-size:.78rem;font-weight:600}
.cs-dlg .camera-open:hover:not(:disabled){background:#e0eee3}
.cs-dlg .camera-panel{width:100%}

@media(max-width:1100px){
    .cs-layout{grid-template-columns:1fr}
    .cs-side{grid-template-columns:1fr 1fr;align-items:start}
    .cs-table-head,.cs-row{grid-template-columns:minmax(150px,1fr) 44px 112px 100px 110px}
    .cs-table--lean .cs-table-head,.cs-table--lean .cs-row{grid-template-columns:minmax(150px,1fr) 66px 112px 100px}
}

@media(max-width:780px){
    .cs-sheet{font-size:.9rem}
    .cs-side{grid-template-columns:1fr}
    .cs-card-head,.cs-toolbar{padding-inline:20px}
    .cs-help,.cs-note{margin-inline:20px}
    .cs-toolbar{flex-wrap:wrap;gap:10px}
    .cs-toolbar .cs-btn{min-height:44px;flex:1 1 140px}

    /* The header cannot label columns that no longer sit in columns, so each
       cell carries its own label on a phone. */
    .cs-table-head{display:none}
    .cs-row,.cs-table--lean .cs-row{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 14px;padding:22px 20px}
    .cs-row>.cs-product{grid-column:1/-1;padding-right:72px}
    .cs-name{font-size:.9rem}
    .cs-due-cell{position:absolute;top:22px;right:20px;padding:0}
    .cs-qty-cell{grid-column:1;grid-row:2}
    .cs-qty-cell::before{content:attr(data-label);display:block;margin-bottom:8px;color:#73817b;font-size:.63rem;font-weight:700;letter-spacing:.08em}
    .cs-stepper{width:100%;height:48px}
    .cs-stepper button{flex-basis:34px;width:34px;font-size:1.15rem}
    .cs-stepper input{font-size:1rem}
    .cs-second-cell{grid-column:2;grid-row:2}
    .cs-second-label{position:static;width:auto;height:auto;clip:auto;display:block;margin:0 0 8px;overflow:visible;color:#73817b;font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
    .cs-second-input input{height:48px;font-size:1rem}
    .cs-text-btn{min-height:36px;font-size:.7rem}
    .cs-derived{margin-top:10px;font-size:.7rem;white-space:normal}
    /* Row actions become real targets once they are the only way in. */
    .cs-actions{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px;border-top:1px solid #e2e9e4}
    .cs-actions button{justify-content:center;min-height:44px;padding:7px 8px;border:1px solid #e2e9e4;border-radius:6px;background:#fafcf9;font-size:.72rem;white-space:normal}
    .cs-actions button:hover{background:#edf5ef}
    .cs-actions .cs-row-scan{grid-column:1/-1;min-height:46px;font-size:.78rem}

    .cs-pager{padding-inline:20px}
    .cs-pager-steps{flex:1 1 100%;justify-content:space-between}
    .cs-pager-steps .cs-btn{min-height:46px;padding-inline:18px}
    .cs-foot{padding-inline:20px}
    .cs-foot .cs-btn{flex:1 1 100%;min-height:48px;font-size:.82rem}
    .cs-helper{padding-inline:20px;align-items:flex-start}
    .cs-form,.cs-summary{padding-inline:20px}
    .cs-field :is(input,select){height:46px;font-size:1rem}
    .cs-check{min-height:44px;font-size:.78rem}
    .cs-check input{width:18px;height:18px}
    .cs-summary-row{font-size:.82rem}
    .cs-submit{min-height:48px;font-size:.82rem}
    .cs-dlg{padding:20px}
    .cs-dlg footer{flex-wrap:wrap}
    .cs-dlg-status{flex:1 1 100%;margin:0 0 6px}
}

@media(max-width:380px){
    .cs-card-head,.cs-toolbar,.cs-helper,.cs-form,.cs-summary,.cs-foot{padding-inline:16px}
    .cs-help,.cs-note{margin-inline:16px}
    .cs-row,.cs-table--lean .cs-row{padding:20px 16px}
    .cs-due-cell{top:20px;right:16px}
}

@media(prefers-reduced-motion:reduce){.cs-progress>div,.cs-btn{transition:none}}