/* Scratchpad drawer (Issue 3805). Hand-rolled off-canvas — Bootstrap 4 has none. Extracted
   from an inline <style> so it is cached once instead of shipping on every page render. */
.sp-drawer { position: fixed; top: 0; right: 0; height: 100%; z-index: 1030; pointer-events: none; }
.sp-drawer .sp-tab, .sp-drawer .sp-panel { pointer-events: auto; }
.sp-tab {
	position: absolute; top: 45%; right: 0; transform: translateY(-50%);
	/* PAI standard blue (matches .btn-primary) — a dark tab read as an AD-only feature; this
	   is a customer feature, so it uses the brand blue. */
	background: #20609f; color: #fff; border: 0; border-radius: 6px 0 0 6px;
	padding: 14px 8px; cursor: pointer; box-shadow: -1px 1px 4px rgba(0,0,0,.2);
}
.sp-tab:hover { background: #1a457c; }
.sp-count-badge {
	display: inline-block; min-width: 18px; margin-top: 6px; padding: 0 5px;
	font-size: 11px; line-height: 18px; text-align: center;
	background: #e67e22; color: #fff; border-radius: 9px;
}
.sp-count-badge[hidden] { display: none; }
.sp-panel {
	position: absolute; top: 0; right: 0; width: 340px; max-width: 90vw; height: 100%;
	background: #fff; border-left: 1px solid #dee2e6; box-shadow: -2px 0 8px rgba(0,0,0,.12);
	display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform .2s ease;
}
.sp-drawer[data-open="true"] .sp-panel { transform: translateX(0); }
.sp-drawer[data-open="true"] .sp-tab { right: 340px; transition: right .2s ease; }
.sp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #dee2e6; }
.sp-title { font-weight: 600; }
.sp-close { background: 0; border: 0; font-size: 16px; cursor: pointer; color: #6c757d; }
.sp-add-form { padding: 10px 12px; border-bottom: 1px solid #eee; }
.sp-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sp-list-wrap { flex: 1 1 auto; overflow-y: auto; }
/* Loading mask shown while a line resolves (ELK lookup) or any mutation is in flight.
   htmx puts .htmx-request on the hx-indicator target. */
.sp-busy {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.72); opacity: 0; pointer-events: none;
	transition: opacity .12s ease;
}
.sp-busy.htmx-request { opacity: 1; pointer-events: auto; }
.sp-busy i { font-size: 26px; color: #2c3e50; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-row { display: flex; align-items: flex-start; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #f1f1f1; }
.sp-drag { cursor: grab; color: #adb5bd; padding-top: 2px; }
.sp-content { flex: 1 1 auto; min-width: 0; }
.sp-sku { font-family: monospace; font-weight: 600; }
.sp-desc { display: block; font-size: 12px; color: #6c757d; word-break: break-word; }
.sp-note { white-space: pre-wrap; word-break: break-word; }
.sp-cart { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.sp-stepper { display: flex; align-items: center; }
.sp-step { width: 24px; height: 26px; border: 1px solid #ced4da; background: #f8f9fa; cursor: pointer; }
.sp-qty { width: 44px; height: 26px; text-align: center; border: 1px solid #ced4da; border-left: 0; border-right: 0; }
.sp-del { background: 0; border: 0; color: #adb5bd; cursor: pointer; }
.sp-del:hover { color: #dc3545; }
.sp-empty { padding: 24px 12px; text-align: center; color: #adb5bd; }
.sp-footer { padding: 8px 12px; border-top: 1px solid #dee2e6; }
.sp-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sp-footer-count { font-size: 12px; color: #6c757d; }
.sp-notice { font-size: 12px; padding: 6px 8px; border-radius: 4px; margin-bottom: 6px; }
.sp-notice-success { background: #d4edda; color: #155724; }
.sp-notice-warning { background: #fff3cd; color: #856404; }
.sp-notice-danger  { background: #f8d7da; color: #721c24; }
.sp-notice-info    { background: #d1ecf1; color: #0c5460; }

/* --- Foreign-account rows: saved under a different customer. Muted + labelled (mlibbe review). --- */
.sp-row.sp-foreign { background: #fafafa; }
.sp-row.sp-foreign .sp-sku, .sp-row.sp-foreign .sp-desc, .sp-row.sp-foreign .sp-note { opacity: .55; }
.sp-for-label {
	display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px;
	font-family: monospace; font-size: 10.5px; line-height: 16px;
	background: #eceff1; color: #78909c; vertical-align: middle;
}

/* --- Note attached to a part row (annotation, distinct from a note-only line). --- */
.sp-rownote { display: block; margin-top: 3px; font-size: 12px; font-style: italic; color: #6c757d; white-space: pre-wrap; word-break: break-word; }
.sp-note-add { background: 0; border: 0; padding: 0; margin-top: 3px; font-size: 11px; color: #007bff; cursor: pointer; }
.sp-note-add:hover { text-decoration: underline; }
.sp-note-form { display: flex; gap: 4px; margin-top: 4px; }
.sp-note-input { flex: 1 1 auto; height: 26px; font-size: 12px; border: 1px solid #ced4da; border-radius: 3px; padding: 0 6px; }

/* --- Clear-all + Undo controls. --- */
.sp-clear { background: 0; border: 0; padding: 0; font-size: 12px; color: #6c757d; cursor: pointer; }
.sp-clear:hover { color: #dc3545; }
.sp-undo { background: 0; border: 0; padding: 0; margin-left: 8px; font-size: 12px; font-weight: 600; color: #0c5460; cursor: pointer; text-decoration: underline; }

/* --- Account filter footer (show rows on other accounts) --- */
.sp-footer-accounts { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #f1f1f1; }
.sp-showall { background: 0; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: #20609f; cursor: pointer; text-decoration: underline; }
.sp-showall:hover { color: #1a457c; }

/* --- "View in Cart" swap for rows already in the active cart --- */
.sp-viewcart { margin-top: 6px; }

/* --- Duplicate add/capture: flash the existing row so the user sees which one is already there.
       The row keeps a soft highlight + orange accent until the next mutation re-renders it, and
       pulses a couple of times on arrival so it can't be missed. --- */
@keyframes sp-flash {
	0%   { background: #ffe69c; }
	50%  { background: #fff8e1; }
	100% { background: #ffe69c; }
}
.sp-row.sp-dup-highlight {
	background: #fff3cd;
	box-shadow: inset 3px 0 0 #e67e22;
	animation: sp-flash .7s ease-in-out 2;
}

@media (max-width: 576px) {
	.sp-panel { width: 100%; max-width: 100%; height: 70%; top: auto; bottom: 0; transform: translateY(100%); border-left: 0; border-top: 1px solid #dee2e6; }
	.sp-drawer[data-open="true"] .sp-panel { transform: translateY(0); }
	.sp-drawer[data-open="true"] .sp-tab { right: 0; }
}