/* Shared design tokens and browser-level defaults. */
:root {
  --sa-radius: 0.4rem;
  --sa-control-height: 42px;

  --sa-space-1: 0.25rem;
  --sa-space-2: 0.5rem;
  --sa-space-3: 0.75rem;
  --sa-space-4: 1rem;
  --sa-space-5: 1.25rem;
  --sa-space-6: 1.5rem;
  --sa-space-8: 2rem;

  --sa-surface-color: var(--tblr-card-bg, #fff);
  --sa-surface-secondary: var(--tblr-bg-surface-secondary, #f8fafc);
  --sa-border-color: var(--tblr-border-color, #e5e7eb);
  --sa-text-color: var(--tblr-body-color, #1f2937);
  --sa-muted-color: var(--tblr-secondary, #6b7280);

  --sa-status-new: #4f8ff0;
  --sa-status-published: #2fbf71;
  --sa-status-disabled: #f59f00;
  --sa-status-disabled-text: #1f2937;
  --sa-status-stored: #0ea5e9;
  --sa-status-removed: #ef4444;
  --sa-status-on-color: #fff;

  --sa-brand-surface: #1f2937;
  --sa-code-surface: #1e293b;
  --sa-code-text: #e2e8f0;
  --sa-code-danger-surface: #3b1010;
  --sa-code-danger-text: #ffc1c1;
  --sa-diff-new-surface: #ecfdf5;
  --sa-diff-new-border: #bbf7d0;
}

.card,
.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.modal-content {
  border-radius: var(--sa-radius);
}

.card > .card-header:first-child {
  border-radius: var(--sa-radius) var(--sa-radius) 0 0;
}

.card > .card-footer:last-child {
  border-radius: 0 0 var(--sa-radius) var(--sa-radius);
}

.card > .card-img-top:first-child {
  border-top-left-radius: var(--sa-radius);
  border-top-right-radius: var(--sa-radius);
}

.card > .card-img-bottom:last-child {
  border-bottom-right-radius: var(--sa-radius);
  border-bottom-left-radius: var(--sa-radius);
}

.form-control,
.form-select,
.input-group-text {
  min-height: var(--sa-control-height);
}

.input-group-text {
  display: flex;
  align-items: center;
}

/* Keep scrollbars quiet and consistent with the active Tabler theme. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sa-border-color) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--sa-border-color);
  border-radius: var(--sa-radius);
}

*::-webkit-scrollbar-button {
  display: none;
}