:root {
  --app-btn-primary-bg: #d9edf4;
  --app-btn-primary-border: #afd5e2;
  --app-btn-primary-fg: #245062;
  --app-btn-primary-hover-bg: #c8e4ee;
  --app-btn-primary-hover-border: #9fcddc;
  --app-btn-primary-hover-fg: #1b4658;
  --app-btn-success-bg: #deefe2;
  --app-btn-success-border: #b9dec3;
  --app-btn-success-fg: #1f5a32;
  --app-btn-success-hover-bg: #cde6d5;
  --app-btn-success-hover-border: #a8d3b5;
  --app-btn-success-hover-fg: #184f2a;
  --app-btn-danger-bg: #f8dfdb;
  --app-btn-danger-border: #efc0b8;
  --app-btn-danger-fg: #7b2f2a;
  --app-btn-danger-hover-bg: #f3d2cd;
  --app-btn-danger-hover-border: #e7aca1;
  --app-btn-danger-hover-fg: #682823;
  --app-btn-orange-bg: #f7ead8;
  --app-btn-orange-border: #e9cfaa;
  --app-btn-orange-fg: #7a5625;
  --app-btn-orange-hover-bg: #f2e0c8;
  --app-btn-orange-hover-border: #ddb98b;
  --app-btn-orange-hover-fg: #66481f;
  --app-btn-pink-bg: #f6deea;
  --app-btn-pink-border: #eac0d7;
  --app-btn-pink-fg: #6e3457;
  --app-btn-pink-hover-bg: #f1d0e2;
  --app-btn-pink-hover-border: #dfa9c8;
  --app-btn-pink-hover-fg: #5f2b4b;
  --app-force-close-bg: #ffe8b5;
  --app-force-close-border: #f2c66d;
  --app-force-close-fg: #6b3f00;
  --app-force-close-hover-bg: #ffdb96;
  --app-force-close-hover-border: #e8b24f;
  --app-force-close-hover-fg: #563100;
  --app-force-close-dark-bg: #6a4c16;
  --app-force-close-dark-border: #85601d;
  --app-force-close-dark-fg: #ffe8b5;
  --app-force-close-dark-hover-bg: #7a5a1b;
  --app-force-close-dark-hover-border: #9a7123;
  --app-force-close-dark-hover-fg: #ffecbf;
  --app-table-action-primary-bg: #d9edf4;
  --app-table-action-primary-border: #afd5e2;
  --app-table-action-primary-fg: #245062;
  --app-table-action-secondary-bg: #e4eaee;
  --app-table-action-secondary-border: #c8d4dc;
  --app-table-action-secondary-fg: #3a5563;
  --app-table-action-danger-bg: #f8dfdb;
  --app-table-action-danger-border: #efc0b8;
  --app-table-action-danger-fg: #7b2f2a;
  --app-table-action-purple-bg: #f1dff2;
  --app-table-action-purple-border: #e0bfe4;
  --app-table-action-purple-fg: #5f3568;
}

