/* Shared GitHub-dark-inspired theme for the login and dashboard pages. */

:root,
[data-bs-theme="dark"] {
  color-scheme: dark;
  --gateway-canvas-default: #0d1117;
  --gateway-canvas-subtle: #161b22;
  --gateway-canvas-inset: #010409;
  --gateway-control: #21262d;
  --gateway-control-hover: #30363d;
  --gateway-border: #30363d;
  --gateway-border-muted: #21262d;
  --gateway-fg-default: #e6edf3;
  --gateway-fg-muted: #8b949e;
  --gateway-fg-subtle: #6e7681;
  --gateway-accent: #58a6ff;
  --gateway-accent-emphasis: #1f6feb;
  --gateway-success: #3fb950;
  --gateway-success-emphasis: #238636;
  --gateway-danger: #f85149;
  --gateway-danger-emphasis: #da3633;
  --gateway-warning: #d29922;

  /* Align Bootstrap components with the same semantic color system. */
  --bs-body-color: var(--gateway-fg-default);
  --bs-body-color-rgb: 230, 237, 243;
  --bs-body-bg: var(--gateway-canvas-default);
  --bs-body-bg-rgb: 13, 17, 23;
  --bs-emphasis-color: #f0f6fc;
  --bs-emphasis-color-rgb: 240, 246, 252;
  --bs-secondary-color: var(--gateway-fg-muted);
  --bs-secondary-color-rgb: 139, 148, 158;
  --bs-secondary-bg: var(--gateway-canvas-subtle);
  --bs-secondary-bg-rgb: 22, 27, 34;
  --bs-tertiary-color: var(--gateway-fg-subtle);
  --bs-tertiary-bg: var(--gateway-canvas-inset);
  --bs-tertiary-bg-rgb: 1, 4, 9;
  --bs-primary: var(--gateway-success-emphasis);
  --bs-primary-rgb: 35, 134, 54;
  --bs-success: var(--gateway-success-emphasis);
  --bs-success-rgb: 35, 134, 54;
  --bs-info: var(--gateway-accent-emphasis);
  --bs-info-rgb: 31, 111, 235;
  --bs-warning: var(--gateway-warning);
  --bs-warning-rgb: 210, 153, 34;
  --bs-danger: var(--gateway-danger-emphasis);
  --bs-danger-rgb: 218, 54, 51;
  --bs-link-color: var(--gateway-accent);
  --bs-link-color-rgb: 88, 166, 255;
  --bs-link-hover-color: #79c0ff;
  --bs-link-hover-color-rgb: 121, 192, 255;
  --bs-border-color: var(--gateway-border);
  --bs-border-color-translucent: rgba(48, 54, 61, 0.7);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.5rem;
}

