/* Variables */

/* Colors */
$color-purple: #7878EF;
$color-purple-light: #BBBBFF;
$color-purple-dark: #5C5CCF;

$color-purple-transparent: rgba($color-purple, 0.1);

$color-orange: #FF807D;
$color-orange-light: #FEBDB9;
$color-orange-dark: #DE5858;

$color-orange-transparent: rgba($color-orange, 0.1);

$color-green: #45E56E;
$color-green-light: #87F5AA;
$color-green-dark: #2EAF6B;
$color-green-darker: #189654;

$color-green-transparent: rgba($color-green, 0.1);

$color-black: #1D1D28;
$color-white: #FFFFFF;
$color-grey-light: #F5F5FF;
$color-grey: #DCDCE0;
$color-grey-dark: #4C4C61;
$color-grey-cold: #F0F0F0;

/* Tokens to override bootstrap colours */
$primary: $color-purple;
$secondary: $color-grey;
$success: $color-green-dark;
$info: $color-purple-light;
$warning: $color-orange-light;
$danger: $color-orange-dark;
$light: $color-grey-light;
$dark: $color-black;

/* Typography */
$font-family-base: "Inter", sans-serif;
$font-size-base: 1.125rem; //18px
$font-size-small: 0.88889rem; //16px

$line-height-base: 1.3334;
$headings-line-height: 1.25;

$h1-font-size: 2.9375rem; //47px
$h2-font-size: 2.1875rem; //35px
$h3-font-size: 1.625rem; //26px
$h4-font-size: 1.25rem; //20px

$body-font-weight: 400;
$headings-font-weight: 700;
$display-font-weight: 900;
$lead-font-weight: 400;

$link-color: $color-purple-dark;
$link-hover-color: $color-purple;

$transition-collapse: height .35s ease;

$btn-padding-y: 0.5em;
$btn-padding-x: 1em;
$btn-font-weight: 600;
$btn-color: $color-white;

$badge-font-weight: 400;
$badge-padding-y: 0.4em;

$card-cap-bg: $color-grey-light;
$card-border-color: $color-grey;

$purple-drop: 0px 7px 24px $color-purple-light;


/* Outputs our colours variables as css variables so that chart.js can access them */
:root {
  --es-purple: #{$color-purple};
  --es-purple-light: #{$color-purple-light};
  --es-purple-dark: #{$color-purple-dark};
  --es-purple-transparent: #{$color-purple-transparent};
  --es-orange: #{$color-orange};
  --es-orange-light: #{$color-orange-light};
  --es-orange-dark: #{$color-orange-dark};
  --es-orange-transparent: #{$color-orange-transparent};
  --es-green: #{$color-green};
  --es-green-light: #{$color-green-light};
  --es-green-dark: #{$color-green-dark};
  --es-green-darker: #{$color-green-darker};
  --es-green-transparent: #{$color-green-transparent};
  --es-black: #{$color-black};
  --es-white: #{$color-white};
  --es-grey-light: #{$color-grey-light};
  --es-grey: #{$color-grey};
  --es-grey-dark: #{$color-grey-dark};
  --es-grey-cold: #{$color-grey-cold};
}

@import "bootstrap"; 

@mixin spesh-link (
  $text-color: $color-black, 
  $hover-color: $color-green, 
  $transition-duration: 250ms
  ) {
    color: $text-color;
    text-decoration: none !important;
    box-shadow: inset 0 -0.3em 0 $hover-color;
    transition: $transition-duration;

  &:hover,
  &:active,
  &:focus {
    box-shadow: inset 0 -1em 0 $hover-color;
    color: $text-color;
  }
}

.extra-bold {
  font-weight: 900;
}

.extra-small {
  @include font-size(0.778rem);
}

/* Global selection style */
::selection {
  background-color: $color-purple-light;
}

::-moz-selection {
  background-color: $color-purple-light;
}

[data-bs-toggle="tooltip"] {
  cursor: pointer;
}