[data-bs-theme="dark"] {
  --app-btn-primary-bg: var(--app-dark-accent-bg);
  --app-btn-primary-border: var(--app-dark-accent-border);
  --app-btn-primary-fg: var(--app-dark-accent-fg);
  --app-btn-primary-hover-bg: #285062;
  --app-btn-primary-hover-border: #35657a;
  --app-btn-primary-hover-fg: #eef8fb;
  --app-btn-success-bg: #244834;
  --app-btn-success-border: #2f5d44;
  --app-btn-success-fg: #dbefe2;
  --app-btn-success-hover-bg: #2c5740;
  --app-btn-success-hover-border: #387151;
  --app-btn-success-hover-fg: #edf8f0;
  --app-btn-danger-bg: #583431;
  --app-btn-danger-border: #6a403b;
  --app-btn-danger-fg: #f5e0dc;
  --app-btn-danger-hover-bg: #68403a;
  --app-btn-danger-hover-border: #7b4a43;
  --app-btn-danger-hover-fg: #faece8;
  --app-btn-orange-bg: #5b4932;
  --app-btn-orange-border: #6e583f;
  --app-btn-orange-fg: #f4e7d4;
  --app-btn-orange-hover-bg: #6d5840;
  --app-btn-orange-hover-border: #81694c;
  --app-btn-orange-hover-fg: #fbf3e8;
  --app-btn-pink-bg: #5b3a4f;
  --app-btn-pink-border: #6d4760;
  --app-btn-pink-fg: #f5deea;
  --app-btn-pink-hover-bg: #6c465f;
  --app-btn-pink-hover-border: #82546f;
  --app-btn-pink-hover-fg: #fff2f8;
  --app-force-close-bg: var(--app-force-close-dark-bg);
  --app-force-close-border: var(--app-force-close-dark-border);
  --app-force-close-fg: var(--app-force-close-dark-fg);
  --app-force-close-hover-bg: var(--app-force-close-dark-hover-bg);
  --app-force-close-hover-border: var(--app-force-close-dark-hover-border);
  --app-force-close-hover-fg: var(--app-force-close-dark-hover-fg);
  --app-table-action-primary-bg: var(--app-dark-accent-bg);
  --app-table-action-primary-border: var(--app-dark-accent-border);
  --app-table-action-primary-fg: var(--app-dark-accent-fg);
  --app-table-action-secondary-bg: #2b3f4a;
  --app-table-action-secondary-border: #36505e;
  --app-table-action-secondary-fg: #e1ebf1;
  --app-table-action-danger-bg: #583431;
  --app-table-action-danger-border: #6a403b;
  --app-table-action-danger-fg: #f5e0dc;
  --app-table-action-purple-bg: #51395a;
  --app-table-action-purple-border: #62456e;
  --app-table-action-purple-fg: #efddf4;
}

