/* Generated Bootstrap 5 Customizations */
/* Generated on: 2026-08-19 01:46:47 by Scott Waters */

:root {
  /* Userspice */
  --bs-us-menu-custom-bg: #2c333c;
  --bs-us-menu-custom-text: #cfd4da;
  --bs-us-menu-custom-hover-bg: #eeedeb;
  --bs-us-menu-custom-hover-text: #2d3339;
  --bs-us-menu-custom-active-bg: #e8e7e5;
  --bs-us-menu-custom-active-text: #2d3339;
  --bs-us-menu-custom-divider: rgba(45, 51, 57, 0.1);
  --bs-us-menu-custom-submenu-border: rgba(255, 255, 255, 0.10);

  /* Colors_primary */
  --bs-primary: #4a5568;
  --bs-primary-hover: #3d4657;
  --bs-primary-text-emphasis: #2d3748;
  --bs-primary-bg-subtle: #edf0f4;
  --bs-primary-border-subtle: #d5dae2;

  /* Colors_secondary */
  --bs-secondary: #8896a4;
  --bs-secondary-hover: #758494;
  --bs-secondary-text-emphasis: #5a6570;
  --bs-secondary-bg-subtle: #f0f2f4;
  --bs-secondary-border-subtle: #d8dce0;

  /* Colors_success */
  --bs-success: #5d8a68;
  --bs-success-hover: #4e7558;
  --bs-success-text-emphasis: #3d5c45;
  --bs-success-bg-subtle: #eef4ef;
  --bs-success-border-subtle: #c8d9cc;

  /* Colors_info */
  --bs-info: #6b8fa3;
  --bs-info-hover: #5a7d91;
  --bs-info-text-emphasis: #486778;
  --bs-info-bg-subtle: #eef3f6;
  --bs-info-border-subtle: #c8d8e0;

  /* Colors_warning */
  --bs-warning: #b07d4f;
  --bs-warning-hover: #9a6d44;
  --bs-warning-text-emphasis: #7a5635;
  --bs-warning-bg-subtle: #f8f2eb;
  --bs-warning-border-subtle: #e4d4c2;

  /* Colors_danger */
  --bs-danger: #9b5b5b;
  --bs-danger-hover: #874e4e;
  --bs-danger-text-emphasis: #6d3e3e;
  --bs-danger-bg-subtle: #f6efef;
  --bs-danger-border-subtle: #dfc9c9;

  /* Colors_light_dark */
  --bs-light: #f5f4f2;
  --bs-light-hover: #e8e7e5;
  --bs-light-text-emphasis: #636261;
  --bs-light-bg-subtle: #fafaf9;
  --bs-light-border-subtle: #f0efed;
  --bs-dark: #2d3339;
  --bs-dark-hover: #1f2429;
  --bs-dark-text-emphasis: #141719;
  --bs-dark-bg-subtle: #d5d7d9;
  --bs-dark-border-subtle: #bec1c3;

  /* Colors_general */
  --bs-body-color: #2d3339;
  --bs-body-bg: #f8f7f6;
  --bs-border-color: #e2e0dd;
  --bs-form-control-bg: #ffffff;

  /* Typography */
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-font-size-base: 0.9375rem;
  --bs-font-weight-normal: 400;
  --bs-font-weight-bold: 600;
  --bs-line-height-base: 1.6;
  --bs-headings-font-family: "Inter", var(--bs-font-sans-serif);
  --bs-headings-font-weight: 600;
  --bs-headings-line-height: 1.25;
  --bs-headings-color: #1e2328;
  --bs-h1-font-size: 1.75rem;
  --bs-h2-font-size: 1.5rem;
  --bs-h3-font-size: 1.25rem;
  --bs-h4-font-size: 1.125rem;
  --bs-h5-font-size: 1rem;
  --bs-h6-font-size: 0.875rem;

  /* Components */
  --bs-border-radius: 0.3rem;
  --bs-border-radius-sm: 0.2rem;
  --bs-border-radius-lg: 0.4rem;
  --bs-border-radius-xl: 0.6rem;
  --bs-border-radius-2xl: 0.8rem;
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --bs-box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Cards */
  --bs-card-border-radius: 0.3rem;
  --bs-card-border-color: #e2e0dd;
  --bs-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --bs-card-cap-bg: #f5f4f2;

  /* Forms */
  --bs-input-bg: #ffffff;
  --bs-input-color: #2d3339;
  --bs-input-border-color: #d5d3d0;
  --bs-input-focus-border-color: #8896a4;
  --bs-input-focus-box-shadow: 0 0 0 2px rgba(74, 85, 104, 0.12);
  --bs-input-focus-bg: #ffffff;
  --bs-input-focus-color: #2d3339;

  /* Navbars */
  --bs-navbar-light-color: rgba(45, 51, 57, 0.65);
  --bs-navbar-light-hover-color: rgba(45, 51, 57, 0.85);
  --bs-navbar-dark-color: rgba(245, 244, 242, 0.65);
  --bs-navbar-dark-hover-color: rgba(245, 244, 242, 0.90);

  --bs-primary-rgb: 74, 85, 104;
  --bs-secondary-rgb: 136, 150, 164;
  --bs-success-rgb: 93, 138, 104;
  --bs-info-rgb: 107, 143, 163;
  --bs-warning-rgb: 176, 125, 79;
  --bs-danger-rgb: 155, 91, 91;
  --bs-light-rgb: 245, 244, 242;
  --bs-dark-rgb: 45, 51, 57;
}

