/* Scalpia POS — staff pages and their editors (counts, deliveries, transfers, stock ops, activity, timeclock): owned by the "staff" screen agent of the native redesign; builds on web/ui/native.css (read its guide). */
/* Rules: /home/mathis/docs/audits/scalpia-pos-mobile-native-benchmark.md § 5 (lists), § 8 (shift / clock), § 9 (stock documents).
   Markup: web/staff.mjs (pages, sheets, lines) and web/timeclock.mjs (clock card, week). Phone = max-width 699px. */

/* ── 1. Staff pages: subheaders, native rows, hub, empty state, main action ──────────────────────────────────────────── */
.staff-heading p{display:flex;flex-wrap:wrap;gap:0 var(--space-1);font-size:var(--text-md);line-height:var(--leading-md)}
.staff-section{margin-top:var(--space-2)}
.staff-section-title{margin:0;padding:var(--space-4) 0 var(--space-2);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--primary)}
.staff-hint{margin:0 0 var(--space-2);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.staff-list{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
/* Row: round tonal icon, title + meta, trailing status; the row's own action (.staff-go) covers the row with its ::after. */
.staff-row{position:relative;flex-wrap:wrap;min-height:var(--row-h-2);row-gap:var(--space-1)}
.staff-row .list-text{flex:1 1 0}
.staff-row-icon,.staff-hub .list-leading{border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg)}
.staff-row-trailing{flex:none;display:flex;align-items:center}
.staff-row .tag{white-space:nowrap}
.staff-row .list-subtitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.staff-row-status{margin-top:var(--space-1)}
.staff-row .list-text>span:not(.list-title):not(.list-subtitle){display:block}
.staff-go{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:0 var(--space-4);border:0;border-radius:var(--radius-full);font-size:var(--text-md);font-weight:var(--weight-semibold);white-space:nowrap}
.staff-row.has-go .staff-go::after{content:'';position:absolute;inset:0;z-index:0}
.staff-row.has-go:active{background:var(--state-press)}
.staff-go:disabled{opacity:.6;cursor:default}
.staff-go-chevron{width:var(--touch);min-width:var(--touch);padding:0;margin-right:calc(-1 * var(--space-3));background:transparent;color:var(--text-muted)}
.staff-row-actions{position:relative;z-index:1;flex:1 0 100%;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);padding:0 0 var(--space-1) calc(var(--avatar) + var(--space-4))}
.staff-row-actions button{min-height:var(--touch);padding:0 var(--space-4);border-radius:var(--radius-full);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.staff-row .staff-blocked{margin-top:var(--space-1);font-size:var(--text-md)}
button.staff-danger-text{color:var(--danger-fg)}
.staff-badge{display:inline-grid;place-items:center;min-width:var(--icon);height:var(--icon);padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--primary);color:var(--on-primary);font-size:var(--text-xs);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.staff-hub .list-row{min-height:var(--row-h-2)}
.staff-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-4);text-align:center;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.staff-empty-icon{display:grid;place-items:center;width:var(--fab-size);height:var(--fab-size);border-radius:50%;background:var(--surface);color:var(--text-muted)}
.staff-fab{display:inline-flex;align-items:center;gap:var(--space-2)}
.staff-fab .ui-icon{width:var(--space-5);height:var(--space-5)}
@media(hover:hover){.staff-row.has-go:hover{background:var(--state-hover)}}
@media(max-width:699px){
 .staff-page .staff-list{margin:0 calc(-1 * var(--space-4));border-width:1px 0;border-radius:0}
 .staff-heading{flex-direction:column;align-items:stretch;gap:var(--space-2);margin-bottom:0}
 .staff-heading .staff-space{display:none}
 .staff-heading>div:first-child:not(:has(.staff-drafts)){display:none}
 .staff-heading p{margin:0;color:var(--text-muted)}
 .staff-heading .actions{justify-content:flex-start;flex-wrap:wrap;gap:var(--space-2)}
 .staff-page .staff-heading .actions button:not(.staff-fab){min-height:var(--touch);padding:0 var(--space-4);border-radius:var(--radius-full);font-size:var(--text-md)}
 /* Main action = extended FAB, bottom right, above the navigation bar. */
 .staff-page .staff-heading .actions .staff-fab{position:fixed;right:var(--space-4);bottom:calc(var(--space-4) + env(safe-area-inset-bottom));z-index:15;height:var(--fab-size);min-height:var(--fab-size);padding:0 var(--space-5) 0 var(--space-4);border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-2);font-size:var(--text-md);font-weight:var(--weight-semibold)}
 .staff-page.has-fab{padding-bottom:calc(var(--fab-size) + var(--space-10))}
 .staff-hint{margin-top:var(--space-2)}
}
@media(max-width:650px){.staff-page .staff-heading .actions .staff-fab{bottom:calc(var(--nav-bar-h) + var(--space-4) + env(safe-area-inset-bottom))}}

