:root {
  --approval-main-color: #0ca074;
  --background-gray: rgb(237, 237, 237);
  --edit-accent-color: #e6f5f1;
  --heading-main-color: rgb(3, 55, 36);
  --secondary-info-color: rgb(144, 144, 144);
  --selection-accent-color: rgba(182, 236, 175, .658);
  --warning-main-color: rgb(1990, 190, 108);
  --error-accent-color: #fdf0ed;
  --error-main-color: #ee6e52;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  src: url('/static/fonts/NunitoSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Nunito Sans Bold';
  font-style: normal;
  src: url('/static/fonts/NunitoSans-Bold.ttf') format('truetype');
}

html {
  font-family: 'Nunito Sans', 'Open Sans', sans-serif;
  scrollbar-gutter: stable;
}

body {
  background-color: var(--background-gray);
  margin: 0;
}

main {
  margin: 30px auto;
  max-width: 1200px;
}

main > .info-card, main > .trip-card {
  margin: 0px auto 40px auto;
}

h1, h2, h3 {
  color: var(--heading-main-color);
  font-family: 'Nunito Sans Bold', 'Open Sans', sans-serif;
  font-weight: normal;
}

h1 {
  font-size: 2em;
}

p.user-text {
  white-space: pre-line;
}

input:not([type=checkbox]):focus, select:focus, textarea:focus {
  outline: 3px solid var(--approval-main-color);
}

input[type=checkbox]:hover {
  accent-color: var(--selection-accent-color);
}

input[type=checkbox]:checked {
  accent-color: var(--approval-main-color);
}

button.action, a.action {
  border: 2px solid white;
  border-radius: 6px;
  color: white;
  font-family: 'Nunito Sans Bold', 'Open Sans', sans-serif;
  font-size: 1.1em;
  padding: .5em 1em;
  margin-right: 20px;
}

a.action {
  text-decoration: none;
}

button.approve, a.approve {
  background-color: var(--approval-main-color);
  border-color: var(--approval-main-color);
}

button.remove, a.remove {
  background-color: white;
  border: 2px solid var(--error-main-color);
  color: var(--error-main-color);
}

button.deny, a.deny {
  background-color: var(--error-main-color);
  border-color: var(--error-main-color);
}

button.edit, a.edit {
  color: var(--approval-main-color);
  background-color: white;
  border: 2px solid var(--approval-main-color);
}

button.demote, a.demote {
  color: var(--error-main-color);
  background-color: white;
  border: 2px solid var(--error-main-color);
}

button.action[disabled],
button.action[disabled]:hover,
a.action:not([href]) {
  border-color: gray;
  background-color: gray;
  color: white;
  cursor: not-allowed;
}

button.approve:hover, button.deny:hover {
  filter: brightness(110%);
}

button.edit:hover {
  background-color: var(--edit-accent-color);
}

button.demote:hover {
  background-color: var(--error-accent-color);
}

a.top-link {
  color: var(--heading-main-color);
  margin: 10px;
  display: block;
  font-size: 1.1em;
}

a.top-link:visited {
  color: inherit;
}

.message {
  margin-bottom: 1rem;
  padding: .5rem;
  font-size: 1.1rem;
  border-radius: 6px;
}

.warn {
  background-color: var(--warning-main-color);
}

.error {
  background-color: var(--error-main-color);
  color: white;
}

.hidden {
  display: none;
}

.site-nav {
  font-family: 'Nunito Sans Bold', 'Open Sans', sans-serif;
  background-size: cover;
  background-image: url('/static/images/nav-background.svg');
  font-size: 20px;
}

.site-nav ul {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
}

.site-nav a {
  display: block;
  text-decoration: none;
  padding: 20px 15px;
  color: white;
}

.site-nav a:hover, .site-nav a.selected {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.info-card {
  background: white;
  border-radius: 10px;
  box-shadow: 5px 5px 20px rgba(0,0,0,.25);
  padding: 10px 20px 10px 20px;
}

.trip-table-overflow-wrapper {
  overflow-x: scroll;
  width: 100%;
}

.trip-table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}

.trip-table button {
  margin-top: 0;
}

.trip-table img.badge {
  height: 36px;
  width: 36px;
}

.trip-table th {
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

.trip-table th, .trip-table td {
  padding: 10px 0px;
}

.trip-table tr:not(:last-child) td {
  border-bottom-color: #535658;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.trip-table tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.detail-table {
  border: 2px solid #c4c4c4;
  width: 100%;
}

.detail-table tr {
  display: flex;
  padding: 10px 5px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.detail-table tr:last-child {
  border: 0;
}

.detail-table th {
  margin-right: 30px;
  text-align: left;
}

.detail-table td {
  padding: 0;
  text-align: right;
}

.detail-table.gear {
  margin: 0;
}

.detail-table.gear th {
  font-weight: normal;
}

.notice {
  color: var(--secondary-info-color);
  margin: 20px 0px;
  width: fit-content;
}

.club-tag, .status-tag {
  background-color: #e5cdbe;
  border-radius: 5px;
  padding: 3.5px 7px;
  width: fit-content;
}

.status-tag.not-left {
  background-color: lightgray;
}

.status-tag.left {
  background-color: #F0E784;
}

.status-tag.late {
  background-color: #FA6F6F;
}

.status-tag.returned {
  background-color: #A1F0A3;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.alert-banner {
  padding: 10px;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: var(--error-main-color);
}

@media screen and (min-width: 800px) {
  .site-nav {
    background-size: unset;
    height: 80px;
  }
}