html {
  font-size: 14px;
}

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

/* Flatly theme tweaks. Flatly's own link colour (#18bc9c teal) is too light
   to read comfortably on white, so links use a darker shade of the same teal. */
:root {
  --bs-link-color: #128f76;
  --bs-link-color-rgb: 18, 143, 118;
  --bs-link-hover-color: #0d6b58;
  --bs-link-hover-color-rgb: 13, 107, 88;
}

/* Navbar links stay white in every state (Flatly turns them teal on hover,
   focus and when a dropdown is open). The menu for the page you're on is
   marked "active" in _Layout.cshtml and shown underlined instead. */
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link:focus,
nav.navbar .navbar-nav .nav-link.show,
nav.navbar .navbar-nav .show > .nav-link,
nav.navbar .navbar-nav .nav-link.active {
  color: #ffffff;
}

nav.navbar .navbar-nav .nav-link.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.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 rgba(24, 188, 156, 0.5);
}

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

/* Alternating row backgrounds on ManageAccounts and AccountSummary - these
   two are plain read-mostly lists where a striped background helps track a
   row across the row's width. Both pages can hide some rows (ManageAccounts'
   name/keyword filter, AccountSummary's "Hide $0 balance" filter), so
   neither can rely on nth-child alone - a hidden row would still count
   toward the alternation and throw off which of the visible rows look
   striped - so both pages toggle this class via JS instead, based on each
   row's position among only the currently-visible rows. These rules come
   before the hover rule below so hover (same selector specificity) still
   wins on the row the mouse is over. */
#accountsList > .account-row.row-stripe,
#subUsersList > .subuser-row.row-stripe,
#summaryRows > .summary-row.row-stripe {
  background-color: rgba(0, 0, 0, .035);
}

/* Flag a negative balance on AccountSummary in yellow - comes after the
   striping rule above (same selector specificity, later in source) so it
   wins over the plain stripe background on odd rows, and before the hover
   rule below so hovering still takes priority over both. */
/* The "Offset balance" account stands out in light green wherever balances
   are listed (see AccountHighlights). Placed before the negative-balance rules
   so a negative Offset balance still shows the yellow warning. */
#summaryRows > .summary-row.offset-balance,
.card-body .balance-line.offset-balance {
  background-color: #d1e7dd;
  font-weight: 600;
}

#summaryRows > .summary-row.negative-balance {
  background-color: #fff3cd;
}

/* The same yellow flag for negative totals on the My Offset cards (the offset
   account total and any highlighted category under it). The small padding,
   offset by an equal negative margin, gives the shading some room without
   shifting the text out of line with the rest of the card. */
.card-body .balance-line {
  margin: 0 -0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

.card-body .balance-line.negative-balance {
  background-color: #fff3cd;
}

/* Highlight a row on hover, to ease picking one out, for the div-based
   "table" grids used across MyOffset pages (real <table> elements get the
   same treatment via Bootstrap's own table-hover class instead - see
   UploadTransactions). Matches Bootstrap's own hover color so both look
   consistent. */
.item-rows > .row:hover,
#accountsList > .account-row:hover,
#subUsersList > .subuser-row:hover,
#summaryRows > .summary-row:hover {
  background-color: rgba(0, 0, 0, .075);
}