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;
}

/* Global field borders: Metronic's *-solid variants ship transparent borders, making fields look see-through. Applies site-wide to current and future pages. */
.form-control,
.form-select,
.form-control-solid,
.form-select-solid,
.form-check-input {
  border: 1px solid var(--bs-gray-300, #d9d9d9) !important;
}

.form-control:focus,
.form-select:focus,
.form-control-solid:focus,
.form-select-solid:focus {
  border-color: #258cfb !important;
}

/* Canonical KPI tile treatment — applies site-wide to current and future pages.
   Previously duplicated inconsistently per-page (Home had border+shadow+hover+accent
   bar; Compliance had border only, same class name, different rules since each was a
   page-scoped <style> block) and several KPI strips (Vessel, Principal Vessels) had no
   polish at all, just a bare `card h-100`. One definition now; every KPI strip in the
   app gets the same look without copy-pasting a <style> block into each view.
   .kpi-accent (optional child, e.g. <div class="kpi-accent bg-primary">) adds the top
   color bar; .kpi-alert (optional modifier) swaps the border to danger, for a tile that
   needs to read as an alert state (e.g. an expired-count tile). */
.kpi-tile {
  border: 1px solid var(--bs-gray-200);
  transition: box-shadow .15s ease, transform .15s ease;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
}
.kpi-tile:hover {
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
.kpi-tile.kpi-alert {
  border-color: var(--bs-danger);
}
.kpi-tile .kpi-accent {
  height: 4px;
  border-radius: 6px 6px 0 0;
}

[data-bs-theme="dark"] .kpi-tile {
  border-color: var(--bs-gray-300);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}