/* Texas Mail Center brand on top of Bootstrap. Palette from texasmailcenter.com (www/css/styles.css). */
:root {
  --tmc-maroon: #8B1A3A;
  --tmc-maroon-dark: #6B1430;
  --tmc-maroon-light: #A52050;
  --tmc-cream: #FDF8F4;
  --tmc-warm-gray: #F5F0EC;
  --tmc-text: #2D2A26;
  --tmc-text-light: #5A554F;
  --tmc-border: #E5DDD6;
  --tmc-accent: #C4813D;

  --bs-body-bg: var(--tmc-cream);
  --bs-body-color: var(--tmc-text);
  --bs-secondary-color: var(--tmc-text-light);
  --bs-border-color: var(--tmc-border);
  --bs-link-color: var(--tmc-maroon);
  --bs-link-color-rgb: 139, 26, 58;
  --bs-link-hover-color: var(--tmc-maroon-light);
  --bs-link-hover-color-rgb: 165, 32, 80;
  --bs-body-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

.navbar-tmc { background: var(--tmc-maroon); }
.brand-logo { width: min(100%, 300px); height: auto; }

.btn-primary, .btn-clock-in {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tmc-maroon);
  --bs-btn-border-color: var(--tmc-maroon);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tmc-maroon-dark);
  --bs-btn-hover-border-color: var(--tmc-maroon-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tmc-maroon-dark);
  --bs-btn-active-border-color: var(--tmc-maroon-dark);
  --bs-btn-disabled-bg: var(--tmc-maroon);
  --bs-btn-disabled-border-color: var(--tmc-maroon);
  --bs-btn-focus-shadow-rgb: 139, 26, 58;
}

/* Clock Out is deliberately not maroon: the two big buttons must not look alike. */
.btn-clock-out {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tmc-text);
  --bs-btn-border-color: var(--tmc-text);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-focus-shadow-rgb: 45, 42, 38;
}

.btn-outline-primary {
  --bs-btn-color: var(--tmc-maroon);
  --bs-btn-border-color: var(--tmc-maroon);
  --bs-btn-hover-bg: var(--tmc-maroon);
  --bs-btn-hover-border-color: var(--tmc-maroon);
  --bs-btn-active-bg: var(--tmc-maroon);
  --bs-btn-active-border-color: var(--tmc-maroon);
  --bs-btn-focus-shadow-rgb: 139, 26, 58;
}

.btn-group .btn-outline-secondary.active {
  --bs-btn-active-bg: var(--tmc-maroon);
  --bs-btn-active-border-color: var(--tmc-maroon);
}

.form-control:focus, .form-select:focus {
  border-color: var(--tmc-maroon-light);
  box-shadow: 0 0 0 .25rem rgba(139, 26, 58, .2);
}

.card { --bs-card-border-color: var(--tmc-border); --bs-card-cap-bg: var(--tmc-warm-gray); }
.table { --bs-table-bg: #fff; }
.table-light { --bs-table-bg: var(--tmc-warm-gray); }

.status-in { color: var(--tmc-maroon); font-weight: 600; }
.badge.bg-success { background-color: var(--tmc-maroon) !important; }
.badge.bg-info { background-color: var(--tmc-accent) !important; color: #fff !important; }