.page-form-layout .page-form-actions-wrapper {
  position: sticky;
  top: 0.75rem;
  z-index: 95;
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.page-form-layout .page-form-actions {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 0.75rem;
  padding: 0.75rem;
  box-shadow: 0 0.25rem 0.75rem rgba(31, 41, 55, 0.08);
  --bs-gutter-y: 0;
  --bs-gutter-x: 0.5rem;
}

.page-form-layout .page-form-actions.row {
  --bs-gutter-y: 0;
}

.page-form-layout > .row,
.page-form-layout > .page-form-content > .row {
  --bs-gutter-x: 0.5rem;
}

.page-form-layout > .page-form-content {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.page-form-layout .card.card-sm {
  border-radius: 0.75rem;
  overflow: hidden;
}

.page-form-layout .card.card-sm .card-status-start {
  border-radius: 0.75rem 0 0 0.75rem;
}

.btn.btn-primary {
  background-color: var(--app-btn-primary-bg);
  border-color: var(--app-btn-primary-border);
  color: var(--app-btn-primary-fg);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--app-btn-primary-hover-bg);
  border-color: var(--app-btn-primary-hover-border);
  color: var(--app-btn-primary-hover-fg);
}

.btn.btn-success {
  background-color: var(--app-btn-success-bg);
  border-color: var(--app-btn-success-border);
  color: var(--app-btn-success-fg);
}

.btn.btn-success:hover,
.btn.btn-success:focus {
  background-color: var(--app-btn-success-hover-bg);
  border-color: var(--app-btn-success-hover-border);
  color: var(--app-btn-success-hover-fg);
}

.btn.btn-danger {
  background-color: var(--app-btn-danger-bg);
  border-color: var(--app-btn-danger-border);
  color: var(--app-btn-danger-fg);
}

.btn.btn-danger:hover,
.btn.btn-danger:focus {
  background-color: var(--app-btn-danger-hover-bg);
  border-color: var(--app-btn-danger-hover-border);
  color: var(--app-btn-danger-hover-fg);
}

.force-close-action {
  background-color: var(--app-force-close-bg) !important;
  border-color: var(--app-force-close-border) !important;
  color: var(--app-force-close-fg) !important;
}

.force-close-action:hover,
.force-close-action:focus {
  background-color: var(--app-force-close-hover-bg) !important;
  border-color: var(--app-force-close-hover-border) !important;
  color: var(--app-force-close-hover-fg) !important;
}

.btn.btn-outline-orange {
  background-color: var(--app-btn-orange-bg);
  border-color: var(--app-btn-orange-border);
  color: var(--app-btn-orange-fg);
}

.btn.btn-outline-orange:hover,
.btn.btn-outline-orange:focus {
  background-color: var(--app-btn-orange-hover-bg);
  border-color: var(--app-btn-orange-hover-border);
  color: var(--app-btn-orange-hover-fg);
}

.btn.btn-pink {
  background-color: var(--app-btn-pink-bg);
  border-color: var(--app-btn-pink-border);
  color: var(--app-btn-pink-fg);
}

.btn.btn-pink:hover,
.btn.btn-pink:focus {
  background-color: var(--app-btn-pink-hover-bg);
  border-color: var(--app-btn-pink-hover-border);
  color: var(--app-btn-pink-hover-fg);
}

@media (max-width: 1199px) {
  .page-form-layout .page-form-actions-wrapper {
    position: static;
    top: auto;
  }
}

.table .table-action-badge {
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  padding: 0.28rem 0.45rem !important;
}

.table .table-action-badge.table-action-primary {
  background-color: var(--app-table-action-primary-bg) !important;
  border-color: var(--app-table-action-primary-border) !important;
  color: var(--app-table-action-primary-fg) !important;
}

.table .table-action-badge.table-action-secondary {
  background-color: var(--app-table-action-secondary-bg) !important;
  border-color: var(--app-table-action-secondary-border) !important;
  color: var(--app-table-action-secondary-fg) !important;
}

.table .table-action-badge.table-action-danger {
  background-color: var(--app-table-action-danger-bg) !important;
  border-color: var(--app-table-action-danger-border) !important;
  color: var(--app-table-action-danger-fg) !important;
}

.table .table-action-badge.table-action-purple {
  background-color: var(--app-table-action-purple-bg) !important;
  border-color: var(--app-table-action-purple-border) !important;
  color: var(--app-table-action-purple-fg) !important;
}

.table .table-action-badge.table-action-force-close {
  background-color: var(--app-force-close-bg) !important;
  border-color: var(--app-force-close-border) !important;
  color: var(--app-force-close-fg) !important;
}

.table .table-action-badge:hover,
.table .table-action-badge:focus {
  filter: brightness(0.97);
}

.btn-workflow-validate {
  background-color: #3a8fb0;
  border-color: #3a8fb0;
  color: #fff;
}

.btn-workflow-validate:hover,
.btn-workflow-validate:focus,
.btn-workflow-validate:active,
.btn-workflow-validate.active,
.show > .btn-workflow-validate.dropdown-toggle {
  background-color: #327b97;
  border-color: #327b97;
  color: #fff;
}

.btn-outline-workflow-validate {
  color: #3a8fb0;
  border-color: #3a8fb0;
}

.btn-outline-workflow-validate:hover,
.btn-outline-workflow-validate:focus,
.btn-outline-workflow-validate:active,
.btn-outline-workflow-validate.active,
.show > .btn-outline-workflow-validate.dropdown-toggle {
  background-color: #3a8fb0;
  border-color: #3a8fb0;
  color: #fff;
}

[data-bs-theme="dark"] .btn-workflow-validate {
  background-color: var(--app-dark-info);
  border-color: var(--app-dark-info);
  color: #0b2230;
}

[data-bs-theme="dark"] .btn-workflow-validate:hover,
[data-bs-theme="dark"] .btn-workflow-validate:focus,
[data-bs-theme="dark"] .btn-workflow-validate:active,
[data-bs-theme="dark"] .btn-workflow-validate.active,
[data-bs-theme="dark"] .show > .btn-workflow-validate.dropdown-toggle {
  background-color: #7abbd4;
  border-color: #7abbd4;
  color: #0b2230;
}

[data-bs-theme="dark"] .btn-outline-workflow-validate {
  color: #8dc5d9;
  border-color: var(--app-dark-info);
}

[data-bs-theme="dark"] .btn-outline-workflow-validate:hover,
[data-bs-theme="dark"] .btn-outline-workflow-validate:focus,
[data-bs-theme="dark"] .btn-outline-workflow-validate:active,
[data-bs-theme="dark"] .btn-outline-workflow-validate.active,
[data-bs-theme="dark"] .show > .btn-outline-workflow-validate.dropdown-toggle {
  background-color: var(--app-dark-info);
  border-color: var(--app-dark-info);
  color: #0b2230;
}
