html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
.tech-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: baseline;
}

.dispatch-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: flex-start;
}

.dispatch-column {
  flex: 0 0 300px;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 0.5rem;
  padding: 0.75rem;
  border-top: 4px solid var(--tech-color, #6c757d);
}

.dispatch-leg {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  padding: 0.15rem 0 0.15rem 0.5rem;
  border-left: 3px solid var(--bs-border-color);
  margin: 0.25rem 0;
}

.dispatch-leg.conflict {
  border-left-color: var(--bs-danger);
  color: var(--bs-danger);
  font-weight: 600;
}

.sms-bubble {
  max-width: 85%;
  padding: 0.4rem 0.65rem;
  border-radius: 0.9rem;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.sms-out {
  background: #0d6efd;
  color: #fff;
  border-bottom-right-radius: 0.2rem;
}

.sms-in {
  background: var(--bs-secondary-bg, #e9ecef);
  border-bottom-left-radius: 0.2rem;
}

.sms-meta {
  font-size: 0.68rem;
  opacity: 0.75;
  margin-top: 0.15rem;
}

.job-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.4rem;
}

.today-tile {
  text-decoration: none;
  color: inherit;
  display: block;
}

.today-tile:hover .card {
  border-color: var(--bs-primary);
}

/* ---- Themes ------------------------------------------------------------------------------
   Light is a soft off-white rather than pure white; dark is a deep slate rather than black.
   Both are easier on the eyes over a long day than Bootstrap's defaults. */
[data-bs-theme="light"] {
  --bs-body-bg: #f6f7f9;
  --bs-body-color: #1f2933;
  --bs-tertiary-bg: #eceff3;
  --bs-border-color: #d9dee5;
  --app-card-bg: #ffffff;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #12161c;
  --bs-body-color: #d7dde5;
  --bs-secondary-color: rgba(215, 221, 229, 0.7);
  --bs-tertiary-bg: #1a2029;
  --bs-border-color: #2c3542;
  --bs-link-color-rgb: 122, 176, 255;
  --bs-link-hover-color-rgb: 160, 200, 255;
  --app-card-bg: #1a2029;
}

.app-navbar { background: #111827; }

.card { --bs-card-bg: var(--app-card-bg); }
.list-group { --bs-list-group-bg: var(--app-card-bg); }
.card-footer.bg-white { background: var(--app-card-bg) !important; }

[data-bs-theme="dark"] .table { --bs-table-bg: transparent; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #1f2630; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .badge.bg-light { background: #2c3542 !important; color: #d7dde5 !important; }
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #d7dde5; --bs-btn-border-color: #55606e; --bs-btn-hover-bg: #2c3542; --bs-btn-hover-border-color: #55606e; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #3b4656; --bs-btn-border-color: #3b4656; }
[data-bs-theme="dark"] .dispatch-column { background: #171c24; }
[data-bs-theme="dark"] .sms-in { background: #2c3542; }

/* Phones: bigger tap targets, and room for the home-indicator bar when installed. */
body { padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 575.98px) {
  .btn { min-height: 2.5rem; }
  .btn-sm { min-height: 2.1rem; }
}

/* ---- Charts (owner dashboard) ---- */
.viz-root {
  --viz-series-1: #2a78d6;
  --viz-grid: #e3e7ec;
  --viz-text: #52514e;
}
[data-bs-theme="dark"] .viz-root {
  --viz-series-1: #3987e5;
  --viz-grid: #2c3542;
  --viz-text: #c3c2b7;
}
.viz-bar { fill: var(--viz-series-1); }
.viz-bar-hit { fill: transparent; }
.viz-bar-hit:hover + .viz-bar, .viz-col:hover .viz-bar { opacity: 0.8; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-label { fill: var(--viz-text); font-size: 11px; }
.viz-value { fill: var(--bs-body-color); font-size: 11px; font-weight: 600; }
.viz-tip {
  position: absolute; pointer-events: none; z-index: 20; display: none;
  background: var(--app-card-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color);
  border-radius: 0.4rem; padding: 0.3rem 0.55rem; font-size: 0.8rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); white-space: nowrap;
}
.meter { height: 0.5rem; border-radius: 0.25rem; background: var(--bs-tertiary-bg); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 0.25rem; background: var(--viz-series-1, #2a78d6); }

.app-navbar .nav-link { white-space: nowrap; }