ul.us_menu.custom, ul.us_menu.custom .us_sub-menu li, ul.us_menu.custom ul.us_sub-menu {
  background-color: var(--bs-us-menu-custom-bg, #3a5e8c);
}

ul.us_menu.custom a, ul.us_menu.custom .us_menu_mobile_control {
  color: var(--bs-us-menu-custom-text, rgba(255, 255, 255, 0.85));
}

ul.us_menu.custom li:hover {
  background-color: var(--bs-us-menu-custom-hover-bg, #4a6e9c);
}

ul.us_menu.custom li:hover > a {
  background-color: var(--bs-us-menu-custom-hover-bg, #4a6e9c);
  color: var(--bs-us-menu-custom-hover-text, #ffffff);
}

ul.us_menu.custom li.active-style > a {
  background-color: var(--bs-us-menu-custom-active-bg, #264e7c);
  color: var(--bs-us-menu-custom-active-text, #ffffff);
}

ul.us_menu.custom .dropdown-divider {
  border-color: var(--bs-us-menu-custom-divider, rgba(255, 255, 255, 0.2));
}

ul.us_menu.custom .us_sub-menu {
  border-color: var(--bs-us-menu-custom-submenu-border, #2d5580);
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.border-primary {
  border-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

.bg-success {
  background-color: var(--bs-success) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.border-success {
  border-color: var(--bs-success) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
}

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

.border-info {
  border-color: var(--bs-info) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
}

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

.border-warning {
  border-color: var(--bs-warning) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}

.border-danger {
  border-color: var(--bs-danger) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.text-light {
  color: var(--bs-light) !important;
}

.border-light {
  border-color: var(--bs-light) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

.text-dark {
  color: var(--bs-dark) !important;
}

.border-dark {
  border-color: var(--bs-dark) !important;
}

body {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-font-size-base, 1rem);
  font-weight: var(--bs-font-weight-normal, 400);
  line-height: var(--bs-line-height-base, 1.5);
}

.form-control, .form-select, input.form-control, select.form-select, textarea.form-control {
  background-color: var(--bs-form-control-bg, var(--bs-body-bg)) !important;
}

.form-check-input:not(:checked) {
  background-color: var(--bs-input-bg, var(--bs-body-bg)) !important;
}

code, pre, kbd, .font-monospace {
  font-family: var(--bs-font-monospace);
}

strong, b, .fw-bold {
  font-weight: var(--bs-font-weight-bold, 700);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-headings-font-family, var(--bs-font-sans-serif));
  font-weight: var(--bs-headings-font-weight, 500);
  line-height: var(--bs-headings-line-height, 1.2);
  color: var(--bs-headings-color, var(--bs-body-color));
}

h1, .h1 {
  font-size: var(--bs-h1-font-size, calc(1.375rem + 1.5vw));
}

h2, .h2 {
  font-size: var(--bs-h2-font-size, calc(1.325rem + 0.9vw));
}

h3, .h3 {
  font-size: var(--bs-h3-font-size, calc(1.3rem + 0.6vw));
}

h4, .h4 {
  font-size: var(--bs-h4-font-size, calc(1.275rem + 0.3vw));
}

h5, .h5 {
  font-size: var(--bs-h5-font-size, 1.25rem);
}

h6, .h6 {
  font-size: var(--bs-h6-font-size, 1rem);
}

.card {
  border-radius: var(--bs-card-border-radius);
  border-color: var(--bs-card-border-color);
  box-shadow: var(--bs-card-box-shadow);
}

.card-header {
  background-color: var(--bs-card-cap-bg);
}

.form-control, .form-select {
  background-color: var(--bs-input-bg, var(--bs-body-bg)) !important;
}

.form-control {
  color: var(--bs-input-color, var(--bs-body-color));
}

.form-control, .form-select, .form-check-input {
  border-color: var(--bs-input-border-color, var(--bs-border-color));
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--bs-input-focus-border-color);
  box-shadow: var(--bs-input-focus-box-shadow);
}

.form-control:focus, .form-select:focus, .form-check-input:focus:not(:checked) {
  background-color: var(--bs-input-focus-bg, var(--bs-form-control-bg)) !important;
}

.form-check-input:checked:focus {
  background-color: var(--bs-primary) !important;
}

.form-control:focus {
  color: var(--bs-input-focus-color, var(--bs-body-color));
}

.navbar-light .navbar-nav .nav-link {
  color: var(--bs-navbar-light-color);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--bs-navbar-light-hover-color);
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--bs-navbar-dark-color);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--bs-navbar-dark-hover-color);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-hover-border-color: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-active-border-color: var(--bs-primary-hover, var(--bs-primary));
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary-hover, var(--bs-secondary));
  --bs-btn-hover-border-color: var(--bs-secondary-hover, var(--bs-secondary));
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary-hover, var(--bs-secondary));
  --bs-btn-active-border-color: var(--bs-secondary-hover, var(--bs-secondary));
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-success-hover, var(--bs-success));
  --bs-btn-hover-border-color: var(--bs-success-hover, var(--bs-success));
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-success-hover, var(--bs-success));
  --bs-btn-active-border-color: var(--bs-success-hover, var(--bs-success));
}

.btn-info {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-info-hover, var(--bs-info));
  --bs-btn-hover-border-color: var(--bs-info-hover, var(--bs-info));
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-info-hover, var(--bs-info));
  --bs-btn-active-border-color: var(--bs-info-hover, var(--bs-info));
}

