@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.site-branding {
  flex-wrap: wrap;
  padding: 10px 12px;
  column-gap: 24px !important;
  row-gap: 8px !important;
}

.site-branding .navbar-brand {
  margin-right: 0;
}

.site-branding img.logo {
  height: 64px;
  max-height: 64px;
  max-width: 100%;
  width: auto;
}

.site-branding-title {
  max-width: 280px;
  padding-left: 22px !important;
  border-color: #d9e3df !important;
}

.site-branding-title h5 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: 0.15px;
}

.site-branding-title a {
  color: #52716c !important;
  text-decoration: none;
}

@media (max-width: 600px) {
  .site-branding img.logo {
    height: 56px;
    max-height: 56px;
  }

  .site-branding-title {
    border-left: 0 !important;
    padding-left: 0 !important;
    max-width: 320px;
  }

  .site-branding-title h5 {
    font-size: 13px;
  }
}

/* Lin Fitness premium forest theme */
body[data-bs-theme] {
  --lin-bg: #f0e9de;
  --lin-shell: #0c2924;
  --lin-surface: #12362f;
  --lin-surface-raised: #19443a;
  --lin-border: rgba(197, 219, 205, 0.16);
  --lin-text: #f3eee4;
  --lin-muted: #b6c5bb;
  --lin-copper: #d4aa78;
  --lin-mint: #91c7b2;
  --primary: #d4aa78;
  --primary-hover: #e5c196;
  --primary-disabled: #816b52;
  --text-color-btn: #172720;
  --bs-body-color: var(--lin-text);
  --bs-body-bg: var(--lin-shell);
  --bs-secondary-color: var(--lin-muted);
  --bs-border-color: var(--lin-border);
  --bs-link-color: var(--lin-copper);
  --bs-link-hover-color: #e5c196;
  --reservable: #f2eee5;
  --unreservable: #d3aaa0;
  --reserved: #70aa99;
  --reservedMine: #d0a36c;
  --reservedParticipating: #9479a5;
  --reservedPending: #e3c478;
  --label-text-on-light: #193029;
  --label-text-on-dark: #f8f4eb;
  color-scheme: dark;
}

body {
  background: var(--lin-bg) !important;
  color: var(--lin-text);
  font-family: 'Outfit', 'Avenir Next', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.lin-app-frame {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: min(calc(100% - 48px), 1160px);
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  color: var(--lin-text);
  background: var(--lin-shell);
  border: 1px solid rgba(37, 69, 59, 0.32);
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(35, 39, 31, 0.18);
}

.lin-app-frame > .site-branding {
  min-height: 132px;
  margin: 0 !important;
  padding: 22px clamp(22px, 4vw, 42px) !important;
  gap: 22px !important;
  background-color: #0b2924;
  background-image: linear-gradient(90deg, rgba(8, 35, 30, 0.58), rgba(8, 35, 30, 0.08)),
    url('../img/lin-fitness-forest-header.jpg');
  background-size: cover;
  background-position: center 54%;
  border-radius: 22px 22px 0 0;
  border-bottom: 1px solid rgba(216, 185, 143, 0.18);
}

.site-branding img.logo {
  height: 68px;
  max-height: 68px;
  max-width: min(100%, 360px);
  width: auto;
}

.site-branding-title {
  max-width: 320px;
  padding-left: 22px !important;
  border-color: rgba(240, 233, 222, 0.3) !important;
}

.site-branding-title h5 {
  font-family: 'Outfit', 'Avenir Next', 'PingFang SC', sans-serif;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

.site-branding-title a {
  color: #f2eee5 !important;
  text-decoration: none;
}

.site-branding-title h5 + h5 a {
  color: #e3bd8b !important;
}

.lin-app-frame > nav.navbar {
  z-index: 1020;
  margin: 0;
  padding: 8px clamp(18px, 3vw, 36px) !important;
  background: #0c2924 !important;
  border-bottom: 1px solid var(--lin-border);
  box-shadow: none !important;
}

.lin-app-frame > nav.navbar .container-fluid {
  padding: 0;
}

.lin-app-frame .navbar-nav .nav-link,
.lin-app-frame .navbar-nav .nav-link.link-primary {
  padding: 10px 12px;
  color: #e9e4d9 !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: 9px;
  transition: background-color 150ms ease, color 150ms ease;
}

.lin-app-frame .navbar-nav .nav-link:hover,
.lin-app-frame .navbar-nav .nav-link:focus-visible {
  color: #f2d1a3 !important;
  background: rgba(231, 197, 151, 0.1);
}

.lin-app-frame .navbar-toggler {
  border-color: rgba(240, 233, 222, 0.35);
}

.lin-app-frame .navbar-toggler-icon {
  filter: invert(0.9);
}

.lin-app-frame .dropdown-menu {
  --bs-dropdown-bg: #14372f;
  --bs-dropdown-color: var(--lin-text);
  --bs-dropdown-border-color: var(--lin-border);
  --bs-dropdown-link-color: var(--lin-text);
  --bs-dropdown-link-hover-color: #f2d1a3;
  --bs-dropdown-link-hover-bg: rgba(231, 197, 151, 0.1);
  --bs-dropdown-link-active-color: #172720;
  --bs-dropdown-link-active-bg: var(--lin-copper);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.lin-app-frame .dropdown-divider {
  border-color: var(--lin-border);
}

.lin-app-frame > #main {
  flex: 1 0 auto;
  width: 100%;
  margin: 0 !important;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 48px) 48px;
  background: transparent;
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
  color: #f5efe5;
  font-family: 'Outfit', 'Avenir Next', 'PingFang SC', sans-serif;
  letter-spacing: -0.015em;
}

#main h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 600;
}

