/* color palette: https://coolors.co/0e3b43-eff1f3-470024-5688c7-f6828c */
:root {
  --colors-g1: #EEF2E3;
  --colors-g1-5: #DAF89B;
  --colors-g2: #C8F169;
  --colors-g3: #78C51C;
  --colors-g4: #2A6F2B;
  --colors-g5: #043F2E;
  --colors-r1: #FFBBBE;
  --colors-r2: #FB848B;
  --colors-r3: #DB4049;
  --colors-r4: #A91E27;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
}

@media (max-width: 699px) {
  table {
    font-size: 14px;
  }

  .flag-table {
    height: 24px;
    width: 24px;

  }

  .card-body {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .card-comp-stats {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .card-text-company-stats {
    font-size: 16px !important;
    margin-bottom: 0 !important;

  }

  .card-title-company-stats {
    font-size: 12px !important;
    margin-bottom: 0;
  }
}


@media (min-width: 699px) {
  .flag-table {
    height: 28px;
    width: 28px;

  }

}

body {
  /* background-color: var(--bs-background-brown-200); */
  background-color: var(--colors-g5);
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: normal;
}

.badge-nav-notactive {
  background-color: var(--colors-g3);
  color: var(--colors-g5);
  font-weight: 500;
}

.badge-nav-active {
  background-color: var(--colors-g1);
  color: var(--colors-g5);
  font-weight: 500;
}

.navbar {
  /*max-height: 150px;  */
  height: 100px;
  overflow: visible;
  background-color: var(--colors-g1);
  z-index: 1;
  border-bottom-left-radius: var(--radius-16);
  border-bottom-right-radius: var(--radius-16);
  padding-left: 20px;
  padding-right: 20px;
}

.navbar-brand {
  color: var(--colors-g5) !important;
  font-weight: 600;
  font-style: normal;
}


.navbar-brand:hover {
  color: var(--colors-g4) !important;
  ;
}

.header-search-container {
  overflow: visible;
  width: 50%;
  max-width: 400px;
  min-width: 200px;
}

.nav-bar-search {
  font-size: 14px;
  background-color: var(--colors-g2);
  border: 0;
  color: var(--colors-g5);
}

.search-results-li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.search-results-a {
  color: var(--colors-g5);
  text-decoration: none;
}

.search-results-ul {
  margin: 10px;
  padding-left: 0;

}

#search-results-1 {
  margin-top: 5px;
  overflow: visible;
  position: absolute;
  background-color: var(--colors-g1);
  border-radius: 5px;
}

.disclaimer {
  color: var(--colors-g1);
  font-weight: normal;
  font-size: 12px;
  width: 75%;
  margin: auto;
  margin-top: 50px;
}




.card {
  margin-bottom: 20px;
  border: 0px;
  padding: 15px;
  background-color: var(--colors-g1);
  border-radius: var(--radius-16);
}

.header-box {
  background-color: var(--colors-g5);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.header-box-text {
  color: var(--colors-g1);
  width: var(--body-width);
  /* Or whatever max-width your body uses */
  margin: 0 auto;
  padding-bottom: 10px;
  padding-top: 20px;
}

.header-box-text-expanding {
  background-color: var(--colors-g5);
  position: absolute;
  width: 100vw;
  height: 15vh;
  z-index: -1;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -2rem;
}

.table-dark-head {
  background-color: var(--colors-g5) !important;
  font-size: 18px;
}

.custom-striped-table>tbody>tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--colors-g1);
  /* light blue */
}

.custom-striped-table td {
  border: none !important;
}

.a-table {
  text-decoration: none;
  color: var(--colors-g5);
}

.a-nav-tree-structure {
  color: var(--colors-g3);
  text-decoration: none;
}

table th {
  white-space: nowrap;
}

table th:first-child {
  border-top-left-radius: var(--radius-8);
}

table th:last-child {
  border-top-right-radius: var(--radius-8);
}

.btn-primary {
  background-color: var(--colors-g5);
  border: 0px;
  color: var(--colors-g1)
}

.btn-primary:hover {
  background-color: var(--colors-g2);
  border: 0px;
  color: var(--colors-g5)
}

.btn-primary:disabled {
  background-color: var(--bs-background-white);
  color: var(--colors-g5);
  border: 0px;
}

.card-h2 {
  padding-bottom: 20px;
  font-weight: 700;
  color: var(--colors-g5);
}

.h1-header {
  font-weight: 600;
  padding-top: 80px;
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  /* scales font between 1.5rem and 3rem based on screen width */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  /* avoid breaking in the middle unless needed */
  line-height: 1.1;
  text-wrap: balance;
  /* optional: better line breaking in supporting browsers */
}

.footer-nav {
  color: var(--colors-g1);
}

.a-footer-nav {
  color: var(--colors-g1);
}

.nav-item a {
  color: var(--colors-g5);
}

.nav-item:hover {
  background-color: var(--colors-g2);
  border-radius: 5px;
}

.nav-item a:hover {
  color: var(--colors-g5);
}

.nav-item a:active {
  color: var(--colors-g5);
}

.navbar-toggler {
  border-color: var(--colors-g5);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23043F2E' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-collapse.show {
  padding: 20px;
  background-color: var(--colors-g1);
  border-radius: var(--radius-12);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  margin-top: 0;
  right: 0;
  left: unset !important;
}