.btn-warning {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-warning-hover, var(--bs-warning));
  --bs-btn-hover-border-color: var(--bs-warning-hover, var(--bs-warning));
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-warning-hover, var(--bs-warning));
  --bs-btn-active-border-color: var(--bs-warning-hover, var(--bs-warning));
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger-hover, var(--bs-danger));
  --bs-btn-hover-border-color: var(--bs-danger-hover, var(--bs-danger));
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-danger-hover, var(--bs-danger));
  --bs-btn-active-border-color: var(--bs-danger-hover, var(--bs-danger));
}

.btn-light {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-light-hover, #d3d4d5);
  --bs-btn-hover-border-color: var(--bs-light-hover, var(--bs-light));
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-light-hover, var(--bs-light));
  --bs-btn-active-border-color: var(--bs-light-hover, var(--bs-light));
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-dark-hover, var(--bs-dark));
  --bs-btn-hover-border-color: var(--bs-dark-hover, var(--bs-dark));
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-dark-hover, var(--bs-dark));
  --bs-btn-active-border-color: var(--bs-dark-hover, var(--bs-dark));
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-hover-border-color: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-active-border-color: var(--bs-primary-hover, var(--bs-primary));
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary-hover, var(--bs-secondary));
  --bs-btn-hover-border-color: var(--bs-secondary-hover, var(--bs-secondary));
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary-hover, var(--bs-secondary));
  --bs-btn-active-border-color: var(--bs-secondary-hover, var(--bs-secondary));
}

.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-success-hover, var(--bs-success));
  --bs-btn-hover-border-color: var(--bs-success-hover, var(--bs-success));
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-success-hover, var(--bs-success));
  --bs-btn-active-border-color: var(--bs-success-hover, var(--bs-success));
}

.btn-outline-info {
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-info-hover, var(--bs-info));
  --bs-btn-hover-border-color: var(--bs-info-hover, var(--bs-info));
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-info-hover, var(--bs-info));
  --bs-btn-active-border-color: var(--bs-info-hover, var(--bs-info));
}

.btn-outline-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-warning-hover, var(--bs-warning));
  --bs-btn-hover-border-color: var(--bs-warning-hover, var(--bs-warning));
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-warning-hover, var(--bs-warning));
  --bs-btn-active-border-color: var(--bs-warning-hover, var(--bs-warning));
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger-hover, var(--bs-danger));
  --bs-btn-hover-border-color: var(--bs-danger-hover, var(--bs-danger));
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-danger-hover, var(--bs-danger));
  --bs-btn-active-border-color: var(--bs-danger-hover, var(--bs-danger));
}

.btn-outline-light {
  --bs-btn-color: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-light-hover, var(--bs-light));
  --bs-btn-hover-border-color: var(--bs-light-hover, var(--bs-light));
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-light-hover, var(--bs-light));
  --bs-btn-active-border-color: var(--bs-light-hover, var(--bs-light));
}

.btn-outline-dark {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-dark-hover, var(--bs-dark));
  --bs-btn-hover-border-color: var(--bs-dark-hover, var(--bs-dark));
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-dark-hover, var(--bs-dark));
  --bs-btn-active-border-color: var(--bs-dark-hover, var(--bs-dark));
}

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis, var(--bs-primary));
  --bs-alert-bg: var(--bs-primary-bg-subtle, rgba(var(--bs-primary-rgb), 0.1));
  --bs-alert-border-color: var(--bs-primary-border-subtle, rgba(var(--bs-primary-rgb), 0.2));
  --bs-alert-link-color: var(--bs-primary-text-emphasis, var(--bs-primary));
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis, var(--bs-secondary));
  --bs-alert-bg: var(--bs-secondary-bg-subtle, rgba(var(--bs-secondary-rgb), 0.1));
  --bs-alert-border-color: var(--bs-secondary-border-subtle, rgba(var(--bs-secondary-rgb), 0.2));
  --bs-alert-link-color: var(--bs-secondary-text-emphasis, var(--bs-secondary));
}

.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis, var(--bs-success));
  --bs-alert-bg: var(--bs-success-bg-subtle, rgba(var(--bs-success-rgb), 0.1));
  --bs-alert-border-color: var(--bs-success-border-subtle, rgba(var(--bs-success-rgb), 0.2));
  --bs-alert-link-color: var(--bs-success-text-emphasis, var(--bs-success));
}

