/* Loaded after all page styles so semantic system colors remain authoritative. */
html, body {
  font-family: var(--erp-font-family) !important;
  font-size: var(--erp-font-size, 15px);
  color: var(--erp-text);
}

body:not(.orbit-page) {
  background-color: var(--erp-bg) !important;
}

.card, .modal-content, .dropdown-menu {
  color: var(--erp-text) !important;
  border-color: var(--erp-border) !important;
  background-color: var(--erp-surface) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .section-title, .dashboard-title, .modal-title {
  color: var(--erp-title) !important;
}

.page-title, .section-title, .dashboard-title,
.card-title, .modal-title,
.admin-page header h1, .admin-page header h2 {
  font-size: calc(var(--erp-home-title-font-size, 16px) * var(--erp-heading-scale, 1.15)) !important;
}

label,
.form-label,
.col-form-label,
.form-check-label,
.input-group-text,
.table th,
.erp-label {
  font-size: var(--erp-label-font-size, 13px);
}

.text-muted, .form-text, .help-text, .field-note, .note {
  font-size: var(--erp-home-description-font-size, 12px);
  color: var(--erp-note) !important;
}

.erp-field-caption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.erp-help-tip {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: var(--erp-primary);
  background: color-mix(in srgb, var(--erp-primary) 12%, var(--erp-surface));
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.erp-help-tip:hover {
  color: #fff;
  background: var(--erp-primary);
}

a:not(.btn):not(.nav-link):not(.menu-item):not(.inv-link) {
  color: var(--erp-link);
}

.btn-primary {
  color: #fff;
  border-color: var(--erp-primary);
  background: var(--erp-primary);
}
.btn-success {
  color: #fff;
  border-color: var(--erp-success);
  background: var(--erp-success);
}
.btn-warning {
  border-color: var(--erp-warning);
  background: var(--erp-warning);
}
.btn-danger {
  color: #fff;
  border-color: var(--erp-danger);
  background: var(--erp-danger);
}
.btn-info {
  color: #fff;
  border-color: var(--erp-info);
  background: var(--erp-info);
}

.erp-action-save {
  color: #fff !important;
  border-color: var(--erp-action-save) !important;
  background: var(--erp-action-save) !important;
}
.erp-action-approve {
  color: #fff !important;
  border-color: var(--erp-action-approve) !important;
  background: var(--erp-action-approve) !important;
}
.erp-action-delete {
  color: #fff !important;
  border-color: var(--erp-action-delete) !important;
  background: var(--erp-action-delete) !important;
}
.erp-action-cancel {
  color: #fff !important;
  border-color: var(--erp-action-cancel) !important;
  background: var(--erp-action-cancel) !important;
}
.erp-action-save:hover, .erp-action-approve:hover,
.erp-action-delete:hover, .erp-action-cancel:hover { filter: brightness(.9); }

.alert-success {
  color: color-mix(in srgb, var(--erp-success) 72%, #000) !important;
  border-color: color-mix(in srgb, var(--erp-success) 34%, transparent) !important;
  background: color-mix(in srgb, var(--erp-success) 12%, var(--erp-surface)) !important;
}
.alert-warning {
  color: color-mix(in srgb, var(--erp-warning) 72%, #000) !important;
  border-color: color-mix(in srgb, var(--erp-warning) 34%, transparent) !important;
  background: color-mix(in srgb, var(--erp-warning) 12%, var(--erp-surface)) !important;
}
.alert-danger {
  color: color-mix(in srgb, var(--erp-danger) 72%, #000) !important;
  border-color: color-mix(in srgb, var(--erp-danger) 34%, transparent) !important;
  background: color-mix(in srgb, var(--erp-danger) 12%, var(--erp-surface)) !important;
}
.alert-info {
  color: color-mix(in srgb, var(--erp-info) 72%, #000) !important;
  border-color: color-mix(in srgb, var(--erp-info) 34%, transparent) !important;
  background: color-mix(in srgb, var(--erp-info) 12%, var(--erp-surface)) !important;
}

.erp-nav-badge-danger,
.badge.bg-danger,
.bg-danger {
  background-color: var(--erp-danger) !important;
}
.erp-nav-badge-primary,
.badge.bg-info,
.bg-info {
  background-color: var(--erp-info) !important;
}
.badge.bg-success,
.bg-success {
  background-color: var(--erp-success) !important;
}
.badge.bg-warning,
.bg-warning {
  background-color: var(--erp-warning) !important;
}
.text-success { color: var(--erp-success) !important; }
.text-warning { color: var(--erp-warning) !important; }
.text-danger { color: var(--erp-danger) !important; }
.text-info { color: var(--erp-info) !important; }

.table > thead th, table > thead th {
  color: var(--erp-table-head-text) !important;
  border-color: var(--erp-border) !important;
  background: var(--erp-table-head) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: color-mix(in srgb, var(--erp-table-hover) 48%, var(--erp-surface));
}
.table-hover > tbody > tr:hover > *, table tbody tr:hover > * {
  background: var(--erp-table-hover) !important;
}

.form-control, .form-select, .input-group-text {
  color: var(--erp-text) !important;
  border-color: var(--erp-border) !important;
  background-color: var(--erp-surface) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--erp-primary) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--erp-primary) 18%, transparent) !important;
}

.erp-sidebar, .inv-sidebar, .hrm-sidebar, .crm-sidebar,
.pmc-sidebar, .sfa-sidebar, .ops-sidebar {
  color: var(--erp-sidebar-text) !important;
  background: var(--erp-sidebar) !important;
}
.erp-sidebar a, .inv-sidebar a, .hrm-sidebar a, .crm-sidebar a,
.pmc-sidebar a, .sfa-sidebar a, .ops-sidebar a {
  color: var(--erp-sidebar-text) !important;
}
.erp-sidebar a.active, .inv-sidebar a.active, .hrm-sidebar a.active,
.crm-sidebar a.active, .pmc-sidebar a.active, .sfa-sidebar a.active,
.ops-sidebar a.active, .menu-item.active {
  color: #fff !important;
  background: var(--erp-sidebar-active) !important;
}