/*
 * NOTE:
 * Since I use background-image sprite trick, the only way to scale any image
 * is via the `transform: scale` style. This DOES NOT affect the CSS box layout.
 * Therefore, you must assign the `margin` for the node to specifically deal with
 * scaling in order to prevent extra margins, or not enough margins.
 *
 * Use the formula: ((H * sH) - H) / 2 for height and width.
 */

.main.container {
  padding-top: 3em;
  padding-bottom: 3em;
}

span.catchtime-hour {
  /* no special style */
}
span.catchtime-minute {
  /* font-variant-position: super; */
  vertical-align: super;
  font-size: x-small;
}

.sprite-icon {
  display: inline-block;
}

.weather-icon.sprite-icon {
  transform-origin: center;
  transform: scale(0.675);
  margin: -5.85px; /* weather-icon sprites are 36x36 */
}

.bait-icon.sprite-icon {
  position: relative;
  z-index: 2;
  transform-origin: center;
  transform: scale(0.75);
  margin: -5.5px; /* bait-icon sprites are 44x44 */
}

.bait-icon.sprite-icon.hookset-modifier-icon {
  vertical-align: top;
  position: relative;
  z-index: 1;
  transform-origin: center;
  transform: scale(0.50) translate(-33.3%, -50%);
  margin: -11px; /* hookset-modifier-icon sprites are 44x44 */
}

tr.fish-intuition-row .bait-icon.sprite-icon.hookset-modifier-icon {
  transform-origin: center;
  transform: scale(0.375) translate(-33.3%, -25%);
  margin: -13.75px;
}

/* Prevent hookset modifier from being separated. */
span.bait-span {
  white-space: nowrap;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 3px;
  display: inline-block;
}

/*
 * This container sets the relative positioning for the badges displayed next to the fish.
 * Remember, because the bait icons are "sprite" images, they technically have no content,
 * and therefore place the next position in the very center of the icon.
 */
.bait-badge-container {
  display: inline-block;
  position: relative;
  min-width: 0.75em;
  height: 1em;
}

.bait-badge-container .bait-icon.sprite-icon.hookset-modifier-icon {
  position: absolute;
}

.bait-badge-container .tug-indicator {
  position: absolute;
  display: inline-block;
  transform: translate(-40%, 80%);

  padding: 0.5em 0.3em 0.5em 0.5em;
  line-height: 1em;
  text-align: center;
  font-size: 0.64285714rem;
  border-top-left-radius: 250rem;
  border-top-right-radius: 75rem;
  border-bottom-right-radius: 125rem;
  vertical-align: bottom;
  width: 2.5em; /* this seems to line up nicely with hooksets */
  font-weight: bolder;

  color: black;
}

.tug-indicator.light-tug-indicator {
  background-color: dodgerblue;
}

.tug-indicator.medium-tug-indicator {
  background-color: darkseagreen;
}

.tug-indicator.heavy-tug-indicator {
  background-color: orangered;
}

tr.fish-intuition-row .fish-icon.sprite-icon,
tr.fish-intuition-row .bait-icon.sprite-icon {
  transform-origin: center;
  transform: scale(0.675);
  margin: -7.15px;
}

tr.fish-intuition-row .weather-icon.sprite-icon {
  transform-origin: center;
  transform: scale(0.50);
  margin: -9px;
}

img {
  vertical-align: middle;
}

.floatThead-container-fishes {
  background-color: white;
}

.intuition-count {
  vertical-align: middle;
  display: inline-grid;
  font-size: larger;
}

.fish-predator {
  float: left;
}

#theme-toggle .toggle {
  cursor: pointer;
}

body:not(.dark) #theme-toggle .light-mode-toggle,
body.dark #theme-toggle .dark-mode-toggle
{
  display: none;
}

/* Hide the actual text when dropdown is not active */
#languageChoice.dropdown > .text span.text {
  display: none;
}

/* In order to force the menu to display leftward, we have to trick UI */
#languageChoice.dropdown > .loading.left.menu {
  margin-left: 100rem; /* force to load leftward */
  left: 0px !important;
  right: auto !important;
  display: block;
}

#languageChoice.dropdown > .left.menu {
  display: none; /* because this is inside a .ui.menu, we have to fix this... */
}
#languageChoice.dropdown > .visible.left.menu {
  display: block;
}
#languageChoice.dropdown .mini.menu {
  font-size: 0.78571429rem;
}

.center.menu {
  flex-grow: 1;
  justify-content: center;
}

#fish-eyes-button.link.item {
  /* Remove vertical padding. */
  padding-top: unset;
  padding-bottom: unset;
}