.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis, var(--bs-info));
  --bs-alert-bg: var(--bs-info-bg-subtle, rgba(var(--bs-info-rgb), 0.1));
  --bs-alert-border-color: var(--bs-info-border-subtle, rgba(var(--bs-info-rgb), 0.2));
  --bs-alert-link-color: var(--bs-info-text-emphasis, var(--bs-info));
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis, var(--bs-warning));
  --bs-alert-bg: var(--bs-warning-bg-subtle, rgba(var(--bs-warning-rgb), 0.1));
  --bs-alert-border-color: var(--bs-warning-border-subtle, rgba(var(--bs-warning-rgb), 0.2));
  --bs-alert-link-color: var(--bs-warning-text-emphasis, var(--bs-warning));
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis, var(--bs-danger));
  --bs-alert-bg: var(--bs-danger-bg-subtle, rgba(var(--bs-danger-rgb), 0.1));
  --bs-alert-border-color: var(--bs-danger-border-subtle, rgba(var(--bs-danger-rgb), 0.2));
  --bs-alert-link-color: var(--bs-danger-text-emphasis, var(--bs-danger));
}

.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis, var(--bs-light));
  --bs-alert-bg: var(--bs-light-bg-subtle, rgba(var(--bs-light-rgb), 0.1));
  --bs-alert-border-color: var(--bs-light-border-subtle, rgba(var(--bs-light-rgb), 0.2));
  --bs-alert-link-color: var(--bs-light-text-emphasis, var(--bs-light));
}

.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis, var(--bs-dark));
  --bs-alert-bg: var(--bs-dark-bg-subtle, rgba(var(--bs-dark-rgb), 0.1));
  --bs-alert-border-color: var(--bs-dark-border-subtle, rgba(var(--bs-dark-rgb), 0.2));
  --bs-alert-link-color: var(--bs-dark-text-emphasis, var(--bs-dark));
}

.badge.bg-primary {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.badge.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
}

.badge.bg-success {
  background-color: var(--bs-success) !important;
  color: #fff !important;
}

.badge.bg-info {
  background-color: var(--bs-info) !important;
  color: var(--bs-dark) !important;
}

.badge.bg-warning {
  background-color: var(--bs-warning) !important;
  color: var(--bs-dark) !important;
}

.badge.bg-danger {
  background-color: var(--bs-danger) !important;
  color: #fff !important;
}

.badge.bg-light {
  background-color: var(--bs-light) !important;
  color: var(--bs-dark) !important;
}

.badge.bg-dark {
  background-color: var(--bs-dark) !important;
  color: #fff !important;
}

.list-group-item-primary {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.list-group-item-secondary {
  color: var(--bs-secondary);
  background-color: rgba(var(--bs-secondary-rgb), 0.1);
}

.list-group-item-success {
  color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.1);
}

.list-group-item-info {
  color: var(--bs-info);
  background-color: rgba(var(--bs-info-rgb), 0.1);
}

.list-group-item-warning {
  color: var(--bs-warning);
  background-color: rgba(var(--bs-warning-rgb), 0.1);
}

.list-group-item-danger {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.1);
}

.list-group-item-light {
  color: var(--bs-light);
  background-color: rgba(var(--bs-light-rgb), 0.1);
}

.list-group-item-dark {
  color: var(--bs-dark);
  background-color: rgba(var(--bs-dark-rgb), 0.1);
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
  color: var(--bs-secondary);
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
}

.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
  color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.2);
}

.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
  color: var(--bs-info);
  background-color: rgba(var(--bs-info-rgb), 0.2);
}

.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
  color: var(--bs-warning);
  background-color: rgba(var(--bs-warning-rgb), 0.2);
}

.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.2);
}

.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
  color: var(--bs-light);
  background-color: rgba(var(--bs-light-rgb), 0.2);
}

.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
  color: var(--bs-dark);
  background-color: rgba(var(--bs-dark-rgb), 0.2);
}

.bg-primary-subtle {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.bg-secondary-subtle {
  background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
}

.bg-success-subtle {
  background-color: rgba(var(--bs-success-rgb), 0.1) !important;
}

.bg-info-subtle {
  background-color: rgba(var(--bs-info-rgb), 0.1) !important;
}

.bg-warning-subtle {
  background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
}

.bg-danger-subtle {
  background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
}

.bg-light-subtle {
  background-color: rgba(var(--bs-light-rgb), 0.1) !important;
}

.bg-dark-subtle {
  background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
}

.bg-primary.card, .card.border-primary .card-header {
  background-color: var(--bs-primary) !important;
  color: #fff;
}

.bg-secondary.card, .card.border-secondary .card-header {
  background-color: var(--bs-secondary) !important;
  color: #fff;
}

.bg-success.card, .card.border-success .card-header {
  background-color: var(--bs-success) !important;
  color: #fff;
}

.bg-info.card, .card.border-info .card-header {
  background-color: var(--bs-info) !important;
  color: var(--bs-dark);
}

.bg-warning.card, .card.border-warning .card-header {
  background-color: var(--bs-warning) !important;
  color: var(--bs-dark);
}

.bg-danger.card, .card.border-danger .card-header {
  background-color: var(--bs-danger) !important;
  color: #fff;
}

.bg-light.card, .card.border-light .card-header {
  background-color: var(--bs-light) !important;
  color: var(--bs-dark);
}

.bg-dark.card, .card.border-dark .card-header {
  background-color: var(--bs-dark) !important;
  color: #fff;
}

.navbar.bg-primary {
  background-color: var(--bs-primary) !important;
  color: #fff;
}

.navbar.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff;
}

