/* Readable operational content and one shared language for feedback. */
:root { --operation-text-size: 13px; }
@media (pointer: coarse), (max-width: 1199px) { :root { --operation-text-size: 14px; } }

/* Deliberately target information used to make decisions, rather than enlarge
   every decorative counter or disturb existing heading/quantity hierarchy. */
:is(#stockView, #historyPanel, #pricingPanel, #pricingAdminPanel, #financePanel, #wastePanel, #filamentPanel, #settingsPanel, #notificationsPanel, #scanPanel, #upsellerPanel, #kanbanPanel, #wsProduct, dialog) :is(.inventory-search-sku, .inventory-row__movement, .inventory-row__movement time,
  .ws-table-sku, .ws-table-movement, .ws-product-status, .ws-stock-state,
  .ws-history time, .ws-history p, .ws-history small, .ws-records time, .ws-records p, .ws-records small,
  .ws-related small, .ws-product-links span, .ws-search-results small,
  .card__obs, .card__meta-main, .card__meta-date, .card__availability,
  .upseller-order-item__sku, .upseller-process__source-sku, .upseller-order__time, .upseller-order__buyer-location, .order-workflow__created,
  .order-workflow__pending, .order-workflow__next span, .order-workflow__detail-item span,
  .processed-history__status .upseller__hint, .processed-history__pagination > span,
  .history__cell-when, .history__obs-text, .history__obs-tag, .history__user,
  .production-card__priority, .production-card__facts dt, .production-card__facts dd small,
  .production-queue-group p, .production-qty-caption, .production-card__covered,
  .kanban-card__stock, .kanban-card__qty-produced small, .kanban-proj-divider small,
  .finance__entries-note, .finance-rank__meta, .finance__period-info,
  .fil-card__notes, .fil-card__color, .finance-entry__desc, .finance-entry__date, .waste-item__meta, .waste-printer__meta, .bestseller-card__meta, .notification-item__time, .notification-item__desc,
  .connection-panel p, .connection-panel small, .settings__hint,
  .dialog__subtitle, .field-error, .hint, .edit-hint, .dialog-note,
  .fil-form__hint, .upseller-map__hint, .edit-prod-cost__hint,
  .upseller-process__item-stock, .transfer-item__avail, .shopee-link-item__sub, .shopee-link-item__sku) {
  font-size: var(--operation-text-size) !important;
  line-height: 1.5 !important;
  letter-spacing: 0;
}
:is(#stockView, #historyPanel, #pricingPanel, #pricingAdminPanel, #financePanel, #wastePanel, #filamentPanel, #settingsPanel, #notificationsPanel, #scanPanel, #upsellerPanel, #kanbanPanel, #wsProduct, dialog) :is(.dialog-form-grid > label, .pricing__grid label, .pricing-admin__card label,
  .settings__form > label, .waste-form__field > span, .scan__manual > label, .history__filters label, .processed-history__filters label,
  .order-workflow__filter-field > span, .dialog-disclosure > summary small,
  .upseller-map__label, .balance__row > span, .dialog-component-labels) {
  font-size: var(--operation-text-size) !important;
  line-height: 1.45 !important;
}
:is(#stockView, #historyPanel, #pricingPanel, #pricingAdminPanel, #financePanel, #wastePanel, #filamentPanel, #settingsPanel, #notificationsPanel, #scanPanel, #upsellerPanel, #kanbanPanel, #wsProduct, dialog) :is(.ws-history strong, .ws-records strong, .ws-related strong,
  .card__title, .ws-product-link, .order-workflow__detail-item strong, .finance-rank__name, .upseller-order-item__name,
  .kanban-card__name, .kanban-proj-card__name) {
  font-size: max(13px, var(--operation-text-size)) !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}