#fish-eyes-button.link.item .sprite-icon-status-fish_eyes,
body.dark #fish-eyes-button.link.item .sprite-icon-status-fish_eyes {
  filter: saturate(0);
}
#fish-eyes-button.link.item:hover .sprite-icon-status-fish_eyes,
body.dark #fish-eyes-button.link.item:hover .sprite-icon-status-fish_eyes {
  filter: saturate(1);
}

#fish-eyes-button.link.item.active {
  background-color: rgb(0 0 0 / 10%) !important;
  border-radius: 50%;
}
#fish-eyes-button.link.item.active .sprite-icon-status-fish_eyes,
#fish-eyes-button.link.item.active:hover .sprite-icon-status-fish_eyes {
  filter: drop-shadow(0px 0px 6px blue);
}
body.dark #fish-eyes-button.link.item.active {
  background-color: rgb(255 255 255 / 10%) !important;
}
body.dark #fish-eyes-button.link.item.active .sprite-icon-status-fish_eyes,
body.dark #fish-eyes-button.link.item.active:hover .sprite-icon-status-fish_eyes {
  filter: drop-shadow(0px 0px 6px gold);
}

.upcoming-windows-button:hover {
  cursor: pointer;
}

.upcoming-windows-grid {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-row-gap: 0.2rem;
  grid-column-gap: 1rem;
}

.upcoming-windows-grid .header {
  border-bottom: thin black solid;
}
.inverted .upcoming-windows-grid .header {
  border-bottom: thin white solid;
}

.location-button:hover {
  cursor: pointer;
}

#fishingSpotMapModal {
  /* We need a little more control over the horizontal positioning please. */
  margin-left: auto;
  width: auto;
  left: calc(50% - 256px);
}
#fishingSpotMapModal .map-container {
  width: 512px;
  height: 512px;
  overflow: scroll;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none; /* Firefox */
  cursor: grab;
  /* Override built-in settings for this */
  padding: 0px;
  background-color: transparent;
  /* In order to properly support zooming, this must use "relative" position. */
  position: relative;
}
#fishingSpotMapModal .map-container canvas {
  /*
   * In order to properly support zooming, the canvas uses "absolute" position.
   * See https://stackoverflow.com/a/21305283 for an explaination why, but the
   * basic problem is, by applying CSS transformations, it does not alter the
   * actual layout size, and thus, when zooming out, the scroll size would remain
   * the initial map size. But when the combination of relative/absolute is used,
   * the transformation's effects are reflected in the scroll size, and we don't
   * have to worry about scrolling off the map.
   */
   position: absolute;
}

#fishingSpotMapModal .map-container::-webkit-scrollbar {
  display: none;
}
#fishingSpotMapModal .map-container.dragging {
  cursor: grabbing;
}
#fishingSpotMapModal .map-container.loading {
  cursor: progress;
}


#fishes thead tr th {
  position: sticky;
  top: 40px; /* This needs to sync with the top menu */
  z-index: 3;
  border-radius: unset;
  background-color: hsla(0, 0%, 100%, 1) !important; /* This should match the page background */
}

body.dark #fishes thead tr th {
  background-color: hsla(0, 0%, 15%, 1) !important; /* This should match the page background */
}

#fishes.fish-eyes-enabled tr.fish-entry.fish-active.fish-unlimited td.fish-availability > span {
  /* Blur the /text/ in the availablity cell when fish eyes is enabled. */
  filter: blur(2px);
  pointer-events: none;
}

/*
 * These rules match the Intuition status requirement when a duration is present.
 * CSS4 would allow us to use :has(> span) instead... but it's not ready yet :(
 */
tr.fish-entry .sprite-icon-status-intuition.has-duration {
  margin-top: -6px;
  /* Sometimes, we need some extra room... */
  margin-left: 6px;
  margin-right: 6px;
}

tr.fish-entry .sprite-icon-status-intuition.has-duration > span {
  display: inline-block;
  position: relative;
  top: 26px;
  width: 40px; /* 28 + 12 (to allow for longer text) */
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  margin-left: -6px;
  margin-right: -6px;
}

tr.fish-entry.fish-intuition-row .sprite-icon-status-intuition.has-duration {
  margin-left: 24px;
  margin-top: auto;
  margin-right: auto;
  /* Use flexbox to control vertical alignment */
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-direction: row;
  flex-direction: row;
}

tr.fish-entry.fish-intuition-row .sprite-icon-status-intuition.has-duration > span {
  position: unset;
  left: auto;
  top: auto;
  width: 24px;
  text-align: right;
  white-space: normal;
  line-height: 14px;
  margin-left: -24px;
  margin-right: auto;
}