.navbar.bg-success {
  background-color: var(--bs-success) !important;
  color: #fff;
}

.navbar.bg-info {
  background-color: var(--bs-info) !important;
  color: var(--bs-dark);
}

.navbar.bg-warning {
  background-color: var(--bs-warning) !important;
  color: var(--bs-dark);
}

.navbar.bg-danger {
  background-color: var(--bs-danger) !important;
  color: #fff;
}

.navbar.bg-light {
  background-color: var(--bs-light) !important;
  color: var(--bs-dark);
}

.navbar.bg-dark {
  background-color: var(--bs-dark) !important;
  color: #fff;
}


/* Custom CSS */
/* ============================================
   PREMIUM ENTERPRISE DESIGN SYSTEM
   Professional internal business platform
   ============================================ */

/* --- Font Loading --- */
/* Inter is loaded via <link> in usersc/templates/customizer/header.php.
   It cannot live here: processor.php appends custom_css to the end of the
   generated stylesheet, and an @import after other rules is invalid CSS. */

/* --- Base & Layout --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

/* --- Links --- */
a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--bs-primary-hover, #3d4657);
  text-decoration: none;
}

/* --- Headings --- */
h1, .h1, h2, .h2, h3, .h3 {
  letter-spacing: -0.02em;
}
h4, .h4, h5, .h5, h6, .h6 {
  letter-spacing: -0.01em;
}
h6, .h6 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #8896a4;
}

/* --- Cards & Panels --- */
.card {
  border: 1px solid var(--bs-border-color);
  transition: box-shadow 0.15s ease;
}
.card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.card-header {
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: 0.875rem 1.25rem;
}
.card-body {
  padding: 1.25rem;
}
.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--bs-border-color);
  padding: 0.875rem 1.25rem;
}

/* --- Buttons --- */
.btn {
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: 0.5rem 1rem;
  border-radius: var(--bs-border-radius);
  transition: all 0.15s ease;
  box-shadow: none !important;
}
.btn:active {
  transform: translateY(0);
}
.btn-sm {
  font-size: 0.8125rem;
  padding: 0.3rem 0.75rem;
}
.btn-lg {
  font-size: 0.9375rem;
  padding: 0.625rem 1.25rem;
}
.btn-link {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 500;
}
.btn-link:hover {
  color: var(--bs-primary-hover, #3d4657);
}

/* Outline button refinements */
.btn-outline-primary { border-color: #b8bfc8; color: var(--bs-primary); }
.btn-outline-primary:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.btn-outline-secondary { border-color: #c8cdd2; color: var(--bs-secondary); }
.btn-outline-secondary:hover { background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.btn-outline-light { border-color: var(--bs-border-color); color: var(--bs-body-color); }
.btn-outline-light:hover { background-color: var(--bs-light); border-color: var(--bs-border-color); color: var(--bs-body-color); }

/* --- Tables --- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  font-size: 0.875rem;
  margin-bottom: 0;
}
.table > thead > tr > th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8896a4;
  border-bottom: 2px solid var(--bs-border-color);
  padding: 0.75rem 1rem;
  white-space: nowrap;
  background-color: transparent;
}
.table > tbody > tr > td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eeedeb;
  vertical-align: middle;
}
.table > tbody > tr:last-child > td {
  border-bottom: none;
}
.table-hover > tbody > tr:hover {
  --bs-table-hover-bg: rgba(74, 85, 104, 0.03);
}

/* Striped tables — very subtle */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: rgba(45, 51, 57, 0.015);
}

/* DataTables integration */
.dataTables_wrapper {
  font-size: 0.875rem;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.8125rem;
  color: #8896a4;
  padding: 0.75rem 0;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #d5d3d0;
  border-radius: var(--bs-border-radius);
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--bs-secondary);
  box-shadow: 0 0 0 2px rgba(74, 85, 104, 0.12);
  outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--bs-border-radius) !important;
  border: 1px solid transparent !important;
  padding: 0.3rem 0.65rem !important;
  margin: 0 2px !important;
  font-size: 0.8125rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bs-light) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  opacity: 0.3;
}
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
  opacity: 0.7;
}

