body {
  --clr-stone: hsl(193, 23%, 60%);
  --clr-stone-faded: hsl(193, 23%, 70%);
  --clr-light-blue: #BAD6DE;
  --clr-light-blue-darker: hsl(193, 35%, 70%);
  --clr-sand: hsl(25, 53%, 62%);
  --clr-green: #7A8738;
  --clr-navy: #262161;
  --clr-white: #FFFFFF;
  --clr-black: #000000;
  --clr-light-grey: #f3f3f3;
  --clr-teal: #82A6B0;
}

@font-face {
  font-family: "sohnebreit";
  src: url("/static/home/fonts/SohneBreit.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "frankruhl";
  src: url("/static/home/fonts/frankruhl-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "frankruhl";
  src: url("/static/home/fonts/frankruhl-medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "frankruhl", sans-serif;
  font-weight: normal;
}
@media (prefers-color-scheme: dark) {
  html {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
}

.button {
  border-radius: 0;
  font-family: sohnebreit, sans-serif;
  font-size: 1rem;
  background-color: var(--clr-sand);
  color: var(--clr-white);
  padding: 0.5rem 1rem;
  border: 1px solid var(--clr-sand);
}
.button.small {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}
.button.outline {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-navy);
  color: var(--clr-navy);
}
.button.disabled {
  opacity: 0.6;
  pointer-events: none;
}
.title {
  color: var(--clr-black);
  font-family: sohnebreit, sans-serif;
}
.section {
  padding: 1.5rem;
}

/* TABS */
.tabs li.is-active a {
  background-color: var(--clr-light-blue);
  color: var(--clr-black);
  border-bottom-color: var(--clr-light-blue);
}

/* BREADCRUMB */
.breadcrumb {
  margin-top: 0.5rem;
}
.breadcrumb li {
  align-items: flex-start;
}
.breadcrumb a {
  font-family: sohnebreit, sans-serif;
  font-size: 0.875rem;
  color: var(--clr-stone);
  text-transform: uppercase;
}
.breadcrumb a:hover {
  color: var(--clr-stone);
}
.breadcrumb li.is-active a {
  color: var(--clr-light-blue);
}

/* APP TILE */
.app-tile {
  display: flex;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--clr-sand);
  color: var(--clr-white);
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: sohnebreit, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  position: relative;
}
@media screen and (min-width: 600px) {
  .app-tile {
    font-size: 1rem;
  }
}
.app-tile__icon {
  position: absolute;
  bottom: 1rem;
  right: 0.9rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  font-size: 3rem;
  line-height: 1rem;
  transform: rotate(-180deg);
}
.app-tile__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.app-tile:hover .app-tile__icon{
  right: 0.9rem;
  opacity: 1;
  transform: rotate(0deg);
}

/* BACKGROUND COLORS */
.bg-stone {
  background-color: var(--clr-stone);
}
.bg-light-blue {
  background-color: var(--clr-light-blue);
}
.bg-sand {
  background-color: var(--clr-sand);
}
.bg-green {
  background-color: var(--clr-green);
}
.bg-teal {
  background-color: var(--clr-teal);
}

/* PALETTE COLORS
 * Required color scheme (RGB normalized):
 *   (21/255, 96/255, 130/255)  → #156082
 *   (160/255, 43/255, 147/255) → #A02B93
 *   (25/255, 107/255, 36/255)  → #196B24
 *   (25/255, 107/255, 95/255)  → #196B5F
 *   (25/255, 107/255, 165/255) → #196BA5
 * Once all five are used, continue with 50% tints (mixed with white).
 */
.bg-pal-1 { background-color: #156082; }
.bg-pal-2 { background-color: #A02B93; }
.bg-pal-3 { background-color: #196B24; }
.bg-pal-4 { background-color: #196B5F; }
.bg-pal-5 { background-color: #196BA5; }
.bg-pal-1-tint { background-color: #8AB0C1; } /* 50% tint of #156082 */
.bg-pal-2-tint { background-color: #D095C9; } /* 50% tint of #A02B93 */
.bg-pal-3-tint { background-color: #8CB592; } /* 50% tint of #196B24 */
.bg-pal-4-tint { background-color: #8CB5AF; } /* 50% tint of #196B5F */
.bg-pal-5-tint { background-color: #8CB5D2; } /* 50% tint of #196BA5 */

/* GRID */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
@media screen and (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* SUB NAV */
.sub-nav {
  position: relative;
  z-index: 10;
}
.sub-nav__list {
  display: none;
  width: 300px;
  flex-direction: column;
  position: absolute;
  right: 0;
  background-color: var(--clr-light-blue);
  border: 1px solid var(--clr-black);
  margin-top: -1px;
}

.trading-form-box {
  border: 1px solid #dcdcdc;
  padding: 1rem;
}

.trading-field-row .field {
  margin-bottom: 0.75rem;
}

.trading-field-row .help {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

.trading-field-row .input,
.trading-field-row .select select {
  min-width: 0;
}
.sub-nav__list li {
  border-bottom: 1px solid var(--clr-light-blue-darker);
}
.sub-nav__link li:last-of-type {
  border-bottom: 0;
}
.sub-nav__list.active {
  display: flex;
}
.sub-nav__link {
  display: block;
  font-family: sohnebreit, sans-serif;
  font-size: 1rem;
  color: var(--clr-black);
  text-decoration: none;
  padding: 0.5rem 1rem;
}
.sub-nav__link:hover {
  text-decoration: underline;
}
.sub-nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--clr-white);
  border: 1px solid var(--clr-black);
  padding: 0.5rem;
  position: relative;
  z-index: 1;
  transition: none;
}
.sub-nav__toggle.active {
  background-color: var(--clr-light-blue);
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--clr-light-blue-darker);
}
.sub-nav__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--clr-black);
}
.sub-nav__toggle.active .sub-nav__line {
  width: 1.1rem;
  position: absolute;
}
.sub-nav__toggle.active .first {
  transform: rotate(45deg);
}
.sub-nav__toggle.active .second {
  transform: rotate(-45deg);
}
.sub-nav__toggle.active .third {
  display: none;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/* CARD */

.card {
  box-shadow: none;
  border: 1px solid var(--clr-black);
  border-radius: 0;
}
.card-header {
  box-shadow: none;
  border-bottom: 1px solid var(--clr-black);
  border-radius: none;
}
.card-header-title {
  font-family: sohnebreit, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: var(--clr-black);
  padding: 0.75rem 1.5rem;
}
@media (prefers-color-scheme: dark) {
  .card {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
  .card-footer {
    border: 0;
  }
}
.button-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.5rem 1.5rem 1.5rem;
}
.content {
  color: var(--clr-black);
}

.tag {
  border-radius: 0;
}

.badge-primary { background: var(--clr-teal); color: white; font-weight:600; }
.badge-accent  { background: var(--clr-green);  color: white; font-weight:600; }
.badge-yes     { background: var(--clr-sand); color: white; }
.badge-no      { background: var(--clr-green); color: white; }
.badge-null    { background: transparent; color: #4a4a4a; }
.badge-no-result { background: var(--clr-light-grey); color: white; }
.badge-has-result { background: var(--clr-black); color: white; }

.notification {
  border-radius: 0;
}

.modal-card {
  border-radius: 0;
  border: 1px solid var(--clr-black);
}
.modal-card-head {
  border-radius: 0;
  padding-bottom: 0;
  box-shadow: none;
}
.modal-card-title {
  font-family: sohnebreit, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: var(--clr-black);
}
.modal-card-foot {
  border-radius: 0;
  box-shadow: none;
  background-color: var(--clr-white);
  gap: 0.5rem;
  padding-top: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  .modal-card, .modal-card-head, .modal-card-foot, .modal-card-body {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
}

.select select {
  border-radius: 0;
  border: 1px solid var(--clr-black);
}
.select:not(.is-multiple):not(.is-loading):after {
  border-left: 2px solid var(--clr-black);
  border-bottom: 2px solid var(--clr-black);
}
@media (prefers-color-scheme: dark) {
  .select select {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
  .label {
    color: var(--clr-black);
  }
  strong {
    color: var(--clr-black);
  }
}

.control .input[type="text"], .control .input[type="email"] {
  border-radius: 0;
  border: 1px solid var(--clr-black);
  height: 100%;
}
.input[type="date"] {
  border: 1px solid var(--clr-black);
  border-radius: 0;
  color: var(--clr-black);
}
.input[type="datetime-local"] {
  border: 1px solid var(--clr-black);
  border-radius: 0;
  color: var(--clr-black);
}
@media (prefers-color-scheme: dark) {
  .control .input[type="text"], .control .input[type="email"] {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
  .input[type="date"], .input[type="datetime-local"] {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
}

.checkbox {
  color: var(--clr-black);
}
table input[type="number"] {
  border: 1px solid var(--clr-black);
  border-radius: 0;
}
.table-container {
  border: 1px solid var(--clr-black);
}
.table-container .table {
  width: 100%;
}
.table-container .table th {
  border-bottom: 1px solid var(--clr-black);
}
.table th {
  font-family: sohnebreit, sans-serif;
  font-weight: normal;
}
.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
  background-color: var(--clr-light-grey);
}
@media (prefers-color-scheme: dark) {
  .table {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
  .table thead th, .table td {
    color: var(--clr-black);
    border: 1px solid #d6d9e0;
  }
  table input[type="number"] {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
  .table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: var(--clr-light-grey);
  }
}
.value-tile {
  padding: 1rem;
  color: var(--clr-white);
}
.value-tile .title {
  color: var(--clr-white);
  font-weight: normal;
}

.icon-color {
  color: var(--clr-black);
}

.delete {
  border: 1px solid var(--clr-black);
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0;
  max-width: none;
  max-height: none;
}
.delete::before {
  background-color: var(--clr-black);
  width: 60%;
}
.delete::after {
  background-color: var(--clr-black);
  height: 60%;
}
div.flatpickr-calendar {
  border: 1px solid var(--clr-black);
  border-radius: 0;
}
.section-inner {
  margin: 3rem 0;
}

.box {
  border-radius: 0;
  border: 1px solid var(--clr-black);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  .box {
    background-color: var(--clr-white);
    color: var(--clr-black);
  }
}

.js-message-modal {
  cursor: pointer;
}
#ingestion-message-modal .modal-card {
  width: 90%;
}
#ingestion-message-modal .modal-card-body {
  max-height: 60vh; overflow-y: auto;
}
#ingestion-message-modal pre {
  white-space: pre-wrap; word-break: break-word;
}