:root {
  --ssl-primary: #0d6efd;
  --ssl-primary-hover: #0b5ed7;
  --ssl-primary-soft: #e7f1ff;
  --ssl-secondary: #6c757d;
  --ssl-secondary-hover: #5c636a;
  --ssl-surface: #ffffff;
  --ssl-body-bg: #f8f9fa;
  --ssl-body-text: #212529;
  --ssl-border: #dee2e6;
  --ssl-focus-ring: rgba(13, 110, 253, 0.25);
  --ssl-danger: #dc3545;
  --ssl-danger-soft: #f8d7da;
}

body {
  color: var(--ssl-body-text);
  background-color: var(--ssl-body-bg);
}

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

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

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

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

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

.btn-primary {
  background-color: var(--ssl-primary);
  border-color: var(--ssl-primary);
}

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

.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--ssl-focus-ring);
}

.btn-outline-primary {
  color: var(--ssl-primary);
  border-color: var(--ssl-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: var(--ssl-primary);
  border-color: var(--ssl-primary);
}

.btn-secondary {
  background-color: var(--ssl-secondary);
  border-color: var(--ssl-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--ssl-secondary-hover);
  border-color: var(--ssl-secondary-hover);
}

.btn-outline-secondary {
  color: var(--ssl-secondary);
  border-color: var(--ssl-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: #fff;
  background-color: var(--ssl-secondary);
  border-color: var(--ssl-secondary);
}

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

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

.table-light {
  background-color: var(--ssl-primary-soft) !important;
}

.link-primary {
  color: var(--ssl-primary);
}

.link-primary:hover,
.link-primary:focus {
  color: var(--ssl-primary-hover);
}

.alert-danger,
.error {
  background-color: var(--ssl-danger-soft);
  color: var(--ssl-danger);
}

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

.line-items-table {
  table-layout: fixed;
}

.line-items-table th,
.line-items-table td {
  vertical-align: middle;
}

.line-items-table .item-column {
  width: 50%;
}

.line-items-table .numeric-column {
  width: 8%;
  text-align: right;
  white-space: nowrap;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.line-items-table .total-column {
  width: 9%;
}

.line-items-table .supplier-column {
  width: 5%;
}

.line-items-table .editable-cell {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.line-items-table .item-name {
  display: block;
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: normal;
}

.line-items-table .line-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.1;
  color: var(--ssl-secondary);
}

.line-items-table .line-item-meta-link,
.line-items-table .line-item-meta .badge {
  font-size: 0.7rem;
}

.line-items-table .line-item-meta-link {
  color: var(--ssl-secondary);
  text-decoration: none;
}

.line-items-table .line-item-meta-link:hover,
.line-items-table .line-item-meta-link:focus {
  color: var(--ssl-secondary-hover);
  text-decoration: underline;
}