@layer normalize, theme, global, component, util;

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap') layer(theme);
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined') layer(theme);
@import url('https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.css') layer(theme);
@import url('https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css') layer(theme);
@import url('https://unpkg.com/easymde/dist/easymde.min.css') layer(theme);
@import url("./components/tab.e42f752a7489.css");
@import url("./components/search-input.2a6d52bad06a.css");
@import url("./preflight.ddc9f537c26c.css") layer(normalize);

@layer theme {
  :root {
    --breakpoint-desktop: 768px;

    color-scheme: light;

    --color-primary-purple: #572992;
    --color-body-background: light-dark(#F9F9FB, #161618);
    --color-sidebar-background: light-dark(white, #222124);
    --color-sidebar-section-header: light-dark(#979797, #89818D);
    --color-sidebar-item-text: light-dark(#89818D, #E0E0E0);
    --color-sidebar-item-selected-text: light-dark(#572992, white);
    --color-sidebar-item-selected-background: light-dark(#5729921A, #8989891A);
    --color-table-text: light-dark(#391369, white);
    --color-table-text: light-dark(#391369, white);
    --color-main-header-title: light-dark(#391369, #F4F4F4);
    --color-main-header-subtitle: light-dark(#57299280, #81818180);
    --color-section-header: light-dark(#572992, white);
    --color-btn-text: #572992;
  }
}

@layer global {

  .htmx-indicator {
    opacity: 0;
    visibility: hidden;
  }

  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-in;
  }

  /* add custom chevron */
  .ts-wrapper:not(.multi) > .ts-control, /* this only targets tom-select elements that select one item */
  select {
    appearance: none;
    background-image: url("../dropdown_chevron.aa4b83759ee9.svg");
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 24px;
  }



}

@layer util {
  
}

@layer component {
  .application-sidebar {
    background-color: var(--color-sidebar-background);
    display: none;

    /* make the navigation sidebar fill up the entire screen, as well as
   never move when scrolling */
    position: fixed;
    inset: 0;

    /* it's above all other elements */
    z-index: 50;
    flex-direction: column;

    /* on desktop, it should be visible at all times */
    @media (width >= 768px) {
      width: 18rem;
      display: flex;

      /* this unbinds it from the rightmost side of the screen */
      right: auto;
      padding: 1.62rem;
    }

    &.-open {
      display: flex;
    }
  }

  .sidebar-navigation {
    & > .navigation-section {
      margin-bottom: 2.38rem;
    }
  }

  .navigation-section {
  }

  /* a */.navigation-item {
    padding: 1.06rem 0.94rem;
    border-radius: 0.6875rem;
    color: var(--color-sidebar-item-text);
    text-decoration: none;
    display: flex;
    items-align: center;

    & > .icon {
      margin-right: 1rem;
      font-size: 1.25rem !important;
    }

    &.-selected {
      color: var(--color-sidebar-item-selected-text);
      background-color: var(--color-sidebar-item-selected-background);
    }
  }

  .main-content {
	 min-height: 100dvh
    overflow: hidden scroll;
    
    padding: 0 0.5rem;
    padding-bottom: 3.1rem;
    
    @media (width >= 768px) {
      padding: 3.1rem;
      margin-left: 18rem;
    }
  }

  .main-header {
    margin-bottom: 2.25rem;
    
    & > .header-title {
      display: flex;
      gap: 1rem;
    }
    
    & > .header-title > .title {
      all: unset;
      display: block;
      font-size: 2.4375rem;
      font-weight: 600;
      line-height: 1;
      color: var(--color-main-header-title);
    }

    & > .subtitle {
      all: unset;
      display: flex;
      gap: 0.38rem;
      align-items: center;
      margin-top: 0.94rem;
      font-size: 1.1875rem;
      color: var(--color-main-header-subtitle);

      > svg {
        fill: var(--color-main-header-subtitle);
        stroke: var(--color-main-header-subtitle);
      }
    }
  }


  .main-actions {
    float: right;
    display: flex;
    align-items: center;
    gap: 2.3rem;
  }

  .data-title {
    font-size: 1.0625rem;
    color: var(--color-section-header);
    text-transform: uppercase;
    font-weight: 500;

    &.-small {
      font-size: 0.8125rem;
    }
  }

  .details-entry {
    > .data {
      color: #ACA7AF;
      font-size: 0.875rem;
    }

    > .data-title {
      margin-bottom: 0.5rem;
      
      &.data-title--spaced-between {
        display: flex;
        justify-content: spaced-between;
      }
    }
  }

  .details-entry__data-title-container {
    margin-bottom: 0.5em;
    
    &.details-entry__data-title-container--spaced-between {
      display: flex;
      justify-content: space-between;
      align-items: end;
    }
  }


  .submission-warnings {
    background-color: #FDEDDA;
    color: #E6AD48;
    border: 1px solid #E6AD48;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    padding: 1.13rem 1.25rem;
    margin-bottom: 1.44rem;
    
    p {
      margin-bottom: 1em;
    }

    > .title {
      display: flex;
      gap: 0.44rem;
      align-items: center;
      margin: 0;
      font-size: 0.8125rem;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1em;

      > .icon {
        font-size: 1.0625rem !important;
      }
    }

    > .list {
      padding-left: 1.25rem;
      list-style: disc;
    }
  }

  .timeline-container {
    padding-top: 1.4rem;
    
    > .data-title {
      margin-bottom: 1.6em;
    }

    > .list {
      display: flex;
      flex-direction: column;
      gap: 0.82rem;
    }
  }


  .dff-upload {
    border: 0;
  }

  .dff-container {
    border: 0;
	 display: block;

    > input {
      border: 0;
    }

    > .dff-files {
      border-radius: 0.6875rem;
      height: 5.4rem;
      border: 1px dashed #D9D9D9;
      outline: 0 !important;
      display: flex;
      justify-content: center;
      align-items: center;
      
      > .dff-drop-hint {
        color: #89818D;
        font-size: 0.6875rem;
      }
    }
  }

  #partner-management-container,
  .partner-management-container {
    margin-top: 0.825rem;
    display: flex;
    flex-direction: column;
    gap: 0.825rem;
  }
  
  .partner-shares {
    &.-hidden {
      display: none;
    }
  }

  #share-visualization {
    &.-hidden {
      display: none;
    }
  }


  #share-error {
    &.-hidden {
      display: none;
    }
  }

  .button-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
  }

  .tom-select-item {
    &.-creator {
      color: #ACA7AF;
      cursor: not-allowed;

      > .remove {
        cursor: not-allowed;
      }
    }
    
    > .subtext {
      font-size: 0.625rem;
      margin-left: 0.2rem;
    }
  }

  .number-input {
    display: flex;
    gap: 0.2rem;
    align-items: center;
  }

  .legend-container {
    display: flex;
    gap: 1rem;
  }

  .share-bar {
    display: flex;
    overflow: hidden;
    border-radius: 0.625rem;
    
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.625rem;
      height: 2em;
      
      &:nth-child(1) {
        background-color: #572992;
      }
      
      &:nth-child(2) {
        background-color: #391369;
      }
      
      &:nth-child(3) {
        background-color: #89818D;
      }
      
      &:nth-child(4) {
        background-color: #353535;
      }
    }
  }

  .legend-item {
    display: flex;
    gap: 0.2rem;
    align-items: center;

    &:nth-child(1) {
      > .indicator {
        background-color: #572992;
      }
    }

    &:nth-child(2) {
      > .indicator {
        background-color: #391369;
      }
    }
    
    &:nth-child(3) {
      > .indicator {
        background-color: #89818D;
      }
    }
    
    &:nth-child(4) {
      > .indicator {
        background-color: #353535;
      }
    }
    
    > .indicator {
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 100%;

      &:nth-child(1) {
        
      }
    }

    > .name {
      font-size: 0.625rem;
    }
  }


  .payment-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .radio-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  

  .errorlist {
    color: #F72D40;
    font-size: 0.8125rem;
    margin-bottom: 0.8125rem;

    &.nonfield {
      padding: 1.13rem 1.25rem;
      background-color: #FADBDD;
      border: 1px solid #F72D40;
      border-radius: 0.25rem;
    }
  }

  fieldset > #id_partner-approved_content_types,
  #id_content_types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    row-gap: 0;
  }

  .content-type-option {
    border: 1px solid var(--color-table-border);
    padding: 0.75rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &:hover {
      cursor: pointer;
      box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    }

    &:has(.content-type-option__input:checked) {
      border: 1px solid #572992;
      box-shadow: 0 1px 3px 0 #5729921a, 0 1px 2px -1px #5729921a;
      background-color: #57299224;
    }

    > .content-type-option__input {
      display: none;
    }
  }

  .delete-partner-modal {
    .delete-partner-modal__description-header,
    .delete-partner-modal__description,
    .delete-partner-modal__list {
      color: #89818D;
    }
    
    .delete-partner-modal__description,
    .delete-partner-modal__list {
      margin-bottom: 1.25rem;
    }
    
    .delete-partner-modal__description {
      font-size: 0.8125rem;
    }
    
    .delete-partner-modal__list {
      font-size: 0.8125rem;
      padding-left: 1em;
      list-style: disc;
    }
  }
}