body.bg-body-tertiary {
  min-height: 100vh;
  background: var(--gateway-canvas-default);
  color: var(--gateway-fg-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(31, 111, 235, 0.45);
}

/* GitHub-style bordered surfaces replace the previous translucent glass cards. */
.card {
  background: var(--gateway-canvas-subtle);
  border: 1px solid var(--gateway-border);
  border-radius: 0.5rem;
  box-shadow: none !important;
}

.card h1 {
  color: #f0f6fc;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Tables use quiet separators and a subtle row hover, like repository lists. */
.card .table {
  --bs-table-color: var(--gateway-fg-default);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--gateway-border-muted);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-color: var(--gateway-fg-default);
  --bs-table-hover-bg: rgba(177, 186, 196, 0.06);
}

.card .table > thead th {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gateway-border);
  color: var(--gateway-fg-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.card .table > :not(caption) > * > * {
  border-bottom-color: var(--gateway-border-muted);
}

.card .table > tbody > tr:last-child > * {
  border-bottom-width: 0;
}

/* Controls share GitHub's compact shape and high-contrast focus ring. */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  transition:
    background-color 80ms ease-out,
    border-color 80ms ease-out,
    color 80ms ease-out,
    box-shadow 80ms ease-out;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: var(--gateway-accent);
  box-shadow: 0 0 0 0.2rem rgba(31, 111, 235, 0.3);
}

.btn-primary,
.btn-success {
  color: #fff;
  background: var(--gateway-success-emphasis);
  border-color: rgba(240, 246, 252, 0.1);
  box-shadow: 0 1px 0 rgba(1, 4, 9, 0.4);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus-visible,
.btn-success:active {
  color: #fff;
  background: #2ea043;
  border-color: rgba(240, 246, 252, 0.1);
}

.btn-outline-secondary {
  color: var(--gateway-fg-default);
  background: var(--gateway-control);
  border-color: var(--gateway-border);
  box-shadow: 0 1px 0 rgba(1, 4, 9, 0.35);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active {
  color: #f0f6fc;
  background: var(--gateway-control-hover);
  border-color: #8b949e;
}

.btn-outline-primary,
.btn-outline-info {
  color: var(--gateway-accent);
  border-color: rgba(88, 166, 255, 0.55);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-info:hover,
.btn-outline-info:focus-visible,
.btn-outline-info:active {
  color: #fff;
  background: var(--gateway-accent-emphasis);
  border-color: var(--gateway-accent);
}

.btn-outline-success {
  color: var(--gateway-success);
  border-color: rgba(63, 185, 80, 0.6);
}

.btn-outline-success:hover,
.btn-outline-success:focus-visible,
.btn-outline-success:active {
  color: #fff;
  background: var(--gateway-success-emphasis);
  border-color: var(--gateway-success);
}

.btn-outline-warning {
  color: #e3b341;
  border-color: rgba(210, 153, 34, 0.65);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus-visible,
.btn-outline-warning:active {
  color: var(--gateway-canvas-inset);
  background: var(--gateway-warning);
  border-color: #e3b341;
}

.btn-outline-danger {
  color: var(--gateway-danger);
  border-color: rgba(248, 81, 73, 0.6);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active {
  color: #fff;
  background: var(--gateway-danger-emphasis);
  border-color: var(--gateway-danger);
}

.btn:disabled,
.btn.disabled {
  color: var(--gateway-fg-subtle);
  background-color: rgba(110, 118, 129, 0.1);
  border-color: var(--gateway-border);
  opacity: 0.65;
  box-shadow: none;
}

/* Status badges are softly tinted so they remain readable without dominating. */
.badge {
  border: 1px solid transparent;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.badge.text-bg-secondary {
  color: var(--gateway-fg-muted) !important;
  background: rgba(110, 118, 129, 0.12) !important;
  border-color: rgba(139, 148, 158, 0.35);
}

.badge.text-bg-success {
  color: #56d364 !important;
  background: rgba(35, 134, 54, 0.16) !important;
  border-color: rgba(63, 185, 80, 0.4);
}

.badge.text-bg-warning {
  color: #e3b341 !important;
  background: rgba(187, 128, 9, 0.16) !important;
  border-color: rgba(210, 153, 34, 0.4);
}

.badge.text-bg-danger {
  color: #ff7b72 !important;
  background: rgba(218, 54, 51, 0.16) !important;
  border-color: rgba(248, 81, 73, 0.4);
}

/* Login mark: simple monochrome icon treatment used above GitHub sign-in forms. */
.brand-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  color: #f0f6fc;
  font-size: 2rem;
}

.form-label {
  color: var(--gateway-fg-default);
  font-size: 0.875rem;
  font-weight: 600;
}

.form-control,
.form-select {
  color: var(--gateway-fg-default);
  background-color: var(--gateway-canvas-default);
  border-color: var(--gateway-border);
}

.form-control:hover,
.form-select:hover {
  border-color: #6e7681;
}

.form-control:focus,
.form-select:focus {
  color: var(--gateway-fg-default);
  background-color: var(--gateway-canvas-default);
}

.form-control:disabled,
.form-select:disabled {
  color: var(--gateway-fg-subtle);
  background-color: var(--gateway-canvas-inset);
  border-color: var(--gateway-border-muted);
}

.input-group-text {
  color: var(--gateway-fg-muted);
  background-color: var(--gateway-control);
  border-color: var(--gateway-border);
}

.form-text,
.text-body-secondary {
  color: var(--gateway-fg-muted) !important;
}

.alert {
  color: var(--gateway-fg-default);
  background: var(--gateway-canvas-subtle);
  border-color: var(--gateway-border);
  border-left-width: 0.25rem;
}

.alert-danger {
  border-left-color: var(--gateway-danger);
}

.alert-warning {
  border-left-color: var(--gateway-warning);
}

.spinner-border {
  color: var(--gateway-accent);
}