/* =============================================================================
   OrganicSystem — UI-1.13 Global loading / empty / error / success states
   Presentation only. Token-driven Light + Dark. Does NOT hide empty states,
   replace error handling, or change API / business logic.
   Load AFTER os-popup-standard.css so toast/alert/empty chrome wins last.
   ============================================================================= */

:root {
  --os-state-empty-fg: var(--os-table-empty-text, var(--os-color-text-muted));
  --os-state-empty-pad: 1.25rem 1rem;
  --os-state-empty-font: 0.875rem;
  --os-state-empty-weight: 550;
  --os-state-empty-line: 1.4;

  --os-state-alert-radius: 0.45rem;
  --os-state-alert-pad: 0.7rem 0.95rem;
  --os-state-alert-border: var(--os-color-border);
  --os-state-alert-accent-width: 3px;

  --os-state-toast-radius: 0.45rem;
  --os-state-toast-pad: 0.7rem 0.95rem;
  --os-state-toast-font: 0.9rem;
  --os-state-toast-line: 1.35;
  --os-state-toast-shadow: var(--os-color-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.16));
  --os-state-toast-fg: var(--os-btn-text-on-fill, var(--os-color-text-inverse));

  --os-state-loadpanel-bg: var(--os-color-surface);
  --os-state-loadpanel-fg: var(--os-color-text);
  --os-state-loadpanel-border: var(--os-color-border);
  --os-state-loadpanel-indicator: var(--os-color-primary);

  --os-state-permission-fg: var(--os-color-text-muted);
  --os-state-permission-bg: color-mix(in srgb, var(--os-warning, var(--os-color-warning)) 10%, var(--os-color-surface));
  --os-state-permission-border: color-mix(in srgb, var(--os-warning, var(--os-color-warning)) 42%, var(--os-color-border));
}

/* ---- Alerts (soft surfaces + semantic left accent) ---- */
.alert {
  border-radius: var(--os-state-alert-radius);
  padding: var(--os-state-alert-pad);
  border: 1px solid var(--os-state-alert-border) !important;
  border-inline-start-width: var(--os-state-alert-accent-width) !important;
  color: var(--os-color-text) !important;
}

.alert-primary,
.alert-info {
  background-color: var(--os-color-notification-info-bg) !important;
  border-inline-start-color: var(--os-info, var(--os-color-info)) !important;
  color: var(--os-color-text) !important;
}

.alert-success {
  background-color: var(--os-color-notification-success-bg) !important;
  border-inline-start-color: var(--os-success, var(--os-color-success)) !important;
  color: var(--os-color-text) !important;
}

.alert-warning {
  background-color: var(--os-color-notification-warning-bg) !important;
  border-inline-start-color: var(--os-warning, var(--os-color-warning)) !important;
  color: var(--os-color-text) !important;
}

.alert-danger {
  background-color: var(--os-color-notification-danger-bg) !important;
  border-inline-start-color: var(--os-danger, var(--os-color-danger)) !important;
  color: var(--os-color-text) !important;
}

/* Bootstrap toast variants (when used) */
.toast.text-bg-primary,
.toast.text-bg-info {
  background-color: var(--os-color-notification-info-bg) !important;
  color: var(--os-color-text) !important;
  border-color: color-mix(in srgb, var(--os-info, var(--os-color-info)) 45%, var(--os-color-border)) !important;
}

.toast.text-bg-success {
  background-color: var(--os-color-notification-success-bg) !important;
  color: var(--os-color-text) !important;
  border-color: color-mix(in srgb, var(--os-success, var(--os-color-success)) 45%, var(--os-color-border)) !important;
}

.toast.text-bg-warning {
  background-color: var(--os-color-notification-warning-bg) !important;
  color: var(--os-color-text) !important;
  border-color: color-mix(in srgb, var(--os-warning, var(--os-color-warning)) 45%, var(--os-color-border)) !important;
}

.toast.text-bg-danger {
  background-color: var(--os-color-notification-danger-bg) !important;
  color: var(--os-color-text) !important;
  border-color: color-mix(in srgb, var(--os-danger, var(--os-color-danger)) 45%, var(--os-color-border)) !important;
}

/* ---- Action toasts (Saved / Warning / Error / Info) — token fills ---- */
.os-action-toast-host,
#os-action-toast-host {
  z-index: var(--os-z-toast, 20100);
  gap: 0.5rem;
}

.os-action-toast {
  padding: var(--os-state-toast-pad) !important;
  border-radius: var(--os-state-toast-radius) !important;
  font-size: var(--os-state-toast-font) !important;
  line-height: var(--os-state-toast-line) !important;
  box-shadow: var(--os-state-toast-shadow) !important;
  color: var(--os-state-toast-fg) !important;
  border: 1px solid transparent;
  background: var(--os-success, var(--os-color-success)) !important;
}

