frontend/src/scss/page/assignment.scss

// Assignment Page Styling

.assignment-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;

  section {
    width: 100%;
    max-width: 900px;
  }

  .assignment-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;

    h2 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #ffffff;
    }

    .due-date {
      color: #c6c6c6;
      font-size: 1.2rem;
    }
  }

  .assignment-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;

    .assignment-info {
      margin-bottom: 2rem;

      h3 {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
        color: #333;
      }

      .files-count {
        font-size: 1rem;
        margin-bottom: 0.5rem;
      }

      .submission-note {
        font-size: 0.9rem;
        color: #666;
      }
    }

    .file-upload-section {
      margin-bottom: 2rem;

      .upload-buttons {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;

        .file-upload-btn,
        .record-audio-btn,
        .record-video-btn {
          background-color: #f5f5f5;
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 0.6rem 1rem;
          cursor: pointer;
          font-size: 0.9rem;
          transition: all 0.2s ease;
          color: #333;

          &:hover {
            background-color: #e9e9e9;
          }
        }
      }

      .files-list {
        background-color: #f9f9f9;
        border-radius: 6px;
        padding: 1rem;

        h4 {
          margin-bottom: 0.8rem;
          font-size: 1rem;
        }

        ul {
          list-style: none;
          padding: 0;

          .file-item {
            display: flex;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #eee;

            &:last-child {
              border-bottom: none;
            }

            .file-name {
              flex-grow: 1;
              font-weight: 500;
            }

            .file-size {
              color: #777;
              margin: 0 1rem;
              font-size: 0.8rem;
            }

            .remove-file-btn {
              background-color: transparent;
              border: none;
              color: #ff5252;
              cursor: pointer;
              font-size: 0.8rem;
              padding: 0.3rem 0.6rem;

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

    .comments-section {
      margin-bottom: 2rem;

      h4 {
        margin-bottom: 0.8rem;
        font-size: 1rem;
      }

      textarea {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 0.8rem;
        font-family: inherit;
        resize: vertical;

        &:focus {
          outline: none;
          border-color: #4a90e2;
        }
      }
    }

    .submission-buttons {
      display: flex;
      gap: 1rem;

      .submit-btn,
      .cancel-btn {
        padding: 0.7rem 1.5rem;
        border-radius: 4px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .submit-btn {
        background-color: #4a90e2;
        color: white;
        border: none;

        &:hover {
          background-color: #3a7bc8;
        }

        &:disabled {
          background-color: #a0c3e8;
          cursor: not-allowed;
        }
      }

      .cancel-btn {
        background-color: transparent;
        border: 1px solid #ddd;
        color: #666;

        &:hover {
          background-color: #f5f5f5;
        }
      }
    }
  }
}