:root {
  --theme-web-page-background: var(--ui-color-surface); /* Main page background matches the shared page/card surface */
  --theme-web-top-nav-surface: linear-gradient(180deg, #304454 0%, #263846 100%); /* Top shell uses a darker premium steel gradient */
  --theme-web-top-nav-surface-solid: #2b3d4b; /* Solid fallback for top shell surfaces */
  --theme-web-top-nav-text: #ffffff; /* Top shell text color */
  --theme-web-top-nav-link-hover: #ffffff; /* Top shell hover/focus text color */
  --theme-web-top-nav-border: rgba(255, 255, 255, 0.10); /* Top shell border color */
  --theme-web-top-nav-hover-bg: rgba(255, 255, 255, 0.10); /* Top shell hover background */
  --theme-web-page-header-surface: linear-gradient(180deg, var(--theme-web-page-background) 0%, var(--theme-web-page-background) 100%); /* Page header surface matches the shared page canvas */
  --theme-web-page-header-surface-solid: var(--theme-web-page-background); /* Solid fallback keeps the header on the same page surface */
  --theme-web-page-header-text: #18222c; /* Page header card text color */
  --theme-web-page-header-muted-text: #5f6770; /* Page header secondary text color */
  --theme-web-page-header-border: rgba(123, 105, 81, 0.18); /* Page header border */
  --theme-web-page-header-shadow: 0 18px 38px rgba(36, 34, 29, 0.14); /* Page header shadow */
  --theme-web-dropdown-surface: var(--ui-color-surface); /* Dropdown background */
  --theme-web-dropdown-border: var(--ui-color-border); /* Dropdown border */
  --theme-web-dropdown-hover: rgba(63, 88, 112, 0.08); /* Dropdown hover background */
  --theme-web-dropdown-active-bg: var(--ui-color-accent); /* Dropdown active item background */
  --theme-web-dropdown-active-text: var(--ui-color-text-on-accent); /* Dropdown active item text */
  --theme-web-card-surface: var(--ui-color-surface); /* Card, modal, info-box, small-box background */
  --theme-web-card-header-surface: linear-gradient(180deg, #586f80 0%, #435868 100%); /* Shared card headers use darker steel chrome */
  --theme-web-card-header-surface-solid: #4e6373; /* Solid fallback for shared card headers */
  --theme-web-card-header-divider: #334755; /* Shared card header divider */
  --theme-web-card-header-text: #ffffff; /* Shared card header text */
  --theme-web-card-border: var(--ui-color-border); /* Card, modal, table border color */
  --theme-web-table-header-dark-bg: #425667; /* Table header background is slightly deeper than card headers */
  --theme-web-table-header-dark-text: #ffffff; /* Table header text */
  --theme-web-form-surface: var(--ui-color-control-surface); /* Input and select background */
  --theme-web-form-text: var(--ui-color-text); /* Input and select text */
  --theme-web-form-focus-border: var(--ui-color-focus-ring); /* Input focus border */
  --theme-web-link-color: var(--ui-color-primary); /* Standard link color */
  --theme-web-link-hover: var(--ui-color-primary-hover); /* Standard link hover color */
  --theme-web-success-row-bg: rgba(46, 125, 50, 0.10); /* Positive table row background */
  --theme-web-warning-row-bg: rgba(217, 119, 6, 0.10); /* Pending table row background */
  --theme-web-info-row-bg: rgba(30, 99, 208, 0.10); /* In-progress table row background */
  --theme-web-muted-row-bg: rgba(124, 137, 150, 0.10); /* Draft/inactive table row background */
  --theme-web-danger-row-bg: rgba(180, 35, 24, 0.08); /* Rejected/overdue table row background */
  --theme-web-table-header-surface: linear-gradient(180deg, #4e6373 0%, #3f5261 100%); /* Shared table header gradient */
  --theme-web-focus-ring-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18); /* Shared button focus ring shadow */
  --theme-web-focus-ring-shadow-soft: 0 0 0 0.2rem rgba(29, 78, 216, 0.16); /* Shared form focus ring shadow */
  --theme-web-button-primary-bg: linear-gradient(180deg, #ea8d20 0%, #c9680d 100%); /* Shared primary button background */
  --theme-web-button-primary-border: #b45d09; /* Shared primary button border */
  --theme-web-button-primary-shadow: 0 10px 20px rgba(189, 100, 9, 0.24); /* Shared primary button shadow */
  --theme-web-button-primary-hover-bg: linear-gradient(180deg, #df8418 0%, #b86105 100%); /* Shared primary button hover background */
  --theme-web-button-primary-hover-border: #a75605; /* Shared primary button hover border */
  --theme-web-button-primary-hover-shadow: 0 12px 24px rgba(167, 86, 5, 0.28); /* Shared primary button hover shadow */
  --theme-web-button-primary-active-bg: linear-gradient(180deg, #c56a0b 0%, #955006 100%); /* Shared primary button pressed background */
  --theme-web-button-primary-active-border: #955006; /* Shared primary button pressed border */
  --theme-web-button-secondary-bg: linear-gradient(180deg, #4a6173 0%, #374c5d 100%); /* Shared secondary button background */
  --theme-web-button-secondary-border: #314556; /* Shared secondary button border */
  --theme-web-button-secondary-shadow: 0 8px 18px rgba(49, 69, 86, 0.20); /* Shared secondary button shadow */
  --theme-web-button-secondary-hover-bg: linear-gradient(180deg, #405668 0%, #2d4152 100%); /* Shared secondary button hover background */
  --theme-web-button-secondary-hover-border: #2d4152; /* Shared secondary button hover border */
  --theme-web-button-secondary-hover-shadow: 0 10px 22px rgba(45, 65, 82, 0.24); /* Shared secondary button hover shadow */
  --theme-web-button-secondary-active-bg: linear-gradient(180deg, #34495b 0%, #253746 100%); /* Shared secondary button pressed background */
  --theme-web-button-secondary-active-border: #253746; /* Shared secondary button pressed border */
  --theme-web-button-quiet-bg: linear-gradient(180deg, #faf7f1 0%, #f0e8de 100%); /* Shared quiet button background */
  --theme-web-button-quiet-border: #cdbfae; /* Shared quiet button border */
  --theme-web-button-quiet-text: #22384a; /* Shared quiet button text */
  --theme-web-button-quiet-hover-bg: linear-gradient(180deg, #f5efe5 0%, #e8ddcf 100%); /* Shared quiet button hover background */
  --theme-web-button-quiet-hover-border: #c2b19e; /* Shared quiet button hover border */
  --theme-web-button-quiet-hover-text: #1a2d3c; /* Shared quiet button hover text */
  --theme-web-badge-primary-bg: rgba(217, 119, 6, 0.12); /* Shared primary badge background */
  --theme-web-badge-secondary-bg: rgba(31, 45, 58, 0.08); /* Shared secondary badge background */
}
/* GENERATED TOKENS START */
:root {
  --industrial-primary: #22384a;
  --industrial-primary-hover: #1a2d3c;
  --industrial-primary-pressed: #14232f;
  --industrial-secondary: #5c7180;
  --industrial-accent: #d97706;
  --industrial-accent-hover: #b86105;
  --industrial-accent-pressed: #955006;
  --industrial-background: #ebe7df;
  --industrial-surface: #fcfaf7;
  --industrial-surface-secondary: #f2ede5;
  --industrial-control-surface: #f7f3ec;
  --industrial-control-surface-hover: #eee7dd;
  --industrial-border: #d8cdc0;
  --industrial-border-strong: #b9ab9a;
  --industrial-text-primary: #1f2d3a;
  --industrial-text-secondary: #56616a;
  --industrial-text-muted: #857b70;
  --industrial-text-inverse: #ffffff;
  --industrial-text-on-accent: #ffffff;
  --industrial-focus-ring: #2563eb;
  --industrial-disabled-surface: #d9e3ec;
  --industrial-success: #2e7d32;
  --industrial-success-surface: #e3f5e6;
  --industrial-warning: #d97706;
  --industrial-warning-surface: #fef1d6;
  --industrial-error: #b42318;
  --industrial-error-surface: #fee4e2;
  --industrial-info: #1e63d0;
  --industrial-info-surface: #deeafe;
  --industrial-shadow: 0 10px 24px rgba(28, 41, 53, 0.14);
  --industrial-radius-card: 14px;
  --industrial-radius-control: 12px;
  --industrial-touch-target: 48px;
}

:root {
  --ui-color-background: var(--industrial-background);
  --ui-color-primary: var(--industrial-primary);
  --ui-color-primary-hover: var(--industrial-primary-hover);
  --ui-color-primary-pressed: var(--industrial-primary-pressed);
  --ui-color-secondary: var(--industrial-secondary);
  --ui-color-accent: var(--industrial-accent);
  --ui-color-accent-hover: var(--industrial-accent-hover);
  --ui-color-accent-pressed: var(--industrial-accent-pressed);
  --ui-color-danger: var(--industrial-error);
  --ui-color-danger-hover: #991b1b;
  --ui-color-warning: var(--industrial-warning);
  --ui-color-info: var(--industrial-info);
  --ui-color-surface: var(--industrial-surface);
  --ui-color-surface-muted: var(--industrial-surface-secondary);
  --ui-color-control-surface: var(--industrial-control-surface);
  --ui-color-control-surface-hover: var(--industrial-control-surface-hover);
  --ui-color-surface-disabled: var(--industrial-disabled-surface);
  --ui-color-border: var(--industrial-border);
  --ui-color-border-strong: var(--industrial-border-strong);
  --ui-color-text: var(--industrial-text-primary);
  --ui-color-text-secondary: var(--industrial-text-secondary);
  --ui-color-text-muted: var(--industrial-text-muted);
  --ui-color-text-inverse: var(--industrial-text-inverse);
  --ui-color-text-on-accent: var(--industrial-text-on-accent);
  --ui-color-focus-ring: var(--industrial-focus-ring);
  --ui-color-success: var(--industrial-success);
  --ui-color-success-surface: var(--industrial-success-surface);
  --ui-shadow-card: var(--industrial-shadow);
  --ui-color-warning-surface: var(--industrial-warning-surface);
  --ui-color-error-surface: var(--industrial-error-surface);
  --ui-color-info-surface: var(--industrial-info-surface);
  --ui-radius-card: var(--industrial-radius-card);
  --ui-radius-control: var(--industrial-radius-control);
  --ui-touch-target: var(--industrial-touch-target);
}
/* GENERATED TOKENS END */

body.industrial-professional-theme:not(.login-page):not(.landing-page) {
  --ui-color-background: #ece7df;
  --ui-color-primary: #19324a;
  --ui-color-primary-hover: #13273a;
  --ui-color-primary-pressed: #0e1f2d;
  --ui-color-secondary: #556b7d;
  --ui-color-accent: #ef8f1f;
  --ui-color-accent-hover: #d8780d;
  --ui-color-accent-pressed: #b95f05;
  --ui-color-surface: #fbf8f3;
  --ui-color-surface-muted: #f1eadf;
  --ui-color-control-surface: #f7f1e7;
  --ui-color-control-surface-hover: #ece2d4;
  --ui-color-border: #d3c5b3;
  --ui-color-border-strong: #b19f8a;
  --ui-color-text: #1d2936;
  --ui-color-text-secondary: #51606d;
  --ui-color-text-muted: #7a7166;
  --ui-color-focus-ring: #ef8f1f;
  --theme-web-page-background: var(--ui-color-background);
  --theme-web-top-nav-surface: linear-gradient(180deg, #183149 0%, #122436 100%);
  --theme-web-top-nav-surface-solid: #15293b;
  --theme-web-top-nav-border: rgba(255, 255, 255, 0.08);
  --theme-web-top-nav-hover-bg: rgba(255, 255, 255, 0.12);
  --theme-web-page-header-surface: linear-gradient(180deg, #f8f4ed 0%, #efe7dc 100%);
  --theme-web-page-header-surface-solid: #f4ebdf;
  --theme-web-page-header-text: #f8fbff;
  --theme-web-page-header-muted-text: rgba(248, 251, 255, 0.78);
  --theme-web-page-header-border: rgba(255, 255, 255, 0.08);
  --theme-web-page-header-shadow: 0 22px 44px rgba(18, 36, 54, 0.18);
  --theme-web-page-header-surface: var(--theme-web-shared-card-header-base);
  --theme-web-page-header-surface-solid: var(--theme-web-shared-card-header-base);
  --theme-web-dropdown-hover: rgba(25, 50, 74, 0.08);
  --theme-web-dropdown-active-bg: linear-gradient(180deg, #f29a2a 0%, #d8740c 100%);
  --theme-web-card-header-surface: linear-gradient(180deg, #304a61 0%, #22384d 100%);
  --theme-web-card-header-surface-solid: #294156;
  --theme-web-card-header-divider: #183246;
  --theme-web-shared-card-header-base: #294156;
  --theme-web-shared-card-header-top: #314d64;
  --theme-web-shared-card-header-mid: #294257;
  --theme-web-shared-card-header-bottom: #1e3244;
  --theme-web-shared-card-header-divider: #183246;
  --theme-web-table-header-dark-bg: #22384d;
  --theme-web-table-header-surface: linear-gradient(180deg, #2c465c 0%, #1f3548 100%);
  --theme-web-link-color: var(--ui-color-primary);
  --theme-web-link-hover: var(--ui-color-primary-hover);
  --theme-web-focus-ring-shadow: 0 0 0 0.2rem rgba(239, 143, 31, 0.22);
  --theme-web-focus-ring-shadow-soft: 0 0 0 0.2rem rgba(239, 143, 31, 0.16);
  --theme-web-button-primary-bg: linear-gradient(180deg, #f29a2a 0%, #d8740c 100%);
  --theme-web-button-primary-border: #b95f05;
  --theme-web-button-primary-shadow: 0 12px 24px rgba(185, 95, 5, 0.24);
  --theme-web-button-primary-hover-bg: linear-gradient(180deg, #ec911d 0%, #c96908 100%);
  --theme-web-button-primary-hover-border: #ab5804;
  --theme-web-button-primary-hover-shadow: 0 14px 28px rgba(171, 88, 4, 0.28);
  --theme-web-button-primary-active-bg: linear-gradient(180deg, #d97d12 0%, #ab5804 100%);
  --theme-web-button-primary-active-border: #984c04;
  --theme-web-button-secondary-bg: linear-gradient(180deg, #53697c 0%, #3b5163 100%);
  --theme-web-button-secondary-border: #30485b;
  --theme-web-button-secondary-shadow: 0 10px 22px rgba(48, 72, 91, 0.22);
  --theme-web-button-secondary-hover-bg: linear-gradient(180deg, #4a6073 0%, #33495b 100%);
  --theme-web-button-secondary-hover-border: #2b4254;
  --theme-web-button-secondary-hover-shadow: 0 12px 24px rgba(43, 66, 84, 0.26);
  --theme-web-button-secondary-active-bg: linear-gradient(180deg, #415669 0%, #2a3e50 100%);
  --theme-web-button-secondary-active-border: #243748;
  --theme-web-button-quiet-bg: linear-gradient(180deg, #fbf8f2 0%, #efe7db 100%);
  --theme-web-button-quiet-border: #cbbba7;
  --theme-web-button-quiet-text: #19324a;
  --theme-web-button-quiet-hover-bg: linear-gradient(180deg, #f5eee4 0%, #e6dccd 100%);
  --theme-web-button-quiet-hover-border: #bead98;
  --theme-web-button-quiet-hover-text: #13273a;
  --theme-web-page-header-action-bg: var(--theme-web-button-quiet-bg);
  --theme-web-page-header-action-border: var(--theme-web-button-quiet-border);
  --theme-web-page-header-action-text: var(--theme-web-button-quiet-text);
  --theme-web-page-header-action-hover-bg: var(--theme-web-button-quiet-hover-bg);
  --theme-web-page-header-action-hover-border: var(--theme-web-button-quiet-hover-border);
  --theme-web-page-header-action-active-bg: var(--theme-web-button-primary-bg);
  --theme-web-page-header-action-active-border: var(--theme-web-button-primary-border);
  --theme-web-page-header-action-active-text: var(--ui-color-text-on-accent);
  --theme-web-header-action-active-bg: var(--theme-web-button-primary-bg);
  --theme-web-header-action-active-border: var(--theme-web-button-primary-border);
  --theme-web-sidebar-gradient: linear-gradient(180deg, #13273a 0%, #0d1c29 100%);
  --theme-web-sidebar-surface: #13273a;
  --theme-web-sidebar-bubble-bg: rgba(255, 255, 255, 0.05);
  --theme-web-sidebar-bubble-hover-bg: rgba(255, 255, 255, 0.11);
  --theme-web-sidebar-active-bg: var(--theme-web-button-primary-bg);
  --theme-web-sidebar-active-border: rgba(255, 255, 255, 0.12);
  --theme-web-sidebar-active-text: var(--ui-color-text-on-accent);
  --theme-web-badge-primary-bg: rgba(239, 143, 31, 0.14);
  --theme-web-badge-secondary-bg: rgba(25, 50, 74, 0.10);
}

.ui-hidden {
  display: none !important;
}

body.industrial-professional-theme {
  background: var(--theme-web-page-background) !important;
  background-color: var(--theme-web-page-background);
  background-image: none !important;
  color: var(--ui-color-text);
  scrollbar-color: #8b94a1 rgba(47, 62, 79, 0.08);
  scrollbar-width: thin;
}

body.industrial-professional-theme ::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

body.industrial-professional-theme ::-webkit-scrollbar-track {
  background: rgba(47, 62, 79, 0.08);
  border-radius: 999px;
}

body.industrial-professional-theme ::-webkit-scrollbar-thumb {
  background: #8b94a1;
  border: 2px solid rgba(47, 62, 79, 0.08);
  border-radius: 999px;
  transition: background-color 140ms ease;
}

body.industrial-professional-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--ui-color-primary);
}

body.industrial-professional-theme .wrapper,
body.industrial-professional-theme .content-wrapper,
body.industrial-professional-theme .content,
body.industrial-professional-theme .content-header {
  background: var(--theme-web-page-background) !important;
  background-color: var(--theme-web-page-background) !important;
  background-image: none !important;
}

body.industrial-professional-theme .main-header.navbar,
body.industrial-professional-theme .main-header.navbar.navbar-dark {
  background: var(--theme-web-top-nav-surface) !important;
  background-color: var(--theme-web-top-nav-surface-solid) !important;
  border-color: var(--theme-web-top-nav-border) !important;
  color: var(--theme-web-top-nav-text) !important;
}

body.industrial-professional-theme .main-footer {
  background: var(--theme-web-top-nav-surface) !important;
  background-color: var(--theme-web-top-nav-surface-solid) !important;
  border-color: var(--theme-web-top-nav-border) !important;
  color: var(--theme-web-top-nav-text) !important;
}

body.industrial-professional-theme .main-footer a,
body.industrial-professional-theme .main-header .nav-link,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .nav-link,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .nav-link:hover,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .nav-link:focus,
body.industrial-professional-theme .main-header .user-info,
body.industrial-professional-theme .main-header .clock-display {
  color: var(--theme-web-top-nav-text) !important;
}

body.industrial-professional-theme .main-header {
  border-bottom: 1px solid var(--theme-web-top-nav-border) !important;
  box-shadow: 0 16px 34px rgba(22, 34, 45, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.industrial-professional-theme .main-header.navbar-dark .navbar-brand,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .nav-link,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .nav-link:hover,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .nav-link:focus,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .show > .nav-link,
body.industrial-professional-theme .main-header.navbar-dark .navbar-nav .active > .nav-link {
  color: var(--theme-web-top-nav-text) !important;
}

body.industrial-professional-theme .main-header .nav-link:hover,
body.industrial-professional-theme .main-header .nav-link:focus {
  color: var(--theme-web-top-nav-text) !important;
}

body.industrial-professional-theme .main-header .ui-action-quiet {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--theme-web-top-nav-text) !important;
}

body.industrial-professional-theme .main-header .ui-action-quiet:hover,
body.industrial-professional-theme .main-header .ui-action-quiet:focus {
  background: var(--theme-web-top-nav-hover-bg) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: var(--theme-web-top-nav-text) !important;
}

body.industrial-professional-theme .dropdown-menu {
  background: var(--theme-web-dropdown-surface) !important;
  border: 1px solid var(--theme-web-dropdown-border) !important;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(55, 65, 81, 0.12) !important;
}

body.industrial-professional-theme .dropdown-item {
  color: var(--ui-color-text) !important;
  font-weight: 600;
}

body.industrial-professional-theme .dropdown-item:hover,
body.industrial-professional-theme .dropdown-item:focus {
  background: var(--theme-web-dropdown-hover) !important;
  color: var(--ui-color-primary) !important;
}

body.industrial-professional-theme .dropdown-item.active,
body.industrial-professional-theme .dropdown-item:active {
  background: var(--theme-web-dropdown-active-bg) !important;
  color: var(--theme-web-dropdown-active-text) !important;
}

body.industrial-professional-theme .dropdown-divider {
  border-top-color: var(--ui-color-border) !important;
}

body.industrial-professional-theme .card,
body.industrial-professional-theme .small-box,
body.industrial-professional-theme .info-box,
body.industrial-professional-theme .modal-content,
body.industrial-professional-theme .dropdown-menu,
body.industrial-professional-theme .select2-dropdown,
body.industrial-professional-theme .fc-theme-standard td,
body.industrial-professional-theme .fc-theme-standard th {
  background-color: var(--theme-web-card-surface);
  border-color: var(--theme-web-card-border);
  box-shadow: var(--ui-shadow-card);
  color: var(--ui-color-text);
}

body.industrial-professional-theme .card,
body.industrial-professional-theme .modal-content {
  border-radius: var(--ui-radius-card);
}

body.industrial-professional-theme .card-header,
body.industrial-professional-theme .modal-header,
body.industrial-professional-theme .table thead th {
  background: var(--theme-web-card-header-surface);
  background-color: var(--theme-web-card-header-surface-solid);
  border-color: var(--theme-web-card-header-divider);
  color: var(--theme-web-card-header-text);
}

body.industrial-professional-theme .modal-footer {
  background: var(--ui-color-surface-muted);
  border-color: var(--theme-web-card-border);
  color: var(--ui-color-text);
}

body.industrial-professional-theme .modal-body,
body.industrial-professional-theme .card-body,
body.industrial-professional-theme .table,
body.industrial-professional-theme .dataTables_wrapper,
body.industrial-professional-theme .select2-results,
body.industrial-professional-theme .fc-theme-standard tbody {
  background: var(--ui-color-surface);
}

body.industrial-professional-theme .table td,
body.industrial-professional-theme .table th {
  border-color: var(--theme-web-card-border);
}

body.industrial-professional-theme .table tbody tr.status-completed > td,
body.industrial-professional-theme .table tbody tr.status-paid > td,
body.industrial-professional-theme .table tbody tr.status-approved > td,
body.industrial-professional-theme .table tbody tr.status-active > td {
  background-color: var(--theme-web-success-row-bg) !important;
}

body.industrial-professional-theme .table tbody tr.status-scheduled > td,
body.industrial-professional-theme .table tbody tr.status-pending > td,
body.industrial-professional-theme .table tbody tr.status-prospect > td {
  background-color: var(--theme-web-warning-row-bg) !important;
}

body.industrial-professional-theme .table tbody tr.status-in-progress > td,
body.industrial-professional-theme .table tbody tr.status-partial > td,
body.industrial-professional-theme .table tbody tr.status-sent > td {
  background-color: var(--theme-web-info-row-bg) !important;
}

body.industrial-professional-theme .table tbody tr.status-cancelled > td,
body.industrial-professional-theme .table tbody tr.status-inactive > td,
body.industrial-professional-theme .table tbody tr.status-draft > td,
body.industrial-professional-theme .table tbody tr.status-not-initiated > td {
  background-color: var(--theme-web-muted-row-bg) !important;
}

body.industrial-professional-theme .table tbody tr.status-rejected > td,
body.industrial-professional-theme .table tbody tr.status-overdue > td {
  background-color: var(--theme-web-danger-row-bg) !important;
}

body.industrial-professional-theme .table tbody tr.status-completed > td:first-child,
body.industrial-professional-theme .table tbody tr.status-paid > td:first-child,
body.industrial-professional-theme .table tbody tr.status-approved > td:first-child,
body.industrial-professional-theme .table tbody tr.status-active > td:first-child {
  box-shadow: inset 4px 0 0 var(--ui-color-success);
}

body.industrial-professional-theme .table tbody tr.status-scheduled > td:first-child,
body.industrial-professional-theme .table tbody tr.status-pending > td:first-child,
body.industrial-professional-theme .table tbody tr.status-prospect > td:first-child {
  box-shadow: inset 4px 0 0 var(--ui-color-warning);
}

body.industrial-professional-theme .table tbody tr.status-in-progress > td:first-child,
body.industrial-professional-theme .table tbody tr.status-partial > td:first-child,
body.industrial-professional-theme .table tbody tr.status-sent > td:first-child {
  box-shadow: inset 4px 0 0 var(--ui-color-info);
}

body.industrial-professional-theme .table tbody tr.status-cancelled > td:first-child,
body.industrial-professional-theme .table tbody tr.status-inactive > td:first-child,
body.industrial-professional-theme .table tbody tr.status-draft > td:first-child,
body.industrial-professional-theme .table tbody tr.status-not-initiated > td:first-child {
  box-shadow: inset 4px 0 0 var(--ui-color-text-muted);
}

body.industrial-professional-theme .table tbody tr.status-rejected > td:first-child,
body.industrial-professional-theme .table tbody tr.status-overdue > td:first-child {
  box-shadow: inset 4px 0 0 var(--ui-color-danger);
}

body.industrial-professional-theme .table-hover tbody tr.status-completed:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-paid:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-approved:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-active:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-scheduled:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-pending:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-prospect:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-in-progress:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-partial:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-sent:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-cancelled:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-inactive:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-draft:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-not-initiated:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-rejected:hover > td,
body.industrial-professional-theme .table-hover tbody tr.status-overdue:hover > td {
  filter: brightness(0.985);
}

body.industrial-professional-theme .table thead th,
body.industrial-professional-theme table.dataTable thead th,
body.industrial-professional-theme .invoice-summary .table thead th,
body.industrial-professional-theme #perm-matrix thead th,
body.industrial-professional-theme .perm-matrix thead th {
  background: var(--theme-web-table-header-surface) !important;
  background-color: var(--theme-web-table-header-dark-bg) !important;
  border-bottom-color: var(--theme-web-card-header-divider) !important;
  border-color: var(--theme-web-card-header-divider) !important;
  color: var(--theme-web-table-header-dark-text) !important;
  font-weight: 800;
}

body.industrial-professional-theme table.dataTable thead th:before,
body.industrial-professional-theme table.dataTable thead th:after {
  color: rgba(255, 255, 255, 0.52) !important;
}

body.industrial-professional-theme .dataTables_wrapper .dataTables_filter label,
body.industrial-professional-theme .dataTables_wrapper .dataTables_length label,
body.industrial-professional-theme .dataTables_wrapper .dataTables_info,
body.industrial-professional-theme .dataTables_wrapper .dataTables_paginate {
  color: var(--ui-color-text-secondary) !important;
}

body.industrial-professional-theme .dataTables_wrapper .paginate_button .page-link,
body.industrial-professional-theme .dataTables_wrapper .paginate_button a,
body.industrial-professional-theme .page-item .page-link {
  background: var(--ui-color-control-surface) !important;
  border-color: var(--ui-color-border) !important;
  color: var(--ui-color-primary) !important;
}

body.industrial-professional-theme .page-item.active .page-link {
  background: var(--ui-color-accent) !important;
  border-color: var(--ui-color-accent) !important;
  color: var(--ui-color-text-inverse) !important;
}

body.industrial-professional-theme .form-control,
body.industrial-professional-theme .custom-select,
body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection,
body.industrial-professional-theme .input-group-text {
  background-color: var(--theme-web-form-surface);
  border-color: var(--ui-color-border);
  color: var(--theme-web-form-text);
  min-height: var(--ui-touch-target);
}

body.industrial-professional-theme .form-control:focus,
body.industrial-professional-theme .custom-select:focus,
body.industrial-professional-theme .select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--theme-web-form-focus-border);
  box-shadow: var(--theme-web-focus-ring-shadow-soft);
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple {
  align-items: center;
  background-color: var(--theme-web-form-surface) !important;
  border-radius: var(--ui-radius-control);
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  height: auto;
  min-height: var(--ui-touch-target);
  overflow: hidden;
  padding: 0.375rem 2.5rem 0.375rem 0.75rem;
  position: relative;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple::after {
  color: var(--ui-color-text-muted);
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  transition: color 140ms ease, transform 180ms ease;
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple:hover {
  border-color: var(--ui-color-border-strong);
}

body.industrial-professional-theme .select2-container--bootstrap4.select2-container--open .select2-selection--multiple::after {
  color: var(--theme-web-form-text);
  transform: translateY(-50%) rotate(180deg);
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
  display: none !important;
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
  align-items: center;
  background: transparent !important;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  min-height: calc(var(--ui-touch-target) - 0.75rem);
  padding: 0;
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  background: var(--ui-color-surface-muted);
  border: 1px solid var(--ui-color-border);
  border-radius: 999px;
  color: var(--theme-web-form-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  padding: 0.32rem 0.75rem 0.32rem 1.55rem;
  position: relative;
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--ui-color-text-muted);
  left: 0.55rem;
  line-height: 1;
  margin-right: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
  margin: 0;
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--theme-web-form-text) !important;
  margin-top: 0 !important;
  min-height: 1.5rem;
  padding: 0 !important;
}

body.industrial-professional-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--ui-color-text-muted);
  opacity: 1;
}

body.industrial-professional-theme .btn {
  border-radius: var(--ui-radius-control);
  font-weight: 700;
  min-height: var(--ui-touch-target);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

body.industrial-professional-theme .btn:focus,
body.industrial-professional-theme .btn.focus {
  box-shadow: var(--theme-web-focus-ring-shadow);
}

body.industrial-professional-theme a {
  color: var(--theme-web-link-color);
}

body.industrial-professional-theme a:hover,
body.industrial-professional-theme a:focus {
  color: var(--theme-web-link-hover);
}

.ui-page-header {
  background: var(--theme-web-page-header-surface);
  background-color: var(--theme-web-page-header-surface-solid);
  border: 1px solid var(--theme-web-page-header-border);
  border-radius: var(--ui-radius-card);
  box-shadow: var(--theme-web-page-header-shadow);
  color: var(--theme-web-page-header-text);
  margin-bottom: 1.5rem;
  padding: 1.5rem;
}

.ui-page-title {
  color: var(--theme-web-page-header-text) !important;
  opacity: 1;
}

.ui-page-header .text-faded,
.ui-page-subtitle {
  color: var(--theme-web-page-header-muted-text) !important;
  opacity: 1;
}

.ui-page-header .ui-page-title i {
  color: var(--ui-color-accent) !important;
}

.ui-page-header .ui-page-subtitle i {
  color: var(--theme-web-page-header-text) !important;
}

.u-rowtoggle-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.u-cell-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.u-cell-ellipsis,
th.u-cell-ellipsis {
  display: table-cell;
}

.u-cell-ellipsis:not(td):not(th) {
  display: block;
}

.u-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.u-filterbar > * {
  margin: 0;
}

.u-cardhead {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
}

.u-cardhead-title {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.u-cardhead-right {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ui-card-surface,
.ui-toolbar,
.ui-summary-card {
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow-card);
}

.ui-card-surface {
  overflow: hidden;
}

.ui-card-header {
  align-items: center;
  background: var(--theme-web-card-header-surface);
  border: 0;
  border-bottom: 1px solid var(--theme-web-card-header-divider);
  color: var(--theme-web-card-header-text);
  display: flex;
  min-height: 56px;
  padding: 1rem 1.25rem;
}

.ui-card-header--warning {
  background: var(--ui-color-warning);
  color: var(--ui-color-text-inverse);
}

.ui-card-title,
.ui-card-header .card-title,
.ui-card-header h3,
.ui-card-header h5,
.ui-card-header label,
.ui-card-header .custom-control-label {
  color: inherit !important;
  font-weight: 800;
  margin: 0;
}

.ui-card-body {
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
}

.ui-entity-card {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 100%;
  overflow: hidden;
}

.ui-entity-card--interactive {
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ui-entity-card--interactive:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px);
}

.ui-entity-card-accent {
  background: var(--ui-color-border-strong, var(--ui-color-border));
  flex: 0 0 6px;
  width: 100%;
}

.ui-entity-card-main {
  background: #fff;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.ui-entity-card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 0.875rem 1rem;
}

.ui-entity-card-header {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.ui-entity-card-title {
  flex: 1 1 auto;
  font-weight: 800;
  margin: 0;
  min-width: 0;
}

.ui-entity-card-header-control {
  flex: 0 0 auto;
}

.ui-entity-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-width: 0;
}

.ui-entity-card-meta {
  align-items: flex-start;
  color: var(--ui-color-text-muted);
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.ui-entity-card-meta-icon {
  color: var(--ui-color-text-light);
  flex: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 0.1rem;
  text-align: center;
}

.ui-entity-card-meta-content {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-entity-card-meta-content > *:last-child {
  margin-bottom: 0;
}

.ui-entity-card-status {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.ui-entity-card-status-text {
  text-align: right;
}

.ui-entity-card-status-primary,
.ui-entity-card-status-secondary {
  font-weight: 700;
}

.ui-entity-card-status-secondary {
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  margin-top: 0.125rem;
}

.ui-entity-card-footer {
  background: #fff;
  border-top: 1px solid var(--ui-color-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.ui-entity-card-secondary-actions {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-entity-card-primary-action {
  display: flex;
}

.ui-entity-card-secondary-actions > .btn,
.ui-entity-card-secondary-actions > .ui-action,
.ui-entity-card-primary-action > .btn,
.ui-entity-card-primary-action > .ui-action {
  min-width: 0;
  width: 100%;
}

body.industrial-professional-theme .ui-entity-card-footer .ui-action:not(.ui-action-danger):not(.ui-action-disabled):not([aria-disabled="true"]):not(:disabled) {
  background: var(--theme-web-button-secondary-bg) !important;
  border-color: var(--theme-web-button-secondary-border) !important;
  box-shadow: var(--theme-web-button-secondary-shadow) !important;
  color: var(--ui-color-text-inverse) !important;
}

body.industrial-professional-theme .ui-entity-card-footer .ui-action:not(.ui-action-danger):not(.ui-action-disabled):not([aria-disabled="true"]):not(:disabled):hover,
body.industrial-professional-theme .ui-entity-card-footer .ui-action:not(.ui-action-danger):not(.ui-action-disabled):not([aria-disabled="true"]):not(:disabled):focus {
  background: var(--theme-web-button-secondary-hover-bg) !important;
  border-color: var(--theme-web-button-secondary-hover-border) !important;
  box-shadow: var(--theme-web-button-secondary-hover-shadow) !important;
  color: var(--ui-color-text-inverse) !important;
}

body.industrial-professional-theme .ui-entity-card-footer .ui-action:not(.ui-action-danger):not(.ui-action-disabled):not([aria-disabled="true"]):not(:disabled):active,
body.industrial-professional-theme .ui-entity-card-footer .ui-action:not(.ui-action-danger):not(.ui-action-disabled):not([aria-disabled="true"]):not(:disabled).is-active {
  background: var(--theme-web-button-secondary-active-bg) !important;
  border-color: var(--theme-web-button-secondary-active-border) !important;
  color: var(--ui-color-text-inverse) !important;
}

.ui-entity-card--success .ui-entity-card-accent,
.status-active .ui-entity-card-accent,
.status-completed .ui-entity-card-accent,
.status-approved .ui-entity-card-accent,
.status-paid .ui-entity-card-accent {
  background: var(--ui-color-success);
}

.ui-entity-card--warning .ui-entity-card-accent,
.status-prospect .ui-entity-card-accent,
.status-scheduled .ui-entity-card-accent,
.status-pending .ui-entity-card-accent {
  background: var(--ui-color-warning);
}

.ui-entity-card--danger .ui-entity-card-accent,
.status-rejected .ui-entity-card-accent,
.status-overdue .ui-entity-card-accent,
.status-cancelled .ui-entity-card-accent,
.status-canceled .ui-entity-card-accent {
  background: var(--ui-color-danger);
}

.ui-entity-card--info .ui-entity-card-accent,
.status-in-progress .ui-entity-card-accent,
.status-partial .ui-entity-card-accent {
  background: var(--ui-color-info);
}

.ui-entity-card--secondary .ui-entity-card-accent,
.status-inactive .ui-entity-card-accent,
.status-draft .ui-entity-card-accent {
  background: var(--ui-color-text-light);
}

@media (max-width: 420px) {
  .u-cardhead {
    align-items: flex-start;
    flex-direction: column;
  }

  .u-cardhead-right {
    display: flex;
    justify-content: flex-end;
    white-space: normal;
    width: 100%;
  }

  .ui-entity-card-secondary-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768.98px) {
  .u-rowtoggle-icon {
    font-size: 1.25rem;
  }
}

.ui-action {
  align-items: center;
  background-image: none !important;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  box-shadow: none !important;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: var(--ui-touch-target);
  text-decoration: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ui-action:hover,
.ui-action:focus {
  text-decoration: none !important;
}

.ui-action:focus,
.ui-action:focus-visible {
  box-shadow: var(--theme-web-focus-ring-shadow) !important;
  outline: none;
}

.ui-action-primary {
  background: var(--theme-web-button-primary-bg) !important;
  border-color: var(--theme-web-button-primary-border) !important;
  box-shadow: var(--theme-web-button-primary-shadow) !important;
  color: var(--ui-color-text-on-accent) !important;
}

.ui-action-primary:hover,
.ui-action-primary:focus {
  background: var(--theme-web-button-primary-hover-bg) !important;
  border-color: var(--theme-web-button-primary-hover-border) !important;
  box-shadow: var(--theme-web-button-primary-hover-shadow) !important;
  color: var(--ui-color-text-on-accent) !important;
}

.ui-action-primary:active,
.ui-action-primary.is-active {
  background: var(--theme-web-button-primary-active-bg) !important;
  border-color: var(--theme-web-button-primary-active-border) !important;
}

.ui-action-secondary {
  background: var(--theme-web-button-secondary-bg) !important;
  border-color: var(--theme-web-button-secondary-border) !important;
  box-shadow: var(--theme-web-button-secondary-shadow) !important;
  color: var(--ui-color-text-inverse) !important;
}

.ui-action-secondary:hover,
.ui-action-secondary:focus {
  background: var(--theme-web-button-secondary-hover-bg) !important;
  border-color: var(--theme-web-button-secondary-hover-border) !important;
  box-shadow: var(--theme-web-button-secondary-hover-shadow) !important;
  color: var(--ui-color-text-inverse) !important;
}

.ui-action-secondary:active,
.ui-action-secondary.is-active {
  background: var(--theme-web-button-secondary-active-bg) !important;
  border-color: var(--theme-web-button-secondary-active-border) !important;
}

.ui-action-quiet {
  background: var(--theme-web-button-quiet-bg) !important;
  border-color: var(--theme-web-button-quiet-border) !important;
  color: var(--theme-web-button-quiet-text) !important;
}

.ui-action-quiet:hover,
.ui-action-quiet:focus {
  background: var(--theme-web-button-quiet-hover-bg) !important;
  border-color: var(--theme-web-button-quiet-hover-border) !important;
  color: var(--theme-web-button-quiet-hover-text) !important;
}

.ui-action-danger {
  background: var(--ui-color-danger) !important;
  border-color: var(--ui-color-danger) !important;
  color: var(--ui-color-text-inverse) !important;
}

.ui-action-danger:hover,
.ui-action-danger:focus {
  background: var(--ui-color-danger-hover) !important;
  border-color: var(--ui-color-danger-hover) !important;
  color: var(--ui-color-text-inverse) !important;
}

.ui-action-disabled,
.ui-action[aria-disabled="true"],
.ui-action:disabled {
  background: var(--ui-color-surface-disabled) !important;
  background-image: none !important;
  border-color: var(--ui-color-surface-disabled) !important;
  box-shadow: none !important;
  color: var(--ui-color-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none;
}

.ui-action-sm {
  min-height: 40px;
}

.ui-action-block {
  width: 100%;
}

.ui-action-inline {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-color-primary) !important;
  justify-content: flex-start;
  min-height: auto;
  padding: 0 !important;
}

.ui-action-inline:hover,
.ui-action-inline:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ui-color-primary-hover) !important;
  text-decoration: underline;
}

.ui-action-inline.ui-action-sm {
  min-height: auto;
}

.ui-action-inline-muted {
  color: var(--ui-color-text-muted) !important;
}

.ui-action-inline-muted:hover,
.ui-action-inline-muted:focus {
  color: var(--ui-color-text) !important;
}

.ui-action-inline-danger {
  color: var(--ui-color-danger) !important;
}

.ui-action-inline-danger:hover,
.ui-action-inline-danger:focus {
  color: var(--ui-color-danger-hover) !important;
}

.ui-dropdown-menu {
  background: var(--ui-color-surface) !important;
  border: 1px solid var(--ui-color-border) !important;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16) !important;
}

.ui-dropdown-item {
  color: var(--ui-color-text) !important;
  font-weight: 600;
}

.ui-dropdown-item-danger {
  color: var(--ui-color-danger) !important;
}

.ui-dropdown-item:hover,
.ui-dropdown-item:focus {
  background: var(--theme-web-dropdown-hover) !important;
  color: var(--ui-color-primary) !important;
}

.ui-dropdown-item-danger:hover,
.ui-dropdown-item-danger:focus {
  color: var(--ui-color-danger-hover) !important;
}

.ui-dropdown-item.ui-action-disabled,
.ui-dropdown-item[aria-disabled="true"] {
  background: var(--ui-color-surface) !important;
  color: var(--ui-color-text-muted) !important;
}

.ui-alert {
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  color: var(--ui-color-text);
}

.ui-alert-success {
  background-color: var(--ui-color-success-surface);
  border-color: var(--ui-color-success);
}

.ui-alert-warning {
  background-color: var(--ui-color-warning-surface);
  border-color: var(--ui-color-warning);
}

.ui-alert-danger {
  background-color: var(--ui-color-error-surface);
  border-color: var(--ui-color-danger);
}

.ui-alert-info {
  background-color: var(--ui-color-info-surface);
  border-color: var(--ui-color-info);
}

.ui-alert-light {
  background-color: var(--ui-color-surface-muted);
  border-color: var(--ui-color-border);
}

.ui-alert-secondary {
  background-color: var(--ui-color-surface-muted);
  border-color: var(--ui-color-border-strong);
}

.ui-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 800;
  gap: 0.35rem;
  line-height: 1;
  padding: 0.45rem 0.7rem;
}

.ui-badge-info {
  background: var(--ui-color-info-surface);
  color: var(--ui-color-info);
}

.ui-badge-success {
  background: var(--ui-color-success-surface);
  color: var(--ui-color-success);
}

.ui-badge-warning {
  background: var(--ui-color-warning-surface);
  color: #92400e;
}

.ui-badge-danger {
  background: var(--ui-color-error-surface);
  color: var(--ui-color-danger);
}

.ui-badge-secondary {
  background: var(--theme-web-badge-secondary-bg);
  color: var(--ui-color-text);
}

.ui-badge-primary {
  background: var(--theme-web-badge-primary-bg);
  color: var(--ui-color-primary);
}

.ui-badge-contrast {
  color: var(--ui-color-text) !important;
}

.ui-table-header,
.ui-table-header th {
  background: var(--theme-web-table-header-surface) !important;
  border-color: var(--theme-web-table-header-dark-bg) !important;
  color: var(--ui-color-text-inverse) !important;
  font-weight: 800;
}

.ui-status-success {
  color: var(--ui-color-success) !important;
}

.ui-status-warning {
  color: var(--ui-color-warning) !important;
}

.ui-status-info {
  color: var(--ui-color-info) !important;
}

.ui-status-danger {
  color: var(--ui-color-danger) !important;
}

.ui-status-primary {
  color: var(--ui-color-primary) !important;
}

.ui-status-secondary {
  color: var(--ui-color-secondary) !important;
}

.ui-text-inverse {
  color: var(--ui-color-text-inverse) !important;
}

.ui-progress-bar-danger {
  background-color: var(--ui-color-danger) !important;
}

.ui-progress-bar-warning {
  background-color: var(--ui-color-warning) !important;
}

.ui-progress-bar-success {
  background-color: var(--ui-color-success) !important;
}

.ui-highlight-warning {
  background-color: var(--ui-color-warning-surface) !important;
  transition: background-color 180ms ease;
}