.os-action-toast--success {
  background: var(--os-success, var(--os-color-success)) !important;
  border-color: color-mix(in srgb, var(--os-success, var(--os-color-success)) 70%, #000) !important;
  color: var(--os-state-toast-fg) !important;
}

.os-action-toast--warning {
  background: var(--os-warning, var(--os-color-warning)) !important;
  border-color: color-mix(in srgb, var(--os-warning, var(--os-color-warning)) 70%, #000) !important;
  color: var(--os-state-toast-fg) !important;
}

.os-action-toast--error,
.os-action-toast--danger {
  background: var(--os-danger, var(--os-color-danger)) !important;
  border-color: color-mix(in srgb, var(--os-danger, var(--os-color-danger)) 70%, #000) !important;
  color: var(--os-state-toast-fg) !important;
}

.os-action-toast--info {
  background: var(--os-info, var(--os-color-info)) !important;
  border-color: color-mix(in srgb, var(--os-info, var(--os-color-info)) 70%, #000) !important;
  color: var(--os-state-toast-fg) !important;
}

/*
  Keep page-level success banners suppressed (converted to toasts by os-confirm.js),
  but DO show action toasts — Saved / Success feedback must remain visible.
*/
body.os-app-shell .os-action-toast-host .os-action-toast--success,
body.os-app-shell #os-action-toast-host .os-action-toast--success,
body.os-app-shell .os-action-toast-host .os-action-toast--info,
body.os-app-shell #os-action-toast-host .os-action-toast--info {
  display: block !important;
}

/* ---- DevExtreme toast ---- */
.dx-toast-wrapper .dx-overlay-content,
.dx-toast-content {
  border-radius: var(--os-state-toast-radius) !important;
  box-shadow: var(--os-state-toast-shadow) !important;
  color: var(--os-state-toast-fg) !important;
  border: 1px solid transparent !important;
}

.dx-toast-success .dx-toast-content,
.dx-toast-wrapper.dx-toast-success .dx-overlay-content {
  background-color: var(--os-success, var(--os-color-success)) !important;
  border-color: color-mix(in srgb, var(--os-success, var(--os-color-success)) 70%, #000) !important;
}

.dx-toast-warning .dx-toast-content,
.dx-toast-wrapper.dx-toast-warning .dx-overlay-content {
  background-color: var(--os-warning, var(--os-color-warning)) !important;
  border-color: color-mix(in srgb, var(--os-warning, var(--os-color-warning)) 70%, #000) !important;
}

.dx-toast-error .dx-toast-content,
.dx-toast-wrapper.dx-toast-error .dx-overlay-content {
  background-color: var(--os-danger, var(--os-color-danger)) !important;
  border-color: color-mix(in srgb, var(--os-danger, var(--os-color-danger)) 70%, #000) !important;
}

.dx-toast-info .dx-toast-content,
.dx-toast-wrapper.dx-toast-info .dx-overlay-content {
  background-color: var(--os-info, var(--os-color-info)) !important;
  border-color: color-mix(in srgb, var(--os-info, var(--os-color-info)) 70%, #000) !important;
}

.dx-toast-message,
.dx-toast-icon {
  color: inherit !important;
}

/* ---- Loading / Saving chrome ---- */
.dx-loadpanel-content,
.dx-loadpanel-content.dx-state-visible {
  background-color: var(--os-state-loadpanel-bg) !important;
  color: var(--os-state-loadpanel-fg) !important;
  border: 1px solid var(--os-state-loadpanel-border) !important;
  box-shadow: var(--os-color-shadow-md);
  border-radius: var(--os-state-alert-radius);
}

.dx-loadpanel-message,
.dx-loadpanel-content .dx-loadpanel-message {
  color: var(--os-state-loadpanel-fg) !important;
  font-size: var(--os-state-empty-font);
  line-height: var(--os-state-empty-line);
}

.dx-loadindicator-segment-inner,
.dx-loadindicator-icon .dx-loadindicator-segment,
.dx-loadpanel-content .dx-loadindicator-segment-inner {
  border-color: var(--os-state-loadpanel-indicator) !important;
  background-color: var(--os-state-loadpanel-indicator) !important;
}

.os-loading-overlay,
.os-plan-sync-overlay {
  background-color: var(--os-overlay, var(--os-color-overlay)) !important;
}

.os-report-popup__loading {
  background: color-mix(in srgb, var(--os-color-page-bg) 92%, var(--os-color-surface)) !important;
  gap: 0.85rem;
  padding: 1.5rem;
}

.os-report-popup__loading-text {
  color: var(--os-state-empty-fg) !important;
  font-size: 0.95rem;
}

.os-report-popup__spinner {
  border-color: color-mix(in srgb, var(--os-color-primary) 25%, transparent) !important;
  border-top-color: var(--os-color-primary) !important;
}

/* Form / host busy (Saving) — visual only */
form.is-saving,
[aria-busy="true"].os-dx-grid,
.os-dx-grid[aria-busy="true"],
.os-page-grid-view[aria-busy="true"] {
  cursor: progress;
}

form.is-saving button[type="submit"],
form.is-saving [data-os-toolbar="save"],
body.os-erp-form-is-saving [data-os-toolbar="save"] {
  opacity: 0.72;
  cursor: progress;
}

/* ---- Empty / No data / No rows / No results ----
   Never force-hide: only style when DX shows the node (not .dx-hidden). */
.dx-datagrid-nodata:not(.dx-hidden),
.dx-datagrid .dx-datagrid-nodata:not(.dx-hidden),
.os-page-grid-view .dx-datagrid-nodata:not(.dx-hidden),
.os-dx-grid .dx-datagrid-nodata:not(.dx-hidden),
main .dx-datagrid-nodata:not(.dx-hidden),
body.os-app-shell .dx-datagrid-nodata:not(.dx-hidden),
.dx-list-nodata,
.dx-empty {
  color: var(--os-state-empty-fg) !important;
  background-color: transparent !important;
  font-size: var(--os-state-empty-font) !important;
  font-weight: var(--os-state-empty-weight);
  line-height: var(--os-state-empty-line) !important;
  padding: var(--os-state-empty-pad) !important;
  text-align: center !important;
}

.dx-datagrid-nodata:not(.dx-hidden),
.os-page-grid-view .dx-datagrid-nodata:not(.dx-hidden),
.os-dx-grid .dx-datagrid-nodata:not(.dx-hidden),
main .dx-datagrid-nodata:not(.dx-hidden),
body.os-app-shell .dx-datagrid-nodata:not(.dx-hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

table.table > tbody > tr.os-table-empty > td,
table.table > tbody > tr.os-table-empty > th,
.table > tbody > tr.os-table-empty > td,
.table > tbody > tr.os-table-empty > th,
table.table .os-table-empty-cell,
.table .os-table-empty-cell {
  color: var(--os-state-empty-fg) !important;
  background-color: var(--os-table-body-bg, var(--os-color-grid-body)) !important;
  font-style: italic;
  text-align: center;
  padding: var(--os-state-empty-pad) !important;
  font-size: var(--os-state-empty-font);
  line-height: var(--os-state-empty-line);
}

.os-erp-dashboard-empty,
.os-erp-workflow-empty {
  color: var(--os-state-empty-fg) !important;
  font-size: var(--os-state-empty-font);
  line-height: var(--os-state-empty-line);
}

/* ---- Error surfaces (validation summary / report error) ---- */
.validation-summary-errors,
form.os-erp-form .validation-summary-errors,
form[data-os-erp-form="on"] .validation-summary-errors,
.os-erp-form-page .validation-summary-errors {
  color: var(--os-danger, var(--os-color-danger)) !important;
  background-color: var(--os-color-notification-danger-bg) !important;
  border: 1px solid color-mix(in srgb, var(--os-danger, var(--os-color-danger)) 40%, var(--os-color-border)) !important;
  border-inline-start: var(--os-state-alert-accent-width) solid var(--os-danger, var(--os-color-danger)) !important;
  border-radius: var(--os-state-alert-radius);
  padding: var(--os-state-alert-pad);
  margin-bottom: 0.75rem;
}

.invalid-feedback,
.field-validation-error,
span[data-valmsg-for].field-validation-error,
.text-danger {
  color: var(--os-danger, var(--os-color-danger)) !important;
}

.text-success,
.valid-feedback {
  color: var(--os-success, var(--os-color-success)) !important;
}

.text-warning {
  color: var(--os-warning, var(--os-color-warning)) !important;
}

.text-info {
  color: var(--os-info, var(--os-color-info)) !important;
}

.os-report-popup__error {
  background: color-mix(in srgb, var(--os-color-notification-danger-bg) 70%, var(--os-color-surface)) !important;
  gap: 0.85rem;
  padding: 1.5rem;
}

.os-report-popup__error-text {
  color: var(--os-danger, var(--os-color-danger)) !important;
  font-size: 0.95rem;
}

/* ---- Permission denied / no menus ---- */
.app-sidebar__empty,
.os-permission-denied,
.os-state-permission,
[data-os-state="permission-denied"] {
  color: var(--os-state-permission-fg) !important;
  background-color: var(--os-state-permission-bg);
  border: 1px solid var(--os-state-permission-border);
  border-radius: var(--os-state-alert-radius);
  padding: var(--os-state-alert-pad);
  font-size: 0.9rem;
  line-height: var(--os-state-empty-line);
}

body.os-module-shell .app-sidebar__empty {
  color: var(--os-state-permission-fg) !important;
  background-color: transparent;
  border: 0;
  padding: 1rem 0.75rem;
}

/* ---- Dark contrast polish (token-only; no hex) ---- */
html[data-theme="dark"] .dx-datagrid-nodata:not(.dx-hidden),
html[data-theme="dark"] .dx-list-nodata,
html[data-theme="dark"] .dx-empty,
html[data-theme="dark"] .os-erp-dashboard-empty,
html[data-theme="dark"] .os-erp-workflow-empty {
  color: var(--os-state-empty-fg) !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .os-action-toast,
html[data-theme="dark"] .dx-toast-content {
  color: var(--os-state-toast-fg) !important;
}

html[data-theme="dark"] .validation-summary-errors {
  color: var(--os-danger, var(--os-color-danger)) !important;
  background-color: var(--os-color-notification-danger-bg) !important;
}