#main .link-primary,
#main a:not(.btn):not(.dropdown-item) {
  color: #e2ba86;
}

#main .link-primary:hover,
#main a:not(.btn):not(.dropdown-item):hover {
  color: #f2d2a7;
}

#main .card,
#main .accordion-item,
#main .list-group-item,
#main .modal-content,
#main .popover,
#main .offcanvas {
  color: var(--lin-text);
  background-color: var(--lin-surface);
  border-color: var(--lin-border);
}

#main .card,
#main .accordion-item {
  border-radius: 16px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16) !important;
}

#main .card-header,
#main .card-footer,
#main .modal-header,
#main .modal-footer {
  color: var(--lin-text);
  background: rgba(7, 28, 24, 0.3);
  border-color: var(--lin-border);
}

#main .accordion {
  --bs-accordion-color: var(--lin-text);
  --bs-accordion-bg: var(--lin-surface);
  --bs-accordion-border-color: var(--lin-border);
  --bs-accordion-btn-color: var(--lin-text);
  --bs-accordion-btn-bg: var(--lin-surface-raised);
  --bs-accordion-active-color: #f5efe5;
  --bs-accordion-active-bg: #19443a;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(212, 170, 120, 0.2);
}

#main .accordion-button,
#main .accordion-button.collapsed,
#main .accordion-button:not(.collapsed) {
  color: #f1ede4 !important;
  background: #153a32;
  font-weight: 550;
  box-shadow: none;
}

#main .accordion-button:hover {
  background: #1a453b;
}

#main .accordion-button::after {
  filter: invert(0.9);
}

#main .accordion-body {
  color: var(--lin-text);
}

#availabilityDashboard .resourceName a,
#availabilityDashboard .resourceName .resourceNameSelector {
  color: #172720 !important;
  font-weight: 600;
}

#availabilityDashboard .availability {
  color: var(--lin-muted);
  font-size: 0.9rem;
}

#main .text-muted,
#main .text-body-secondary,
#main .form-text,
#main small,
#main .small {
  color: var(--lin-muted) !important;
}

#main label,
#main .form-label,
#main .form-check-label {
  color: #e9e4d9;
  font-weight: 500;
}

#main .form-control,
#main .form-select,
#main .input-group-text,
#main .form-control:disabled,
#main .form-select:disabled,
#main select,
#main textarea {
  color: #f3eee4;
  background-color: #0c2722;
  border-color: #42645a;
}

#main .input-group-text {
  color: #d8c9b4;
}

#main .form-control::placeholder,
#main textarea::placeholder {
  color: #98aaa0;
  opacity: 1;
}

#main .form-control:focus,
#main .form-select:focus,
#main textarea:focus {
  border-color: var(--lin-copper);
  box-shadow: 0 0 0 0.22rem rgba(212, 170, 120, 0.19);
}

#main .form-check-input {
  background-color: #0c2722;
  border-color: #779187;
}

#main .btn-primary {
  --bs-btn-color: #172720;
  --bs-btn-bg: var(--lin-copper);
  --bs-btn-border-color: var(--lin-copper);
  --bs-btn-hover-color: #172720;
  --bs-btn-hover-bg: #e5c196;
  --bs-btn-hover-border-color: #e5c196;
  --bs-btn-active-color: #172720;
  --bs-btn-active-bg: #c99864;
  --bs-btn-active-border-color: #c99864;
  font-weight: 600;
}