/* --- Forms --- */
.form-label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: #5a6570;
  margin-bottom: 0.375rem;
  letter-spacing: 0.01em;
}
.form-control,
.form-select {
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
  border-color: #d5d3d0;
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color: var(--bs-body-color);
}
.form-control::placeholder {
  color: #b0aead;
  font-weight: 400;
}
.form-control:focus,
.form-select:focus {
  border-color: #8896a4;
  box-shadow: 0 0 0 2px rgba(74, 85, 104, 0.12);
}
.form-text {
  font-size: 0.75rem;
  color: #a0a0a0;
}
.input-group-text {
  background-color: #f5f4f2;
  border-color: #d5d3d0;
  color: #8896a4;
  font-size: 0.875rem;
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* --- Badges & Status Indicators --- */
.badge {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  padding: 0.35em 0.65em;
  border-radius: 0.2rem;
}

/* Subtle badge variants */
.badge.bg-primary { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; }
.badge.bg-secondary { background-color: var(--bs-secondary-bg-subtle) !important; color: var(--bs-secondary-text-emphasis) !important; }
.badge.bg-success { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.badge.bg-info { background-color: var(--bs-info-bg-subtle) !important; color: var(--bs-info-text-emphasis) !important; }
.badge.bg-warning { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.badge.bg-danger { background-color: var(--bs-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; }
.badge.bg-light { background-color: #eeedeb !important; color: #5a6570 !important; }
.badge.bg-dark { background-color: #2d3339 !important; color: #f5f4f2 !important; }

/* Solid badge option - add .badge-solid class */
.badge.badge-solid.bg-primary { background-color: var(--bs-primary) !important; color: #fff !important; }
.badge.badge-solid.bg-secondary { background-color: var(--bs-secondary) !important; color: #fff !important; }
.badge.badge-solid.bg-success { background-color: var(--bs-success) !important; color: #fff !important; }
.badge.badge-solid.bg-info { background-color: var(--bs-info) !important; color: #fff !important; }
.badge.badge-solid.bg-warning { background-color: var(--bs-warning) !important; color: #fff !important; }
.badge.badge-solid.bg-danger { background-color: var(--bs-danger) !important; color: #fff !important; }

/* Status dot indicator */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.status-dot.active { background-color: var(--bs-success); }
.status-dot.inactive { background-color: #c8c6c4; }
.status-dot.pending { background-color: var(--bs-warning); }
.status-dot.error { background-color: var(--bs-danger); }

/* --- Alerts --- */
.alert {
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  padding: 0.875rem 1.25rem;
  border-width: 1px;
}

/* --- Modals --- */
.modal-content {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.modal-header {
  border-bottom: 1px solid var(--bs-border-color);
  padding: 1.25rem 1.5rem;
}
.modal-title {
  font-size: 1.0625rem;
  font-weight: 600;
}
.modal-body {
  padding: 1.5rem;
}
.modal-footer {
  border-top: 1px solid var(--bs-border-color);
  padding: 1rem 1.5rem;
}
.modal-backdrop {
  background-color: rgba(30, 35, 40, 0.5);
}

/* --- Dropdowns --- */
.dropdown-menu {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0.375rem;
  font-size: 0.875rem;
}
.dropdown-item {
  border-radius: 0.2rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  transition: background-color 0.1s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-light);
  color: var(--bs-body-color);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary);
  color: #fff;
}
.dropdown-divider {
  border-color: var(--bs-border-color);
  margin: 0.25rem 0;
}
.dropdown-header {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8896a4;
  padding: 0.5rem 0.875rem 0.25rem;
}

/* --- Tabs & Nav --- */
.nav-tabs {
  border-bottom: 2px solid var(--bs-border-color);
}
.nav-tabs .nav-link {
  font-weight: 500;
  font-size: 0.875rem;
  color: #8896a4;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.625rem 1rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs .nav-link:hover {
  color: var(--bs-body-color);
  border-color: transparent;
  background-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--bs-primary);
}
.nav-pills .nav-link {
  font-weight: 500;
  font-size: 0.875rem;
  color: #5a6570;
  border-radius: var(--bs-border-radius);
  padding: 0.5rem 1rem;
}
.nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* --- Breadcrumbs --- */
.breadcrumb {
  font-size: 0.8125rem;
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
}
.breadcrumb-item a {
  color: #8896a4;
}
.breadcrumb-item.active {
  color: var(--bs-body-color);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #c8c6c4;
}

/* --- Pagination --- */
.pagination {
  gap: 0.25rem;
}
.page-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.375rem 0.75rem;
  transition: all 0.15s ease;
}
.page-link:hover {
  background-color: var(--bs-light);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.page-item.disabled .page-link {
  color: #c8c6c4;
  background-color: transparent;
}

/* --- Tooltips & Popovers --- */
.tooltip-inner {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--bs-border-radius-sm);
  background-color: #2d3339;
}
.popover {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Progress Bars --- */
.progress {
  height: 6px;
  border-radius: 3px;
  background-color: #eeedeb;
}
.progress-bar {
  border-radius: 3px;
}

/* --- List Groups --- */
.list-group-item {
  border-color: var(--bs-border-color);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
}
.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* --- Accordion --- */
.accordion-button {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--bs-body-color);
  background-color: transparent;
  padding: 1rem 1.25rem;
}
.accordion-button:not(.collapsed) {
  color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: none;
  border-color: var(--bs-border-color);
}
.accordion-item {
  border-color: var(--bs-border-color);
}

/* ============================================================
   REALM global navigation bar.
   Bar #2c333c (--realm-btn), 3px #c1642c (--realm-accent) rule at
   the viewport top. The nav is NOT inside .realm-page, so house
   values are literals here by design.

   Shared-token contract: -hover-bg / -hover-text / -active-bg /
   -active-text / -divider are read as generic surface tokens by
   ~19 application pages. Their VALUES stay put; the nav neutralises
   them with higher-specificity .custom.horizontal rules below.
   Do not "simplify" this by repointing the variables.
   ============================================================ */

ul.us_menu.custom.horizontal {
  border-top: 3px solid #c1642c;
  border-bottom: none;
  font-weight: 500;
  letter-spacing: 0;
}

/* Desktop geometry. MUST stay inside this media query, or it
   overrides the menu.css mobile padding and wrecks the overlay. */
@media (min-width: 1360px) {
  ul.us_menu.custom.horizontal {
    box-sizing: border-box;
    min-height: 63px;
    padding: 0 28px;
    align-items: stretch;
    flex-wrap: nowrap;
    font-size: 15.5px;
    column-gap: 0;
  }
  ul.us_menu.custom.horizontal > .us_brand.full_screen {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 0;
    line-height: 1;
  }
  /* li must be a flex container or the <a> only grows to content height
     and sits at the top of the stretched li (menu.css sets li display:block).
     Making it stretch also drops the active underline to the bar bottom edge. */
  ul.us_menu.custom.horizontal > li {
    display: flex;
    align-items: stretch;
  }
  ul.us_menu.custom.horizontal > li > a {
    display: flex;
    align-items: center;
    padding: 0 10px;
    line-height: 1;
    color: #cfd4da;
  }
  ul.us_menu.custom.horizontal > .dropdown-divider { display: none; }

  /* Group dividers. Driven by us_menu_items.li_class = "nav-group-start" on the
     first item of each group, NOT by nth-child - the menu is permission
     filtered, so item positions differ per user and any positional selector
     would land dividers mid-group for some people.

     Drawn as a short centred pseudo-element inside the padding that already
     exists between labels, so it costs 1px rather than the ~20px a margin
     would. A plain border-left would run the full 63px bar height and read as
     a much heavier stroke than this bar wants. */
  ul.us_menu.custom.horizontal > li.nav-group-start { position: relative; }
  ul.us_menu.custom.horizontal > li.nav-group-start::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .16);
  }
}

/* Compressed tier: fits 1366 and 1440. */
@media (min-width: 1360px) and (max-width: 1559.98px) {
  ul.us_menu.custom.horizontal { font-size: 14px; padding: 0 20px; }
  ul.us_menu.custom.horizontal > li > a { padding: 0 8px; }
  ul.us_menu.custom.horizontal .caret { margin-left: 3px; }
  ul.us_menu.custom.horizontal .us_brand .us-wordmark,
  ul.us_menu.custom.horizontal .us_brand a { font-size: 20px; }
}

/* Wordmark */
ul.us_menu.custom.horizontal .us_brand .us-wordmark,
ul.us_menu.custom.horizontal .us_brand a {
  font-size: 26px;
  font-weight: 200;
  letter-spacing: .16em;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
ul.us_menu.custom.horizontal .us_brand img { display: none; }
/* Fallback that self-deactivates once the brand_html write lands */
ul.us_menu.custom.horizontal .us_brand:not(:has(.us-wordmark))::after {
  content: "REALM";
  font-size: 26px;
  font-weight: 200;
  letter-spacing: .16em;
  color: #ffffff;
  line-height: 1;
}

/* Icons off, ONLY where a visible label exists.
   Markup is <a><i/><span.labelText>Label</span><span.caret/></a>.
   Menu item id 76 (the cog) renders an empty labelText with no
   whitespace, so :empty matches and its icon survives. The mobile
   hamburger sits in .us_menu_mobile_control, outside li > a. The
   "> li >" chain leaves submenu icons alone. */
ul.us_menu.custom.horizontal > li > a:not(:has(> span.labelText:empty)) > i { display: none; }
ul.us_menu.custom.horizontal > li > a > i { margin-right: 0; }
ul.us_menu.custom.horizontal .caret { margin-left: 4px; opacity: .65; }

/* Hover / active WITHOUT touching the shared tokens */
ul.us_menu.custom.horizontal > li:hover,
ul.us_menu.custom.horizontal > li:hover > a,
ul.us_menu.custom.horizontal > li.open > a { background-color: transparent; }

ul.us_menu.custom.horizontal > li:hover > a,
ul.us_menu.custom.horizontal > li.open > a,
ul.us_menu.custom.horizontal > li > a:focus-visible { color: #ffffff; }



/* Item indicator. Lives on the <li>, NOT the <a>, so it spans the whole
   item box - including icon-only items like the settings cog, whose <a>
   is only as wide as its glyph. The Frequently Used snippet emits the
   same <li class="dropdown"> markup as Menu.php, so it matches too.
   Shown while pointing at an item, while its dropdown is open, and on
   the current page. Desktop only - mobile uses a left border instead. */
@media (min-width: 1360px) {
  ul.us_menu.custom.horizontal > li:hover,
  ul.us_menu.custom.horizontal > li.open,
  ul.us_menu.custom.horizontal > li.realm-current,
  ul.us_menu.custom.horizontal > li.realm-current-parent {
    box-shadow: inset 0 -2px 0 0 #c1642c;
  }
  /* .realm-current / -parent are set by the marker script in
     usersc/includes/footer.php. NOT Menu.php .active, which matches on the
     final path segment only and flags up to 21 items at once. */
  ul.us_menu.custom.horizontal > li.realm-current > a,
  ul.us_menu.custom.horizontal > li.realm-current-parent > a { color: #ffffff; }
}

/* Dropdown panels */
ul.us_menu.custom.horizontal .us_sub-menu {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  border-color: rgba(255, 255, 255, .10);
  padding: 4px 0;
}
ul.us_menu.custom.horizontal .us_sub-menu li > a {
  padding: .5rem 1rem;
  font-size: 14px;
  color: #cfd4da;
}
ul.us_menu.custom.horizontal .us_sub-menu li:hover,
ul.us_menu.custom.horizontal .us_sub-menu li:hover > a {
  background-color: rgba(255, 255, 255, .07);
  color: #ffffff;
}
/* No current-page highlight in submenus. Menu.php marks active with
   basename(REQUEST_URI) == last path segment of the link; on the dashboard
   both sides evaluate to an empty string, so all 21 trailing-slash links get
   class="active" at once. Until that matching is fixed the class cannot drive
   styling. Hover and open state below are reliable and do the job. */
ul.us_menu.custom.horizontal .us_sub-menu li.realm-current > a {
  background-color: rgba(255, 255, 255, .10);
  color: #ffffff;
}
ul.us_menu.custom.horizontal .dropdown-divider { border-top-color: rgba(255, 255, 255, .12); }

/* Mobile corrections for a dark bar */
@media (max-width: 1359.98px) {
  /* menu.css uses --bs-us-menu-custom-active-text here: invisible on dark */

  ul.us_menu.custom.horizontal > li:hover > a,
  ul.us_menu.custom.horizontal > li.realm-current > a,
  ul.us_menu.custom.horizontal > li.realm-current-parent > a {
    background-color: rgba(255, 255, 255, .06);
    color: #ffffff;
    box-shadow: none;
  }
  ul.us_menu.custom.horizontal > li.realm-current,
  ul.us_menu.custom.horizontal > li.realm-current-parent { border-left-color: #c1642c; }
  ul.us_menu.custom .us_menu_mobile_control { color: #ffffff; }
}

/* --- Dashboard Utilities --- */

/* Page header */
.page-header {
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Stat cards */
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bs-body-color);
  letter-spacing: -0.02em;
}
.stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8896a4;
  margin-top: 0.25rem;
}

/* Data label/value pairs */
.data-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8896a4;
  margin-bottom: 0.125rem;
}
.data-value {
  font-size: 0.9375rem;
  color: var(--bs-body-color);
  font-weight: 500;
}

/* Detail row pattern */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid #eeedeb;
}
.detail-row:last-child {
  border-bottom: none;
}

/* Section dividers */
.section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8896a4;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Toolbar / filter bar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  flex-wrap: wrap;
}
.toolbar .form-control,
.toolbar .form-select {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
}

/* --- Scrollbar Styling (Webkit) --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d5d3d0;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b0aead;
}

/* --- Transitions --- */
.card,
.btn,
.form-control,
.form-select,
.nav-link,
.list-group-item,
.dropdown-item,
.page-link,
.accordion-button {
  transition: all 0.15s ease;
}

/* --- Focus Ring --- */
*:focus-visible {
  outline: 2px solid rgba(74, 85, 104, 0.3);
  outline-offset: 2px;
}

/* --- Print Styles --- */
@media print {
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  .btn { box-shadow: none; }
}


/* ===== Compact Action Buttons (Project Detail Page) ===== */
/* Reduce default button size - was 120px wide x 48px tall */
.desktop-action-buttons {
  margin-top: 0.25rem !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center;
}

.desktop-action-buttons .desktop-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 4px 12px !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
  gap: 5px !important;
  flex-direction: row !important;
  white-space: nowrap !important;
}

.desktop-action-buttons .desktop-btn i {
  font-size: 0.85rem !important;
}

.desktop-action-buttons .desktop-btn span {
  font-size: 0.8rem !important;
}

/* Medium screens: shrink label text slightly */
@media (max-width: 1100px) {
  .desktop-action-buttons .desktop-btn {
    height: 30px !important;
    padding: 3px 8px !important;
  }
  .desktop-action-buttons .desktop-btn span {
    font-size: 0.72rem !important;
  }
}

/* Small screens: icon-only (title attribute shows as native tooltip) */
@media (max-width: 850px) {
  .desktop-action-buttons {
    gap: 4px !important;
  }
  .desktop-action-buttons .desktop-btn {
    height: 34px !important;
    width: 38px !important;
    padding: 4px 6px !important;
  }
  .desktop-action-buttons .desktop-btn span {
    display: none !important;
  }
  .desktop-action-buttons .desktop-btn i {
    font-size: 1rem !important;
    margin: 0 !important;
  }
}