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

/* Crew / Vessel Certificate pages: plain Bootstrap tables, plus frozen No / Name columns and cell colours.
   Bootstrap 5.1 cells read their background from --bs-table-bg, so the colours set that variable. */
/* Everything centred except the crew / vessel name. */
.cert-table th,
.cert-table td {
  white-space: nowrap;
  text-align: center;
}

.cert-table .cert-sticky-name {
  text-align: left;
}

/* Frozen cells need a solid background, or the scrolled columns show through. */
.cert-sticky-no,
.cert-sticky-name {
  position: sticky;
  z-index: 1;
  --bs-table-bg: var(--bs-body-bg);
}

.cert-sticky-no {
  left: 0;
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}

/* Collapsed table borders don't stay with frozen cells, so draw the edge after Name. */
.cert-table .cert-sticky-name {
  left: 3rem;
  box-shadow: inset -1px 0 0 #dee2e6, inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.cert-empty {
  --bs-table-bg: #808080;
  background-color: #808080;
}

.cert-permanent {
  --bs-table-bg: #ffd6e7;
  background-color: #ffd6e7;
}

.cert-expiring {
  --bs-table-bg: #ffd8a8;
  background-color: #ffd8a8;
}

.cert-expired,
.cert-nil {
  --bs-table-bg: #dc3545;
  background-color: #dc3545;
  color: #fff;
}

.cert-legend span {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-right: 0.25rem;
  border: 1px solid #dee2e6;
}

/* Crew Attendance grid */
.att-table {
  width: auto;
  user-select: none;
}

.att-table:focus {
  outline: none;
}

.att-table th,
.att-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.att-table .att-day {
  min-width: 3.25rem;
  position: relative;
  cursor: cell;
}

/* Frozen No / Rank / Name, with a solid background so scrolled days don't show through. */
.att-sticky-no,
.att-sticky-rank,
.att-sticky-name {
  position: sticky;
  z-index: 2;
  --bs-table-bg: var(--bs-body-bg);
}

.att-sticky-no {
  left: 0;
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}

.att-sticky-rank {
  left: 3rem;
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-table .att-sticky-name {
  left: 11rem;
  text-align: left;
  box-shadow: inset -1px 0 0 #dee2e6, inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.att-today {
  --bs-table-bg: #fff3cd;
}

/* Days and status count columns coloured by their attendance status (--att-color / --att-text set per cell). */
.att-table .att-colored {
  --bs-table-bg: var(--att-color);
  color: var(--att-text);
}

.att-table .att-day.att-selected,
.att-selected {
  --bs-table-bg: #cfe2ff;
  color: #212529;
}


.att-active {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

.att-saving {
  color: #6c757d;
}

.att-table .att-day.att-error {
  --bs-table-bg: #f8b4b4;
}

.att-editor {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 2px solid #0d6efd;
  padding: 0 0.25rem;
  text-align: center;
  font: inherit;
  outline: none;
}

.att-editor.is-invalid {
  border-color: #dc3545;
}

.att-suggestions {
  position: absolute;
  display: block;
  max-height: 18rem;
  overflow-y: auto;
  z-index: 1060;
}

/* Crew Pay sheet: frozen No / Name, wrapped headers, borderless inputs until focused. */
.pay-table {
  width: auto;
}

.pay-table th {
  min-width: 5rem;
  text-align: center;
  vertical-align: bottom;
}

.pay-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.pay-table td.pay-amount {
  text-align: right;
}

.pay-sticky-no,
.pay-sticky-name {
  position: sticky;
  z-index: 1;
  --bs-table-bg: var(--bs-body-bg);
}

.pay-sticky-no {
  left: 0;
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}

.pay-table .pay-sticky-name {
  left: 3rem;
  text-align: left;
  box-shadow: inset -1px 0 0 #dee2e6, inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.pay-input {
  width: 6rem;
  padding: 0 0.25rem;
  border: 1px solid transparent;
  background: transparent;
  text-align: right;
  font: inherit;
  color: inherit;
}

/* Calculated value shown in a blank typed cell (SDL). */
.pay-input::placeholder {
  color: #6c757d;
  opacity: 1;
}

.pay-input:hover {
  border-color: #ced4da;
}

.pay-input:focus {
  border-color: #0d6efd;
  background: #fff;
  outline: none;
}

.pay-input.pay-remark {
  width: 14rem;
  text-align: left;
}

.pay-saving {
  color: #6c757d;
}

.pay-table > tbody > tr.pay-error > * {
  --bs-table-bg: #f8b4b4;
}

/* Striped rows (Bootstrap tints each cell with an inset shadow of --bs-table-accent-bg):
   coloured, selected and error cells keep their exact colour. */
.cert-empty,
.cert-permanent,
.cert-expiring,
.cert-expired,
.cert-nil,
.att-table .att-colored,
.att-selected,
.att-table .att-day.att-error {
  --bs-table-accent-bg: transparent;
}

/* Certificate and attendance tables: outline the whole row under the mouse.
   Drawn as inset shadows on each cell so the frozen columns keep the outline too;
   the last shadow keeps the row stripe, which Bootstrap also draws as a shadow. */
.cert-table > tbody > tr:hover > *,
.att-table > tbody > tr:hover > *,
.pay-table > tbody > tr:hover > * {
  box-shadow: inset 0 2px 0 #0d6efd, inset 0 -2px 0 #0d6efd, inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.cert-table > tbody > tr:hover > :first-child,
.att-table > tbody > tr:hover > :first-child,
.pay-table > tbody > tr:hover > :first-child {
  box-shadow: inset 2px 0 0 #0d6efd, inset 0 2px 0 #0d6efd, inset 0 -2px 0 #0d6efd, inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.cert-table > tbody > tr:hover > :last-child,
.att-table > tbody > tr:hover > :last-child,
.pay-table > tbody > tr:hover > :last-child {
  box-shadow: inset -2px 0 0 #0d6efd, inset 0 2px 0 #0d6efd, inset 0 -2px 0 #0d6efd, inset 0 0 0 9999px var(--bs-table-accent-bg);
}

/* Keep the divider after the frozen Name column while hovered. */
.cert-table > tbody > tr:hover > .cert-sticky-name,
.att-table > tbody > tr:hover > .att-sticky-name,
.pay-table > tbody > tr:hover > .pay-sticky-name {
  box-shadow: inset -1px 0 0 #dee2e6, inset 0 2px 0 #0d6efd, inset 0 -2px 0 #0d6efd, inset 0 0 0 9999px var(--bs-table-accent-bg);
}

/* Smaller text on the wide certificate, attendance and pay tables. */
.cert-table,
.att-table,
.pay-table {
  font-size: 0.8rem;
}