#phonogram-list-page {
  padding: 2em;
}

@scope (#phonogram-list-page.phonogram-v2) {
  h1 {
    margin: 0;
  }

  .card {
    margin: 2em auto 0;
    max-width: 1320px;
  }

  #partyselect-container {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }

  .card-actions-container {
    display: flex;
    gap: 1em;
  }

  #myphonograms-header {
    margin-top: 3em;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
  }

  #myphonograms-header > h2 {
    margin: 0;
  }

  #search-container {
    display: flex;
    gap: 1em;
  }

  #search-container .sort-wrapper {
    display: flex;
    align-items: center;
  }

  #search-container .sort-label {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: normal;
    margin: 0 0.5em 0 0;
  }

  #phonograms-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  @scope (#phonograms-container) {
    .phonogram-card {
      background: #ffffff0d;
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .phonogram-card .card-header-container h3 {
      color: white;
      padding: 0;
    }

    .status-badge {
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid #ffffff29;
      display: inline-flex;
      gap: 6px;
      align-items: center;
    }

    .status-badge--draft {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }
    .status-badge--sent {
      background: rgba(76, 175, 80, 0.12);
      color: #c8e6c9;
      border-color: rgba(76, 175, 80, 0.25);
    }

    .status-badge--rejected {
      background: rgba(255, 86, 86, 0.18);
      color: #ffb3b3;
      border-color: rgba(255, 86, 86, 0.32);
    }

    .phonogram-details-container label {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: normal;
    }

    .phonogram-details-container span {
      font-size: 12px;
      font-weight: normal;
      margin-right: 1em;
    }

    .actions-container {
      margin-top: 1em;
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 1em;
    }

    .actions-container span {
      color: var(--text-muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .actions-container *:last-child {
      margin-left: auto;
    }

    @scope (#rejection-container) {
      input[type="checkbox"] {
        display: none;
      }

      .rejection-toggle {
        font-size: 13px;
        color: #ffcccc;
        cursor: pointer;
      }

      .rejection-box-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      }

      input[type="checkbox"]:checked ~ .rejection-box-wrapper {
        grid-template-rows: 1fr;
      }

      .rejection-box {
        background: rgba(255, 86, 86, 0.1);
        border-left: 3px solid rgba(255, 86, 86, 0.6);
        border-radius: 6px;
        font-size: 13px;
        color: #ffcccc;
        overflow: hidden;
      }

      .rejection-box-content {
        padding: 10px 12px;
      }
    }

    #pagination-container {
      display: flex;
    }

    @scope (#pagination-container) {
      .pages-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 0 auto;
      }

      .page-size-container {
        display: flex;
        align-items: center;
        margin-left: auto;
      }

      .current-page {
        background: rgba(255, 255, 255, 0.14);
      }

      span,
      label {
        color: var(--text-muted);
        font-size: 12px;
        font-weight: normal;
        white-space: nowrap;
        margin: 0;
        margin-right: 0.5em;
      }

      select {
        padding: 8px 36px 8px 12px;
        font-size: 12px;
      }

      .select-wrapper::before {
        right: 30px;
      }

      .select-wrapper::after {
        right: 13px;
      }

      button {
        font-size: 12px;
        padding: 7px 10px;
        margin: 0 0.15em;
      }

      button:first-child,
      button:last-of-type {
        color: var(--text-muted);
        margin: 0 0.3em;
      }
    }

    @media screen and (max-width: 800px) {
      .phonogram-details-container {
        display: grid;
        grid-template-columns: auto 2fr auto 2fr;
        column-gap: 0.5em;
      }

      #pagination-container .page-size-container {
        display: none;
      }
    }

    @media screen and (max-width: 600px) {
      .phonogram-details-container {
        grid-template-columns: repeat(2, auto);
      }

      #pagination-container span {
        display: none;
      }
    }
  }

  @media screen and (max-width: 1100px) {
    #search-container {
      flex-wrap: wrap;
    }

    #search-container > *:last-child {
      margin-left: auto;
    }
  }

  @media screen and (max-width: 730px) {
    #search-container {
      flex-direction: column;
    }

    #search-container > *:last-child {
      margin-left: 0;
    }
  }

  @media screen and (min-width: 731px) {
    #search-container .select-wrapper {
      min-width: 150px;
      max-width: 150px;
    }  
  }  

  @media screen and (min-width: 900px) {
    #partyselect-container .select-wrapper {
      width: 50%;
    }
    .card.producer-information > .card-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}