/* ── 2. Stock sheets (count, reception, transfer, stock report, task): page, header rows, lines, bottom bar ─────────── */
#modal-form[data-staff-kind] .staff-intro{margin:0 0 var(--space-2);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.staff-draft-status{color:var(--primary)}
/* Header: compact rows (label inside, hairline under), no filled boxes. */
#modal-form[data-staff-kind] .staff-head{gap:0 var(--space-4)}
#modal-form[data-staff-kind] .staff-head .tf-input .tf-box{background:transparent;border-radius:0;box-shadow:inset 0 -1px 0 var(--border)}
#modal-form[data-staff-kind] .staff-head .tf-input .tf-box:focus-within{box-shadow:inset 0 -2px 0 var(--primary)}
#modal-form[data-staff-kind] .staff-head .tf-input .tf-box>label{left:0}
#modal-form[data-staff-kind] .staff-head .tf-input .tf-box>input{padding-left:0}
#modal-form[data-staff-kind] .staff-head>.notice,#modal-form[data-staff-kind] .staff-head>.staff-summary{grid-column:1/-1}
.staff-summary{display:flex;align-items:center;gap:var(--space-4);min-height:var(--row-h-2);border-bottom:1px solid var(--border)}
.staff-summary .staff-row-icon{flex:none;display:grid;place-items:center;width:var(--avatar);height:var(--avatar)}
.staff-summary-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.staff-summary-text strong{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.staff-summary-text span{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
/* Note folded behind a "+ Catatan" row. */
.staff-note>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch);list-style:none;cursor:pointer;color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-semibold);border-bottom:1px solid var(--border)}
.staff-note>summary::-webkit-details-marker{display:none}
.staff-note[open]>summary{display:none}
.staff-note[open]{margin-top:var(--space-3)}
/* Lines: the main content, under a sticky scan / search bar. */
.staff-lines-section{margin-top:var(--space-3)}
#modal-form[data-staff-kind] .line-search{position:sticky;top:calc(-1 * var(--modal-pad));z-index:2;margin:0;padding:var(--space-2) 0;background:var(--surface)}
#modal-form[data-staff-kind] .line-search .search{min-height:var(--touch);font-size:var(--text-lg)}
#modal-form[data-staff-kind] .staff-count-bar{background:var(--surface)}
.staff-lines-head{grid-template-columns:var(--touch) minmax(0,1fr) auto;padding:var(--space-2) 0 var(--space-1);text-transform:none;font-weight:var(--weight-semibold)}
.staff-lines-head span:last-child{min-width:144px;text-align:center}
#modal-form .staff-line{position:relative;grid-template-columns:var(--touch) minmax(0,1fr) auto;align-items:center;gap:var(--space-2);min-height:64px;padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
#modal-form .staff-line.fixed{grid-template-columns:minmax(0,1fr) auto}
#modal-form .staff-line-main{gap:2px}
#modal-form .staff-line-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-medium);color:var(--text)}
#modal-form .staff-line-sub,#modal-form .staff-line .staff-reference{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
#modal-form .staff-line .staff-reference{color:var(--tonal-fg);font-weight:var(--weight-semibold)}
#modal-form .staff-line-main select{min-height:var(--touch);padding:0 var(--space-2);border:0;border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--field-line);font-size:var(--text-lg)}
/* Filled line: a green accent on the left edge of the sheet. */
#modal-form .staff-line:has([name=staffQuantity]:not(:placeholder-shown))::before{content:'';position:absolute;left:calc(-1 * var(--modal-pad));top:var(--space-2);bottom:var(--space-2);width:3px;border-radius:var(--radius-sm);background:var(--primary)}
#modal-form .staff-line-remove{display:grid;place-items:center;width:var(--touch);min-width:var(--touch);height:var(--touch);min-height:var(--touch);padding:0;border-radius:50%;color:var(--text-muted)}
/* Quantity: − [ 12 ] + in one filled pill, 48 px tall. */
#modal-form .staff-line-qty{display:inline-flex;align-items:center;height:var(--touch);border-radius:var(--radius-full);background:var(--field-bg)}
#modal-form .staff-line-qty:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
#modal-form .staff-step{display:grid;place-items:center;width:44px;min-width:44px;height:var(--touch);min-height:var(--touch);padding:0;border:0;border-radius:50%;background:transparent;color:var(--primary)}
#modal-form .staff-step:active{background:var(--state-press)}
#modal-form .staff-line-qty input{width:56px;min-height:var(--touch);height:var(--touch);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;font-size:var(--text-xl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--text);-moz-appearance:textfield;appearance:textfield}
#modal-form .staff-line-qty input::-webkit-outer-spin-button,#modal-form .staff-line-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#modal-form .staff-line-qty input::placeholder{color:var(--text-muted);font-weight:var(--weight-regular)}
#modal-form .staff-line-qty input:focus{outline:0}
#modal-form .staff-lines-hint{padding:var(--space-4) 0;font-size:var(--text-md);text-align:center}
/* Photos and issues: a subheader and a tonal row button with an icon. */
#modal-form[data-staff-kind] .staff-photos{margin:var(--space-4) 0 0}
#modal-form[data-staff-kind] .staff-photos h3{margin:0 0 var(--space-2);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--primary)}
#modal-form .staff-photo-add,#modal-form .staff-add-issue{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch);font-size:var(--text-md);font-weight:var(--weight-semibold)}
#modal-form .staff-add-issue{width:100%;margin-top:var(--space-3);background:transparent;color:var(--primary);border-top:1px solid var(--border);border-radius:0;justify-content:flex-start;padding:0}
/* Bottom bar: totals on the left, the send button on the right. */
#modal-form[data-staff-kind] .modal-footer{align-items:center;gap:var(--space-4)}
.staff-totals{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;margin-right:auto;font-variant-numeric:tabular-nums}
.staff-totals strong{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold);color:var(--text)}
.staff-totals span{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
@media(max-width:699px){
 #modal-form[data-staff-kind] .staff-head{gap:0}
 #modal-form[data-staff-kind] .modal-footer>.staff-totals{flex:1 1 0}
 #modal-form[data-staff-kind] .modal-footer>button[type=submit]{flex:1.4 1 0;min-height:var(--touch)}
 .staff-lines-head span:last-child{min-width:144px}
}

/* ── 3. Owner review queue (detail page decision footer keeps its own layout) ─────────────────────────────────────── */
.staff-review-foot .text-button{color:var(--danger-fg)}

/* ── 4. Time clock: clock card, today's punches, week ────────────────────────────────────────────────────────────── */
.timeclock-me{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-4) var(--space-6);margin:0 0 var(--space-4);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.timeclock-clock{display:flex;flex-direction:column;gap:var(--space-1)}
.timeclock-time{font-size:var(--text-amount);line-height:var(--leading-amount);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;color:var(--text)}
.timeclock-date{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.timeclock-who{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.timeclock-avatar{flex:none;display:grid;place-items:center;width:var(--fab-size);height:var(--fab-size);border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.timeclock-who-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:0}
.timeclock-who-text strong{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.timeclock-punches{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}
.timeclock-punches button{min-height:var(--fab-size);padding:0 var(--space-6);border-radius:var(--radius-full);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.timeclock-punches .primary{order:-1}
.timeclock-today{margin:0 0 var(--space-4)}
.timeclock-today .list-group{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.timeclock-today .list-leading{border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg)}
.timeclock-today .list-title{font-weight:var(--weight-regular)}
.timeclock-today .list-trailing{font-size:var(--text-lg)}
.timeclock-page .timeclock-sub{margin:0;padding:var(--space-4) 0 var(--space-2);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--primary)}
.timeclock-none{margin:0;padding:var(--space-2) 0;font-size:var(--text-md);color:var(--text-muted)}
.timeclock-week{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.timeclock-week>button[data-shift="-7"],.timeclock-week>button[data-shift="7"]{display:grid;place-items:center;width:var(--touch);min-width:var(--touch);height:var(--touch);padding:0;border:0;border-radius:50%;background:transparent;color:var(--text)}
.timeclock-prev{transform:rotate(180deg)}
.timeclock-week>strong{font-size:var(--text-md);font-weight:var(--weight-semibold);white-space:nowrap;font-variant-numeric:tabular-nums}
.timeclock-week>button[data-shift="0"]{min-height:var(--touch);padding:0 var(--space-4);border:0;border-radius:var(--radius-full)}
.timeclock-filter{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-md);color:var(--text-muted)}
.timeclock-filter select{min-height:var(--touch);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--field-bg);box-shadow:inset 0 -1px 0 var(--field-line);font-size:var(--text-lg);color:var(--text)}
.timeclock-page .panel-head h2{margin:0;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.timeclock-entry-tags:empty{display:none}
@media(max-width:699px){
 .timeclock-page .page-heading{margin-bottom:var(--space-3)}
 .timeclock-page .page-heading>div:first-child{display:none}
 .timeclock-page .page-heading .actions{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--space-4));padding:0 var(--space-4)}
 .timeclock-page .page-heading .actions button{flex:none;min-height:var(--touch);padding:0 var(--space-4);border-radius:var(--radius-full);font-size:var(--text-md)}
 .timeclock-me{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--space-4);margin:0 calc(-1 * var(--space-4)) var(--space-2);padding:var(--space-6) var(--space-4);border-width:1px 0;border-radius:0;text-align:center}
 .timeclock-clock{align-items:center}
 .timeclock-who{flex-direction:column;gap:var(--space-2)}
 .timeclock-who-text{align-items:center}
 .timeclock-punches{flex-direction:column;align-items:stretch;width:100%}
 .timeclock-punches button{width:100%}
 .timeclock-today .list-group{margin:0 calc(-1 * var(--space-4));border-width:1px 0;border-radius:0}
 .timeclock-week{margin:var(--space-2) 0 var(--space-3)}
 .timeclock-week>strong{flex:1 1 0;text-align:center}
 .timeclock-week>button[data-shift="0"]{order:1}
 .timeclock-filter{order:2;flex:1 1 100%}
 .timeclock-filter select{flex:1 1 auto;width:100%;min-width:0}
 .timeclock-page .panel{margin-bottom:var(--space-3)}
}

/* ── M3. Training mode (shared/training.mjs, web/staff.mjs createTrainingUI): striped ribbon above every layer and a
   LATIHAN watermark on the receipts shown while the till trains (never a paper receipt: printing is fenced). ─────── */
.training-ribbon{position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-toast) + 1);display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:var(--touch);padding:0 var(--space-3);padding-top:env(safe-area-inset-top);background:repeating-linear-gradient(135deg,var(--warning-bg) 0 var(--space-3),var(--paper-0) var(--space-3) var(--space-6));color:var(--warning-fg);font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--shadow-2)}
.training-exit{min-height:var(--touch);padding:0 var(--space-4);border:1px solid var(--warning-fg);border-radius:var(--radius-full);background:var(--paper-0);color:var(--warning-fg);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
html[data-training] body{padding-top:var(--touch)}
html[data-training] .topbar,html[data-training][data-view=pos] .topbar{top:var(--touch)}
html[data-training] .sidebar,html[data-training] .modal-backdrop{top:var(--touch)}
html[data-training] .receipt-paper{position:relative}
html[data-training] .receipt-paper::after{content:var(--training-mark);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center;color:var(--warning-fg);font-size:var(--text-xl);font-weight:var(--weight-semibold);transform:rotate(-24deg);opacity:.55;pointer-events:none}
/* Commissions page (plugin team): statement rows keep their actions on a second line on a phone. */
.commission-statement{flex-wrap:wrap}
.commission-statement .list-text{flex:1 1 0}
.commission-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);width:100%;justify-content:flex-end}
.commission-actions .text-button{min-height:var(--touch)}