#main .btn-outline-primary {
  --bs-btn-color: #e5bd8a;
  --bs-btn-border-color: #b88e60;
  --bs-btn-hover-color: #172720;
  --bs-btn-hover-bg: var(--lin-copper);
  --bs-btn-hover-border-color: var(--lin-copper);
  --bs-btn-active-color: #172720;
  --bs-btn-active-bg: var(--lin-copper);
  --bs-btn-active-border-color: var(--lin-copper);
}

#main .btn-secondary,
#main .btn-outline-secondary {
  --bs-btn-color: #e6e5de;
  --bs-btn-bg: #29483f;
  --bs-btn-border-color: #577267;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #355a4e;
  --bs-btn-hover-border-color: #789688;
}

#main .table {
  --bs-table-color: var(--lin-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--lin-border);
  --bs-table-striped-color: var(--lin-text);
  --bs-table-striped-bg: rgba(242, 238, 229, 0.035);
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: rgba(212, 170, 120, 0.09);
}

#main .table-light,
#main .table-light th,
#main .table-light td,
#main .bg-light {
  --bs-table-color: var(--lin-text);
  --bs-table-bg: #1d443a;
  color: var(--lin-text) !important;
  background-color: #1d443a !important;
}

#main .table-responsive {
  max-width: 100%;
  border-radius: 12px;
}

#main hr,
#main .border,
#main .border-bottom,
#main .border-top {
  border-color: var(--lin-border) !important;
}

#main .pagination {
  --bs-pagination-color: #e5bd8a;
  --bs-pagination-bg: #14372f;
  --bs-pagination-border-color: var(--lin-border);
  --bs-pagination-hover-color: #172720;
  --bs-pagination-hover-bg: #e5bd8a;
  --bs-pagination-active-bg: var(--lin-copper);
  --bs-pagination-active-border-color: var(--lin-copper);
  --bs-pagination-active-color: #172720;
}

#page-dashboard {
  width: min(100%, 960px);
  margin: 0 auto;
}

#dashboardList {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  grid-template-rows: repeat(3, auto);
  gap: 16px;
  align-items: start;
}

#dashboardList > div {
  min-width: 0;
}

#dashboardList > div:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 3;
}

#dashboardList > div:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

#dashboardList > div:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

#dashboardList > div:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
}

#dashboardList > div:nth-child(n + 5) {
  grid-column: 2;
}

#dashboardList .accordion-item {
  margin-bottom: 0 !important;
}

#page-login,
#page-register {
  width: min(100%, 900px);
  margin: 0 auto;
}

#page-login .card {
  border-color: rgba(212, 170, 120, 0.25);
}

#page-login .login-icon img {
  max-height: 92px;
  object-fit: contain;
}

.lin-app-frame > footer {
  margin-top: auto;
  padding: 14px 22px 18px !important;
  color: var(--lin-muted);
  background: transparent !important;
  border-color: var(--lin-border) !important;
  border-radius: 0 0 22px 22px;
}

.lin-app-frame > footer a {
  color: #d9bd98 !important;
  text-decoration: none;
}

.lin-app-frame > footer a:hover {
  color: #f2d2a7 !important;
}

@media (max-width: 767.98px) {
  .lin-app-frame {
    width: calc(100% - 20px);
    min-height: calc(100vh - 20px);
    margin: 10px auto;
    border-radius: 15px;
  }

  .lin-app-frame > .site-branding {
    min-height: 112px;
    padding: 16px 18px !important;
    gap: 12px !important;
    border-radius: 15px 15px 0 0;
    background-position: 62% center;
  }

  .site-branding img.logo {
    height: 54px;
    max-height: 54px;
  }

  .site-branding-title {
    max-width: 100%;
    padding-left: 14px !important;
  }

  .site-branding-title h5 {
    font-size: 13px;
  }

  .lin-app-frame > nav.navbar {
    padding: 6px 14px !important;
  }

  .lin-app-frame > #main {
    padding: 24px 14px 32px;
  }

  #page-login .col-md-6,
  #page-login #announcements {
    width: 100%;
  }

  #dashboardList {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 12px;
  }

  #dashboardList > div:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }

  .lin-app-frame > footer {
    border-radius: 0 0 15px 15px;
  }
}

@media (max-width: 440px) {
  .lin-app-frame > .site-branding {
    align-items: flex-start !important;
  }

  .site-branding img.logo {
    height: 46px;
    max-height: 46px;
  }

  .site-branding-title {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  .site-branding-title h5 {
    font-size: 12px;
  }

  .lin-app-frame > #main {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lin-app-frame * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}