/* General reusable elements */
.btn-primary {
  background: linear-gradient(180deg, $color-purple 0%, $color-purple-dark 100%);
  color: $color-white;
  &:hover,
  &:active,
  &:focus {
    color: $color-white;
    background: linear-gradient(180deg, $color-purple 0%, $color-purple-dark 33%);
  }
}

.btn-primary--dark {
  background: linear-gradient(180deg, $color-purple-dark 0%, darken($color-purple-dark, 5%) 100%);
}

.btn-secondary {
  background: linear-gradient(180deg, $color-grey-light 0%, $color-grey 100%);
  &:hover,
  &:active,
  &:focus {
    background: linear-gradient(180deg, $color-grey-light 0%, $color-grey 33%);
  }
}

.btn-success {
  background: linear-gradient(180deg, $color-green-dark 0%, $color-green-darker 100%);
  color: $color-white;
  &:hover,
  &:active,
  &:focus {
    color: $color-white;
    background: linear-gradient(180deg, $color-green-dark 0%, $color-green-darker 33%);
  }
}

.btn-danger {
  background: linear-gradient(180deg, $color-orange 0%, $color-orange-dark 100%);
  color: $color-white;
  &:hover,
  &:active,
  &:focus {
    color: $color-white;
    background: linear-gradient(180deg, $color-orange 0%, $color-orange-dark 33%);
  }
}

.btn-warning {
  background: linear-gradient(180deg, $color-orange-light 0%, $color-orange 100%);
  &:hover,
  &:active,
  &:focus {
    background: linear-gradient(180deg, $color-orange-light 0%, $color-orange 33%);

  }
}

.btn-info {
  background: linear-gradient(180deg, $color-grey-light 0%, $color-purple-light 100%);
  &:hover,
  &:active,
  &:focus {
    background: linear-gradient(180deg, $color-grey-light 0%, $color-purple-light 33%);
  }
}

.btn-light {
  background: $color-grey-light;
  &:hover,
  &:active,
  &:focus {
    background: darken($color-grey-light, 3%);
  }
}