:is(#stockView, #historyPanel, #pricingPanel, #pricingAdminPanel, #financePanel, #wastePanel, #filamentPanel, #settingsPanel, #notificationsPanel, #scanPanel, #upsellerPanel, #kanbanPanel, #wsProduct, dialog) :is(.card__title, .inventory-row__name, .ws-product-link, .history__cell-product) { text-transform: none !important; }
:is(#stockView, #historyPanel, #pricingPanel, #pricingAdminPanel, #financePanel, #wastePanel, #filamentPanel, #settingsPanel, #notificationsPanel, #scanPanel, #upsellerPanel, #kanbanPanel, #wsProduct, dialog) :is(.history__table, .ws-inventory-table, .finance-rank, .inventory-row__quantity, .production-card__facts) { font-variant-numeric: tabular-nums; }
body #historyPanel .history__table th { font-size: 12px !important; text-transform: none; letter-spacing: 0; }
body #historyPanel .history__table td { font-size: var(--operation-text-size) !important; }
body .history__cell-when { white-space: normal; }
:is(#stockView, #historyPanel, #pricingPanel, #pricingAdminPanel, #financePanel, #wastePanel, #filamentPanel, #settingsPanel, #notificationsPanel, #scanPanel, #upsellerPanel, #kanbanPanel, #wsProduct, dialog) :is(.ws-history li > div, .ws-records li > div) { flex-wrap: wrap; gap: 3px 10px; }
:is(#stockView, #historyPanel, #pricingPanel, #pricingAdminPanel, #financePanel, #wastePanel, #filamentPanel, #settingsPanel, #notificationsPanel, #scanPanel, #upsellerPanel, #kanbanPanel, #wsProduct, dialog) :is(.history__obs-text, .finance-rank__meta, .notification-item__desc) { overflow-wrap: anywhere; }

.sf-feedback {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 10080; display: flex; flex-direction: column; gap: 10px; width: min(440px, calc(100vw - 32px));
  max-height: min(520px, 50dvh); overflow-y: auto; overscroll-behavior: contain;
  padding: 3px; margin: 0; border: 0; background: transparent; pointer-events: none; outline: none;
}
.sf-feedback:empty { display: none; }
.sf-toast {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px; align-items: start; gap: 10px;
  padding: 14px 10px 14px 14px; flex: 0 0 auto; border: 1px solid #425862; border-radius: 14px;
  background: var(--ds-surface, #151e28); color: var(--ds-text, #e5edf3); box-shadow: 0 10px 35px #0006;
  pointer-events: auto; --feedback-color: #91c5dc;
}
.sf-toast--error { --feedback-color: #ff9690; border-color: #845057; }
.sf-toast--warning { --feedback-color: #edc073; border-color: #7e6744; }
.sf-toast--pending, .sf-toast--info { --feedback-color: #a7d0f4; border-color: #4b6981; }
.sf-toast__symbol { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border: 1px solid currentColor; border-radius: 50%; color: var(--feedback-color); font-size: 16px; font-weight: 650; }
.sf-toast__copy { min-width: 0; }
.sf-toast__title { display: block; margin: 0 0 3px; color: var(--feedback-color); font-size: 14px; font-weight: 650; line-height: 1.4; letter-spacing: 0; }
.sf-toast__message, .sf-toast__detail { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.sf-toast__detail { margin-top: 5px; color: var(--ds-muted, #a4b4c3); }
.sf-toast__dismiss, .sf-toast__action, .sf-confirm button { font: inherit; cursor: pointer; touch-action: manipulation; }
.sf-toast__dismiss { display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0; margin-top: -4px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-muted, #a4b4c3); font-size: 25px; line-height: 1; }
.sf-toast__dismiss:hover { color: var(--ds-text, #e5edf3); background: var(--ds-elevated, #1d2a36); }
.sf-toast__action { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--ds-border, #2b3b4b); border-radius: 8px; background: var(--ds-elevated, #1d2a36); color: var(--ds-text, #e5edf3); font-size: 13px; font-weight: 600; }
.sf-toast__action:hover { border-color: var(--feedback-color); }
.sf-toast__action:disabled { opacity: .6; cursor: wait; }
.sf-feedback.sf-feedback--in-dialog { position: relative; right: auto; bottom: auto; width: auto; max-height: min(240px, 30dvh); margin: 8px 12px; flex: 0 0 auto; align-self: stretch; }
.sf-feedback--in-dialog .sf-toast { box-shadow: none; }

dialog.sf-confirm { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--ds-border, #2b3b4b); border-radius: 18px; margin: auto; background: var(--ds-surface, #151e28); color: var(--ds-text, #e5edf3); box-shadow: 0 20px 90px #0009; overflow: auto; }
dialog.sf-confirm:not([open]) { display: none; }
dialog.sf-confirm[open] { display: block; }
dialog.sf-confirm::backdrop, .sf-confirm-backdrop { background: #05090dcc; backdrop-filter: blur(4px); }
.sf-confirm__title { margin: 0 0 12px; font-size: 21px; font-weight: 680; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.sf-confirm__message { margin: 0; color: #c0ccd6; font-size: 15px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.sf-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.sf-confirm__actions button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--ds-border, #2b3b4b); border-radius: 9px; color: var(--ds-text, #e5edf3); background: var(--ds-elevated, #1d2a36); font-size: 14px; font-weight: 600; line-height: 1.4; }
.sf-confirm__actions .sf-confirm__accept { color: #fff; border-color: #0098db; background: #185d7c; }
.sf-confirm[data-danger="true"] .sf-confirm__accept { color: #fff; border-color: #c66c6b; background: #9e4046; }
.sf-confirm__actions button:hover { filter: brightness(1.13); }
.sf-confirm--fallback { position: fixed; inset: 0; z-index: 10090; }
.sf-confirm-backdrop { position: fixed; inset: 0; z-index: 10089; }

@media (pointer: coarse), (max-width: 767px) {
  dialog.dialog > :is(.dialog__actions, .dialog__footer) .btn { font-size: 14px !important; }
  #wsProduct .ws-product-tabs button, #wsProduct .ws-product-actions .btn { font-size: 14px; }
  .sf-toast { grid-template-columns: 24px minmax(0, 1fr) 40px; gap: 8px; padding: 12px 8px 12px 12px; }
  .sf-toast__symbol { width: 23px; height: 23px; font-size: 14px; }
  .sf-toast__dismiss { min-width: 40px; min-height: 44px; margin-top: -8px; }
  .sf-toast__action { min-height: 44px; font-size: 14px; }
}
@media (max-width: 767px) {
  .sf-feedback { right: 9px; bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100vw - 18px); max-height: 45dvh; gap: 8px; }
  .sf-feedback.sf-feedback--in-dialog { margin: 6px 8px; }
  dialog.sf-confirm { padding: 22px 20px; max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); }
  .sf-confirm__actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .sf-confirm__actions .sf-confirm__accept { grid-row: 1; }
  .sf-confirm__actions button { width: 100%; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-feedback *, .sf-confirm * { animation: none !important; transition: none !important; }
}