/* Active, non-caught, non-pinned fish */
.ui.striped.table > tr.fish-entry.fish-active:hover:not(.fish-caught):not(.fish-pinned),
.ui.striped.table tbody tr.fish-entry.fish-active:hover:not(.fish-caught):not(.fish-pinned) {
  background-color: hsla(180, 60%, 89%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active:hover:nth-child(2n):not(.fish-caught):not(.fish-pinned),
.ui.striped.table tbody tr.fish-entry.fish-active:hover:nth-child(2n):not(.fish-caught):not(.fish-pinned) {
  background-color: hsla(180, 100%, 89%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active:not(.fish-caught):not(.fish-pinned),
.ui.striped.table tbody tr.fish-entry.fish-active:not(.fish-caught):not(.fish-pinned) {
  background-color: hsla(180, 60%, 94%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active:nth-child(2n):not(.fish-caught):not(.fish-pinned),
.ui.striped.table tbody tr.fish-entry.fish-active:nth-child(2n):not(.fish-caught):not(.fish-pinned) {
  background-color: hsla(180, 100%, 94%, 0.8) !important;
}

/* Active, already caught fish */
.ui.striped.table > tr.fish-entry.fish-active.fish-caught:hover,
.ui.striped.table tbody tr.fish-entry.fish-active.fish-caught:hover {
  background-color: hsla(150, 60%, 75%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active.fish-caught:hover:nth-child(2n),
.ui.striped.table tbody tr.fish-entry.fish-active.fish-caught:hover:nth-child(2n) {
  background-color: hsla(150, 100%, 75%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active.fish-caught,
.ui.striped.table tbody tr.fish-entry.fish-active.fish-caught {
  background-color: hsla(150, 60%, 80%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active.fish-caught:nth-child(2n),
.ui.striped.table tbody tr.fish-entry.fish-active.fish-caught:nth-child(2n) {
  background-color: hsla(150, 100%, 80%, 0.8) !important;
}

/* Non-active, caught fish */
.ui.striped.table > tr.fish-entry.fish-caught:hover,
.ui.striped.table tbody tr.fish-entry.fish-caught:hover {
  background-color: hsla(120, 60%, 75%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-caught:hover:nth-child(2n),
.ui.striped.table tbody tr.fish-entry.fish-caught:hover:nth-child(2n) {
  background-color: hsla(120, 100%, 75%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-caught,
.ui.striped.table tbody tr.fish-entry.fish-caught {
  background-color: hsla(120, 60%, 80%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-caught:nth-child(2n),
.ui.striped.table tbody tr.fish-entry.fish-caught:nth-child(2n) {
  background-color: hsla(120, 100%, 80%, 0.8) !important;
}

/* Active, pinned fish */
.ui.striped.table > tr.fish-entry.fish-active.fish-pinned:hover,
.ui.striped.table tbody tr.fish-entry.fish-active.fish-pinned:hover {
  background-color: hsla(350, 60%, 83%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active.fish-pinned:hover:nth-child(2n),
.ui.striped.table tbody tr.fish-entry.fish-active.fish-pinned:hover:nth-child(2n) {
  background-color: hsla(350, 100%, 83%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active.fish-pinned,
.ui.striped.table tbody tr.fish-entry.fish-active.fish-pinned {
  background-color: hsla(350, 60%, 88%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry.fish-active.fish-pinned:nth-child(2n),
.ui.striped.table tbody tr.fish-entry.fish-active.fish-pinned:nth-child(2n) {
  background-color: hsla(350, 100%, 88%, 0.8) !important;
}

/* Generic fish entry */
.ui.striped.table > tr.fish-entry:hover,
.ui.striped.table tbody tr.fish-entry:hover {
  background-color: hsla(50, 65%, 90%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry:hover:nth-child(2n),
.ui.striped.table tbody tr.fish-entry:hover:nth-child(2n) {
  background-color: hsla(50, 65%, 95%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry,
.ui.striped.table tbody tr.fish-entry {
  background-color: hsla(0, 0%, 95%, 0.8) !important;
}
.ui.striped.table > tr.fish-entry:nth-child(2n),
.ui.striped.table tbody tr.fish-entry:nth-child(2n) {
  background-color: hsla(0, 0%, 100%, 0.8) !important;
}

/* Section Divider */
.ui.striped.table > tr.section-divider:hover:not(.fish-entry),
.ui.striped.table tbody tr.section-divider:hover:not(.fish-entry),
.ui.striped.table > tr.section-divider:not(.fish-entry),
.ui.striped.table tbody tr.section-divider:not(.fish-entry) {
  background-color: hsl(0, 0%, 80%) !important;
}

/* Entry after the last pinned fish entry */
.ui.table .fish-entry.entry-after-last-pinned-entry > td {
  border-top: 2px solid red !important;
}

/* Entry after the last currently available fish entry */
.ui.table .fish-entry.entry-after-last-active-entry > td {
  border-top: 2px solid blue !important;
}

/* Entry after the last fish that's soon to come available */
.ui.table .fish-entry.entry-after-last-upsoon-entry > td {
  border-top: 2px solid black !important;
}

/*
 * Fish Guide style rules
 * NOTE: All rules MUST be bounded to .fish-guide to prevent matching against
 * other UI elements. `.fish-entry` in particular is re-used here.
 */

.fish-guide {
  display: grid;
  row-gap: 1em;
  column-gap: 2em;
  grid-template-areas: "page-selector fish-info"
                       "fish-grid-out fish-info";
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
}
/* Handle mobile devices in portrait orientation. */
@media (max-width: 600px) {
  .fish-guide {
    grid-template-areas: "page-selector"
                         "fish-grid-out"
                         "fish-info";
    grid-template-rows: min-content min-content minmax(min-content, 200px);
  }
}
.fish-guide .page-selector {
  grid-area: page-selector;
  justify-self: center;
  align-content: flex-start;
}
.fish-guide .tiny.menu .page-number.item {
  /* This attempts to keep the item widths uniform */
  min-width: 3.5em;
}
.fish-guide .fish-grid-out {
  grid-area: fish-grid-out;
  align-content: flex-start;
  padding-bottom: 1em;
}
.fish-guide .fish-grid {
  justify-content: center;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(5, max-content);
}
.fish-guide .fish-entry {
  height: 60px;
  width: 60px;
  position: relative;
}
.fish-guide .fish-entry:not(.disabled),
.fish-guide .fish-entry:not(.disabled) .ui.left.corner.label .icon {
  cursor: pointer;
}
.fish-guide .fish-entry.selected {
  border-radius: 8px;
  background-color: yellow;
}
.fish-guide .fish-entry .fish-icon {
  margin-top: 2px;
  margin-left: 2px;
  transform: scale(1.27) translate(5px, 5px);
}

.fish-guide .fish-entry .ui.left.corner.label {
  margin-top: 4px;
  margin-left: 4px;
  height: 3em;
  width: 3em;
  border-color: rgba(232, 232, 232, 0.20);
}
.fish-guide .fish-entry .ui.left.corner.label.hovering {
  border-color: rgba(232, 232, 232, 0.50);
}
.fish-guide .fish-entry.caught .ui.left.corner.label {
  border-color: rgba(33, 186, 69, 0.50);
}
.fish-guide .fish-entry.caught .ui.left.corner.label.hovering {
  border-color: rgba(33, 186, 69, 0.75);
}
.fish-guide .fish-entry .ui.left.corner.label:after {
  border-top-width: 3em;
  border-right-width: 3em;
}
.fish-guide .fish-entry .ui.left.corner.label .icon {
  left: -0.5240714em;
  top: 0.4821429em;
}
.fish-guide .fish-entry.disabled .ui.left.corner.label {
  display: none;
}

.fish-guide .fish-info {
  grid-area: fish-info;
  align-content: flex-start;
  display: grid;
  grid-gap: 1em;
  grid-template-areas: "fish-name      fish-name"
                       "fish-level     fish-waters"
                       "fish-desc      fish-desc"
                       "fish-locations fish-meta"
                       "fish-extra     fish-meta";
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr minmax(min-content, 6fr) 3fr 3fr;
}
.fish-guide .fish-info.hidden {
  display: none;
}
.fish-guide .fish-info .heading {
  font-size: 125%;
}
.fish-guide .fish-name {
  grid-area: fish-name;
  font-size: 140%;
  font-weight: bold;
}
.fish-guide .fish-level {
  grid-area: fish-level;
}
.fish-guide .fish-waters {
  grid-area: fish-waters;
}
.fish-guide .fish-desc {
  grid-area: fish-desc;
}
.fish-guide .fish-locations {
  grid-area: fish-locations;
}
.fish-guide .fish-extra {
  grid-area: fish-extra;
}
.fish-guide .fish-meta {
  grid-area: fish-meta;
}

#site-last-update.update-available {
  color: olive;
}
body.dark #site-last-update.update-available {
  color: yellow;
}
#site-last-update.update-available a,
#site-last-update.update-available a:hover {
  color: currentColor;
  text-decoration: underline;
}