.btn-dark {
  background: linear-gradient(180deg, $color-grey-dark 0%, $color-black 100%);
  &:hover,
  &:active,
  &:focus {
    background: linear-gradient(180deg, $color-grey-dark 0%, $color-black 33%);
  }
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark {
  border: 0;
  &:focus {
    outline: 3px solid $color-orange;
  }
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark {
  &:active {
    color: rgba($color-white, 0.8) !important;
  }
}

.btn-outline-primary {
  &:hover,
  &:focus {
    color: $color-white;
  }
}

.btn-outline-secondary {
  color: $color-black;
}

.btn-outline-success {
  &:hover,
  &:focus {
    color: $color-white;
  }
}

.btn-outline-info {
  color: $color-black;
}

.btn-outline-warning {
  color: $color-orange;
}

.btn-outline-danger {
  &:hover,
  &:focus {
    color: $color-white;
  }
}

.btn-outline-light {
  color: $color-grey-dark;
}

.alert {
  border: 0;
}

.alert-dark {
  background-color: $color-grey-dark;
  color: $color-white;
	a {
		color: $color-white;
	}
}

hr {
  border-top: 3px solid $color-purple-light;
}

.border-purple-light {
  border-color: $color-purple-light;
}

.container {
  @include media-breakpoint-down(md) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.text-decoration-hover {
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}

.dark-section {
  background-color: $color-purple-dark;
  color: $color-white;
  .text-muted {
    color: rgba(255,255,255,0.666) !important;
  }
  a,
  .spesh-link {
    color: $color-white !important;
    &:hover,
    &:active,
    &:focus, 
    &:visited {
      color: $color-white !important;
    }
  }
}

.grey-grad-bg  {
  background: linear-gradient(180deg, $color-white 0%, $color-grey-light 100%);
}

.ecosystems-pattern {
  background-color: lighten($color-purple-light, 8%);
  background-image: asset-url('ecosystems-pattern.svg');
  background-repeat: repeat;
  background-size: calc(696px/2) calc(238px/2);
  background-attachment: fixed;
}

.purple-grad-bg  {
  background-color: $color-purple-dark;
  background: linear-gradient(0deg, $color-purple-dark 0%, $color-purple 50%);
  color: $color-white;
  .text-muted {
    color: rgba(255,255,255,0.666) !important;
  }
}

.grey-bg {
  background-color: $color-grey-light;
}

/* Put an icon next to a link and make the whole lockup clickable */
.link-with-icon {
  display: inline-flex;
  align-items: flex-start;    /* top-align icon and first line of text */
  gap: 0.5em; 
                   
  .link-with-icon__icon {
    flex: 0 0 18px; /* shorthand for flex-grow:0, flex-shrink:0, flex-basis:18px */
    width: 18px;
    height: 18px;
    margin-top: 4px;
  }

  .link-with-icon__text {
    display: block;
    overflow-wrap: break-word; 
    word-break: break-word; 
  }
  &:hover,
  &:active,
  &:focus {
    .link-with-icon__text {
      text-decoration: underline;
      color: $color-purple-dark;
    }
  }
}

body {
  font-optical-sizing: auto;
}

.header__global {
  width: 100%;
}

.header__global__site-logo-wrapper {
  h1 {
    font-size: 0;
    line-height: 0;
    margin: 0;
  }
}

.site-logo {
  font-size: 0;
  line-height: 0;
  color: transparent;

  background-image: asset-url('ecosystems-logo.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;

  width: 155px;
  height: 30px;
}

.site-logo--white {
	background-image: asset-url('ecosystems-logo-white.svg');
  width: 246px;
  height: 50px;
}

.site-name {
  line-height: 50px;
  display: inline-block;
  vertical-align: middle;
  font-size: 40px;
  font-weight: 400;
  color: $color-purple;
  padding-top: 70px;
}

.header__global__menu-link {
  @include spesh-link();
  @include font-size(1rem);
  .bi {
    display: inline-block;
    transition: transform 0.35s ease-out; //same time as bootstrap's animation
    transform-origin: center;
  }
}

.header__global__menu-link[aria-expanded="true"] {
  .bi {
    transform: rotateX(180deg);
  }
}

.header__global__menu__category {
  margin-bottom: 0.5rem;
}

.header__global__menu__category-title {
  display: inline;
  @include font-size(1rem);
}

.header__global__menu__category-links {
  @include font-size(1rem);
  display: inline;
  padding-left: 1rem;
  li {
    display: inline;
    margin-right: 1rem;
  }
  a {
    color: $color-black;
    &:hover,
    &:active,
    &:focus {
      color: $color-purple-dark;
    }
    &.active {
      text-decoration: none;
      color: $color-purple-dark;
    }
  }
}

.header__local {
  border-top: 1px solid $color-grey;
  margin-top: 2rem;
}

.header__local__sitename {
  color: $color-purple-dark;
}

.header__local__homelink {
  color: $color-purple-dark;
  text-decoration: none;
  &:hover,
  &:active,
  &:focus {
    color: $color-black;
  }
}

.header__local__description {
  @include font-size(1rem);
}

.header__local__navigation {
  margin-left: -1rem;
  @include media-breakpoint-up(lg) {
    margin-left: 0;
  }
  .nav-link {
    @include spesh-link();
    padding: 0;
  }
  .nav-item {
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  }

  .nav {
    @include media-breakpoint-up(lg) {
      justify-content: end;
    }
  }

  .dropdown {
    padding-top:4px;
  }

  .dropdown:last-of-type {
    padding-right: 0;
  }
}

.user-menu__image {
  border: 4px solid transparent;
  [aria-expanded="true"] & {
    border-color: $color-green;
  }

  &:hover,
  &:focus {
    border-color: $color-green;
  }
}

.table a {
  @include spesh-link();
}

/*  Header */
.header {
  padding: 2em 0 0;
}

/*  Footer */
.footer {
  padding: 2em 0;
  margin-top: 4em;
}

.footer-links {
  margin-top: 1rem;
  @include media-breakpoint-up(md) {
    text-align: right;
  }
  a {
    text-decoration: none;
  }
  li {
    margin-bottom: 0.25rem;
  }
}

.footer-icons {
  margin-top: 1em;
  a {
    margin: 0 0.5em;
    text-decoration: none;
  }
}

.lead {
  @include font-size(1.625rem);
}

/* Homepage */

/* Hero */
.hero {
  .lead {
    max-width: 42rem;
    margin: 0 auto;
  }
}

.spesh-link {
  @include spesh-link();
}

.spesh-link--hover-only {
  box-shadow: inset 0 -0.3em 0 transparentize($color-green, 1);
}

.label {
  display: block;
  @include font-size(0.875rem);
}

.block-link {
  /* class to make cards fully clickable */
  text-decoration: none;
}

.block-link--spesh {
  .spesh-link {
    display: inline-block;
  }
  /* if we have a .spesh-link in here, we need to attach the hover styles */
  &:hover,
  &:active,
  &:focus {
    .spesh-link {
      box-shadow: inset 0 -1em 0 $color-green;
    }
  }
}

.stat-card {
  display: inline-block;
  margin-right: 1.3334rem;
}

.stat-card-title {
  display: block;
}

.stat-card-text {
  display: inline-block
}

.stat-card-text--small {
  font-size: 1rem;
}

.stat-card-text--x-small {
  font-size: 0.875rem;
}

.stat-card-title {
  @include font-size(2.1875rem);
  font-weight: 800;
}

.stat-card-title--large {
  font-size: $h1-font-size;
}

.stat-card-title--small {
  font-size: $h3-font-size;
}

.stat-card-number-neutral {
  color: $color-purple-dark;
}

.stat-card-number-positive {
  color: $color-green-dark;
}

.stat-card-number-negative {
  color: $color-orange-dark;
}

.well {
  background-color: $color-grey-light;
  border-radius: $border-radius;
}

.well--grey {
  background-color: $color-grey-cold;
}

.well--empty {
  background-color: transparent;
  border: 1px solid $color-purple-light;
}

.logo-grid {
  img {
    max-height: 60px; 
    width: auto;
    object-fit: contain;
  }
}
  
.logo-grid {
	display: flex;
	justify-content: space-around;
	align-items: center; /* Align logos vertically */
	flex-wrap: wrap;
	gap: 2rem 2rem;
	@include media-breakpoint-up(xl) { 
	  flex-wrap: nowrap;
	  justify-content: space-between; 
	}
	a {
	  display: block;
	}
}
  
.logo-grid__logo {
	max-width: 150px;
}

/* Text content pages */

.page-content {
  h2, h3, h4, h5 {
    margin-top: 2rem;
    margin-bottom: 0.6667rem;
  }

	a {
	@include spesh-link();
	}
}

.page-content__title {
  margin-bottom: 3rem;
}

.page-content__title + .lead {
  margin-top: -1rem;
  margin-bottom: 1rem;
}

/* Error pages */
.error-bg {
  margin-bottom: -4em;
}

.error {
  padding: 4rem 0;
}

.error--has-background {
  padding-top: 480px;
  background-size: 440px;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 440px;
  @include media-breakpoint-up(lg) {
    background-size: 660px;
    min-height: 700px;
    position: relative;
    background-position: left top;
  }
}

.error--404 {
  background-image: asset-url('error-missing.png');
}

.error--409,
.error--422,
.error--429,
.error--500 {
  background-image: asset-url('error-breaking.png');
}

.error--400,
.error--401,
.error--403, 
.error--503 {
  background-image: asset-url('error-broken.png');
}

.error--has-background .error__content {
  @include media-breakpoint-up(lg) {
    position: absolute;
    right: 90px;
    top: 180px;
  }
}

.error__content {
  text-align: center;
}

.error__code {
  font-size: clamp(16px, 20vw, 256px);
  font-weight: 800;
  box-shadow: inset 0 -0.1em 0 $color-green;
  line-height: 1;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.error__description {
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}

.table-wrapper {
  /* Add a shadow to indicate there's more to see if you scroll */
  background: 
    linear-gradient(90deg, $color-white 20%, rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), $color-white 80%) 
                    100% 0,
    radial-gradient(farthest-side at 0 0%, $color-grey, rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 0%, $color-grey, rgba(0, 0, 0, 0))
                    100% 0;
  background-repeat: no-repeat;
  background-size: 20% 200%, 20% 200%, 8% 400%, 8% 400%;
  background-attachment: local, local, scroll, scroll;
  table {
    --bs-table-bg: transparent;
  }
}

.well {
	.table-wrapper {
		/* Add a shadow to indicate there's more to see if you scroll */
		background: 
		  linear-gradient(90deg, $color-grey-light 20%, rgba(255, 255, 255, 0)),
		  linear-gradient(90deg, rgba(255, 255, 255, 0), $color-grey-light 80%) 
						  100% 0,
		  radial-gradient(farthest-side at 0 0%, $color-grey, rgba(0, 0, 0, 0)),
		  radial-gradient(farthest-side at 100% 0%, $color-grey, rgba(0, 0, 0, 0))
						  100% 0;
		background-repeat: no-repeat;
		background-size: 20% 200%, 20% 200%, 8% 400%, 8% 400%;
		background-attachment: local, local, scroll, scroll;
		table {
		  --bs-table-bg: transparent;
		}
	}
}

.table {
	tr {
		vertical-align: middle;
	}
}

.table--purple {
  // a table that is purple, used for tables on widgets
  --bs-table-bg: #{$color-grey-light};
  --bs-table-hover-bg: #{$color-purple-transparent};
  --bs-table-active-bg: #{$color-purple-light};
  --bs-table-border-color: #{$color-purple-transparent};
  th, 
  td,
  tr {
    border-color: var(--bs-table-border-color) !important;
  }
}


.label-rejected {
  background-color: $color-orange-dark; 
}

.label-accepted {
  background-color: $color-green-dark; 
}

.label-pending {
  background-color: $color-grey-dark
}

.label-deleted{
  background-color: $color-grey;
  color: $color-black !important;
}

.label-info {
  background-color: $color-orange;
  a {
    // remove box shadow
    box-shadow: none;
  }
}

.tooltip {
	max-width: 400px !important;
	white-space: normal; 
}
  
.tooltip-inner {
	max-width: 400px !important; 
	text-align: left; 
}


.bg-secondary {
	color: $color-black;
}

/* Listing - used for search results or filterable elements, such as on advisories */

.listing {
	border: 0;
	border-radius: 0;
	border-bottom: 3px solid $color-purple-light;
	padding: 0;
}
  
.listing__title {
	@include font-size(1rem);
	a {
	  text-decoration: none;
	  color: $color-black;
    &:hover,
    &:active,
    &:focus {
      color: $color-purple-dark;
      text-decoration: underline;
    }
	}
}
  
.listing__meta {
  font-weight: normal;
  color: $color-grey-dark;
  @include font-size(0.875rem);
}
  
.listing__details {
	@include font-size(0.875rem);
  .badge {
    @include font-size(1em);
  }
}
  
.listing__time {
	margin-top: 0.3888888889; //gross number but it aligns the baseline with the severity badge
	@include font-size(0.7777777778rem);
}
  
.listing-filters {
	.list-group-item {
	  @include font-size(0.875rem);
	  border-color: $color-grey;
	  word-break: break-word;
	}
}
  
.listing-controls {
  background-color: $color-grey-light;
  p {
    line-height: 2.2222222222rem;
  }
	.dropdown-item.active,
	.dropdown-item:active {
	  background-color: $color-purple;
	}
}
  
.listing-header__meta__text {
	@include font-size(1rem);
	line-height: 1.4rem;
}
  
.listing-header__title {
	line-break: anywhere;
}

/* Used for search input field/go button lockups */
.rounded-input-group {
	.form-control {
		border-top-left-radius: 800px; //magic number, but it's consistent with bootstrap
		border-bottom-left-radius: 800px;
	}
	.btn {
		border-top-right-radius: 800px;
		border-bottom-right-radius: 800px;
	}
}

/* Form validation */
.invalid-feedback {
	color: $color-orange-dark;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: $color-green-dark;
}

.valid-feedback {
	color: $color-green-darker;
}

/* Sidebar with complentary info, used on filterable listing pages */
.sidebar {
	background-color: $color-grey-light;
	p { 
		@include font-size(1rem);
	}
	h2 {
		@include font-size(1.25rem);
    border-top: 1px solid $color-purple-light;
    padding-top: 1rem;
    &:first-of-type {
      border-top: 0;
      padding-top: 0;
    }
	}
	h3 {
		@include font-size(1rem);
	}
  code {
    color: $color-purple-dark;
  }
  a {
    @include spesh-link();
    line-break: anywhere;
  }
}

/* Dashboard */
.dashboard-layout {
  display: grid;
  grid-template-columns: 100%;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  @include media-breakpoint-up(lg) { 
    grid-template-columns: 1fr 3fr;
  }
}

.dboard__title-bar {
  position: sticky; 
  top: 0;            
  z-index: 1020;      
  background: $color-white;
}

.dboard-filter-controls {
  .btn-link {
    text-decoration: none;
    color: $color-black;
    font-size: $font-size-small;
    background-color: darken($color-grey-light, 3%);
    &:hover,
    &:active {
      background-color: darken($color-grey-light, 6%);
    }
    &.active {
      background-color: $color-purple;
      color: $color-white;
      &:hover,
      &:active {
        background-color: $color-purple-dark;
      }
    }
  }
  .dropdown-item {
    font-size: $font-size-small;
  }
}

.dboard-filter-controls__section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 0 1rem; 
  @include media-breakpoint-up(md) {
    grid-template-columns: repeat(8, 1fr); 
    margin-bottom: 1rem;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  @include media-breakpoint-up(lg) { 
      display: inline;
      margin-bottom: 0;  
  }
  .small {
    grid-column: -1/1;
    @include media-breakpoint-up(md) {
      text-align: right;
       grid-column: 1/3;
    } 
  }
  .btn:first-of-type {
    @include media-breakpoint-up(md) {
      grid-column: 3/6;
    } 
  }
  .btn:last-of-type {
    @include media-breakpoint-up(md) {
      grid-column: 6/9;
    } 
  }
  .btn:first-of-type:last-of-type {
    // this means there's only one button
    grid-column: 1 / -1;
    @include media-breakpoint-up(md) {
      grid-column: 3/9;
    } 
  }
}

.hide-large {
  @include media-breakpoint-up(lg) { 
    @include visually-hidden;
  }
}

.dboard-nav {
  .nav-link {
    color: $color-black;
    &:hover,
    &:active {
      background-color: $color-grey-light;
    }
    &.active {
      &:hover,
      &:active {
        background-color: $color-purple-dark;
      }
    }
  }
}
/* Layouts used for dashboard only. These don't use Bootstrap's layout system but share variables */

.dashboard-grid {
  display: grid;
  gap: $grid-gutter-width;
  > * {
    min-width: 0; /* without this we were seeing grid blowout */
  }
}

.three-equal-widgets {
  /* 
   * Three widgets, same size, one column each wide, one row each deep
   * | 1 | 2 | 3 |
   */
  display: grid;
  gap: $grid-gutter-width;
  @include media-breakpoint-up(md) { 
    grid-template-columns: repeat(2, 1fr);
    > .card:first-child {
      grid-column: span 2;
    }
  }
  @include media-breakpoint-up(lg) { 
    grid-template-columns: repeat(3, 1fr);
    > .card:first-child {
      grid-column: span 1;
    }
  }
}

.four-equal-widgets {
  /* 
   * Four widgets, same size, one column each wide, one row each deep
   * | 1 | 2 | 3 | 4 |
   */
  display: grid;
  gap: $grid-gutter-width;
  @include media-breakpoint-up(md) { 
    grid-template-columns: repeat(2, 1fr);
    > .card:first-child {
      grid-column: span 2;
    }
  }
  @include media-breakpoint-up(lg) { 
    grid-template-columns: repeat(4, 1fr);
    > .card:first-child {
      grid-column: span 1;
    }
  }
}

.full-width-widget {
  grid-template-columns: 1;
}

.two-thirds-widgets {
  /* 
   * Two widgets of different widths, split into 1/3 and 2/3, one row each deep.
   * | 1 |  2   |
   * The largest widget is the one with the class .two-thirds-widgets__large
   * It uses source order 
   */
  display: grid;
  gap: $grid-gutter-width;
  grid-template-columns: 1fr;
  @include media-breakpoint-up(md) { 
    grid-template-columns: repeat(3, 1fr);
    .two-thirds-widgets__large {
      grid-column: span 2;
    }
  }
}

.two-thirds-widget-group {
  /* 
   * Three widgets of different widths, split into 1/3 and 2/3
   * Two small widgets one row deep stacked on the left, a large widget 2x2 on the right
   * | 1 |  3  |
   * | 2 |     |
   * The largest widget is the one with the class .two-thirds-widgets__large
   * It uses source order 
   */
  display: grid;
  gap: $grid-gutter-width;
  grid-template-columns: 1fr;
  @include media-breakpoint-up(md) { 
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    
    /* Make the large card span the full width */
    .two-thirds-widget-group__large {
      grid-column: 1 / -1; /* Spans from first to last column line */
    }
  }
  @include media-breakpoint-up(lg) { 
    /* subtract 2 gaps (just like the 3-col layout) then split by 3
    if we don't do this the vertical lines of the grid DON'T LINE UP
    Thanks maths
    */
    grid-template-columns: minmax(0, calc((100% - 2 * #{$grid-gutter-width}) / 3)) 2fr;
    grid-template-rows: repeat(2, auto);
    .two-thirds-widget-group__small:nth-of-type(1) {
      grid-column: 1;
      grid-row: 1;
    }
    /* Second small card in bottom-left */
    .two-thirds-widget-group__small:nth-of-type(2) {
      grid-column: 1;
      grid-row: 2;
    }
    /* Large card spans both rows on the right */
    .two-thirds-widget-group__large {
      grid-column: 2;
      grid-row: 1 / span 2; /* Start at row 1 and span 2 rows */
    }
  }

  &--reverse {
    @include media-breakpoint-up(lg) {
     /*
      * Reverses the layout, stacks the small widgets on the right
      * |  3  | 1 |
      * |     | 2 |
      */
      grid-template-columns: 2fr minmax(0, calc((100% - 2 * #{$grid-gutter-width}) / 3));
      .two-thirds-widget-group__large {
        grid-column: 1;
        grid-row: 1 / span 2;
      }
      .two-thirds-widget-group__small:nth-of-type(1) {
        grid-column: 2;
        grid-row: 1;
      }
      .two-thirds-widget-group__small:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
      }
    }
  }
}

.one-third-widget-group {
  /* 
   * Three widgets of different widths, split into 1/3 and 2/3
   * One widget 1x2 on the left, two widgets 2x1 stacked on the right
   * | 1 |  2  |
   * |   |  3  |
   * The largest widget is the one with the class .two-thirds-widgets__large
   * It doesn't use source order 
   */
  display: grid;
  gap: $grid-gutter-width;
  grid-template-columns: 1fr;
  
  @include media-breakpoint-up(md) { 
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    /* Make the large card span the full width on medium screens */
    .one-third-widget-group__large {
      grid-column: 1 / -1;
    }
  }
  
  @include media-breakpoint-up(lg) { 
    /* subtract 2 gaps (just like the 3-col layout) then split by 3
    if we don't do this the vertical lines of the grid DON'T LINE UP
    Thanks maths
    */
    grid-template-columns: minmax(0, calc((100% - 2 * #{$grid-gutter-width}) / 3)) 2fr;
    grid-template-rows: repeat(2, auto);
    /* Large card spans both rows on the left */
    .one-third-widget-group__large {
      grid-column: 1;
      grid-row: 1 / span 2; /* Start at row 1 and span 2 rows */
    }
    /* First small card in top-right */
    .one-third-widget-group__small:nth-of-type(1) {
      grid-column: 2;
      grid-row: 1;
    }
    /* Second small card in bottom-right */
    .one-third-widget-group__small:nth-of-type(2) {
      grid-column: 2;
      grid-row: 2;
    }
  }
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: auto; /* Adjust as needed */
  position: relative;
  min-height: 200px; /* Fallback for SSR */
  aspect-ratio: 16/9; /* Modern aspect control */
  canvas {
    max-width: 100%;
    height: auto;
  }
}

.chart-wrapper--shallow {
  aspect-ratio: 10/2; /* Modern aspect control */
}

.project-logo {
  max-width: 100px;
  border-radius: 8px;
  padding: 0.25rem;
  background-color: $color-white;
  @include media-breakpoint-up(md) { 
    max-width: 100%;
  }
  @include media-breakpoint-up(lg) { 
    padding: 0.5rem;
  }
}

/* We use chart.js for all charts, except this simple horizontal stacked bar graph */
.stacked-bar {
  display: flex;
  width: 100%;
  height: 0.333rem;
  background: transparent;
  overflow: hidden;
}

.segment {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w);
  color: #fff;
}

.seg-a { background: $color-orange-dark; }
.seg-b { background: $color-green-dark; }
.seg-c { background: $color-purple; }
.seg-d { background: $color-orange-light; }

.graph-key {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.graph-key__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dot {
  display: inline-block;
  width: 1rem;
  min-width: 1rem; //stop it from going oval on small widths
  height: 1rem;
  border-radius: 50%;
}

.dot-a {
  background-color: $color-orange-dark;
}

.dot-b {
  background-color: $color-green-dark;
}

.dot-c {
  background-color: $color-purple-dark;
}

.dot-d {
  background-color: $color-orange-light;
}

.dboard-collection-bar {
  .container {
    border-bottom: 3px solid $color-purple;
  }
}

a.project-badge {
  text-decoration: none;
  &:hover,
  &:active,
  &:focus {
    color: $color-white !important;
    background-color: $color-purple !important;
  }
}

/* Generic homepages */

.generic-home__hero {
  .lead {
    max-width: 42rem;
  }
}

.generic-home__hero__para {
  max-width: 44ch;
}

.generic-home__hero--center {
  text-align: center;
  .lead {
    margin: 0 auto;
  }
}

.generic-home__hero--left {
  
}

.generic-home__benefits {
  p {
    @include media-breakpoint-up(lg) {
      max-width: 32ch;
    }
  }
}

.generic-home__ecosystems-banner {

  padding-bottom: 300px;
  padding-top: 3rem;

  background-image: asset-url('advisories-screen.png');
  background-size: 426px 270px; //25%
  background-repeat: no-repeat;

  background-position-x: 50%;
  background-position-y: 107%;

  @include media-breakpoint-up(md) {
    background-size: 852px 540px; //50%
    background-position-y: 220%;
  }

  @include media-breakpoint-up(lg) {
    background-position-x: calc(50% + 440px);
    background-position-y: 4rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.scrollable-window {
  max-height: 28rem;
}

.scrollable-window--vulnerability-list {

}