.dropdown-menu-item-nav-bar:active {
  background-color: var(--colors-g1);
  color: var(--colors-g5);
}

.dropdown-menu-nav-bar a {
  border-color: var(--colors-g5);
  color: var(--colors-g5);
}

.card-title-company-stats {
  font-size: 14px;
  margin-bottom: 0;
}

.card-text-company-stats {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--colors-g5);
}

.active-position-date-comp {
  font-size: 14px;
  font-weight: normal;
}

.active-position-position-h-comp {
  font-size: 16px;
  font-weight: 700;
}

.active-position-table-comp-tr:hover {
  background-color: var(--colors-g2);
  /* Slightly deeper lime green on hover */
  transform: scale(1.01);
  /* Optional: adds a subtle zoom-in */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Optional: soft shadow */
}

.card-comp-stats-hover:hover {
  background-color: var(--colors-g3);
  /* Slightly deeper lime green on hover */
  transform: scale(1.01);
  /* Optional: adds a subtle zoom-in */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Optional: soft shadow */
}

.card-comp-stats-hover {
  transition: all 0.2s ease;
  cursor: pointer;
}

.card-comp-stats-body {
  padding-bottom: 0;
}

.active-position-table-comp-tr {
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  /* light green */
  color: var(--colors-g5);
  border-radius: var(--radius-12);
  margin-bottom: 10px;
  padding: 10px 15px;
  /* spacing inside the row */
}

.active-position-short-comp {
  font-size: 16px;
  font-weight: 700;
}

.card-comp-stats {
  background-color: var(--colors-g2);
  border-radius: var(--radius-16);
  height: 90%;
}

.home-page-table-tr {
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  /* light green */
  border-radius: var(--radius-12);
  margin-bottom: 10px;
  padding: 10px 15px;
  /* spacing inside the row */
  height: 60px;
}

.home-page-table-tr-th {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--colors-g1);
  padding-left: 5px;
  /* spacing inside the row */
  padding-right: 10px;
  padding-bottom: 10px;
  color: var(--colors-g5);
}


.home-page-table-tr:hover {
  background-color: var(--colors-g2);
  /* Slightly deeper lime green on hover */
  transform: scale(1.01);
  /* Optional: adds a subtle zoom-in */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Optional: soft shadow */
}

.home-page-table {
  width: 100%;
}

.home-page-table-left-text {
  font-size: 16px;
  font-weight: 700;
}

.company-row {
  display: flex;
  align-items: center;
}

.flag-table {
  width: 20px;
  height: auto;
  margin-right: 15px;
}

.company-info {
  display: flex;
  flex-direction: column;
}

.ticker-label {
  font-size: 0.75em;
  color: var(--colors-g5);
  margin-top: -0.25em;
  /* or try 0 for no gap at all */
}

.home-page-table-comp-name {
  padding-left: 0px;
  padding-right: 15px;
  font-weight: 600;
  color: var(--colors-g5);
  font-size: clamp(0.75rem, 0.95rem, 1.0rem);
  /* min, preferred, max */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;

}

.breadcrumb-deactive a {
  color: #ccc;
  text-decoration: none;
  /* Removes underline */
}

.breadcrumb-active {
  color: var(--colors-g2)
}

.breadcrumb-delimiter {
  margin-left: 10px;
  margin-right: 10px;
}

.nav-tabs {
  border-bottom: none;
  display: flex;
  gap: 1rem;
  margin-bottom: 10px;
}

.nav-tabs .nav-link {
  border: none;
  background-color: var(--colors-g1-5);
  color: var(--colors-g5);
  /* your theme's text color */
  font-weight: 500;
  border-radius: var(--radius-8);
  padding: 6px 14px;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  background-color: var(--colors-g3);
  color: var(--colors-g5);
}

.nav-tabs .nav-link.active {
  background-color: var(--colors-g5);
  /* match your green design */
  color: var(--colors-g1);
}

.custom-success-badge {
  background-color: var(--colors-g4);
  font-weight: 500;
  color: var(--colors-g1);
}

.custom-danger-badge {
  background-color: var(--colors-r4);
  font-weight: 500;
  color: white;
}

.home-short-percentage-text {
  color: var(--colors-g5)
}

.range-cell {
  cursor: pointer;
  transition: background-color .2s;
  padding:5px;
}

.range-cell.active {
  background-color: white;
  border-radius: var(--radius-8);
}
.range-cell-title {
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 15px);
}
.range-cell-positive-change {
  font-weight: 500;
  color: var(--colors-g4);
  font-size: clamp(12px, 1.2vw, 15px);
}
.range-cell-negative-change {
    font-weight: 500;
  color: var(--colors-r4);
  font-size: clamp(12px, 1.2vw, 15px);
}
  .layout {
    display: grid;
    grid-template-areas:
      "B"
      "A"
      "C";
    gap: var(--bs-gutter-x, 1rem) var(--bs-gutter-x, 1rem);
  }

  /* xl and up: two columns, A tall on the left, B/C stacked on the right */
  @media (min-width: 1200px) {
    .layout {
      grid-template-columns: 4fr 8fr;           /* matches 4/8 */
      grid-template-areas:
        "A B"
        "A C";
      align-items: start;
    }
  }

  .A { grid-area: A; }
  .B { grid-area: B; }
  .C { grid-area: C; }