@layer screens {
/* Task submission form (new submission) */
.task-submission-form {
  margin-bottom: var(--spacing-6);
}

.task-submission-form header {
  margin-bottom: var(--spacing-6);
}

.task-submission-form header h1 {
  margin-bottom: var(--spacing-2);
}

.task-submission-form .task-info {
  padding: var(--spacing-3);
  background-color: var(--surface-sunken);
  border-radius: var(--radius);
  margin-top: var(--spacing-3);
}

.task-submission-form .task-info h2 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-2);
}

.task-submission-form .task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.task-submission-form .meta-item {
  display: flex;
  flex-direction: column;
}

.task-submission-form .meta-label {
  font-size: var(--font-size-sm);
  color: var(--text-subtle);
}

.task-submission-form .meta-value {
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.task-submission-form .form-section {
  margin-bottom: var(--spacing-6);
}

.task-submission-form .form-section h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: var(--border-width) solid var(--border);
}

.task-submission-form .form-instructions {
  margin-bottom: var(--spacing-3);
  color: var(--text-muted);
}

.task-submission-form .media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.task-submission-form .media-item {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.task-submission-form .media-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.task-submission-form .trix-editor-container {
  margin-bottom: var(--spacing-4);
}

.task-submission-form .trix-button-row {
  font-size: var(--font-size-sm);
}

.task-submission-form trix-editor {
  min-height: 200px;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-2);
}

.task-submission-form trix-editor:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 2px var(--blue-100);
}

.task-submission-form .attachments-section {
  margin-bottom: var(--spacing-4);
}

.task-submission-form .attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-3);
  margin-top: var(--spacing-3);
}

.task-submission-form .attachment-item {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-submission-form .attachment-preview {
  height: 150px;
  background-color: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-submission-form .attachment-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.task-submission-form .attachment-preview .file-icon {
  font-size: var(--font-size-2xl);
  color: var(--text-muted);
}

.task-submission-form .attachment-info {
  padding: var(--spacing-2);
}

.task-submission-form .attachment-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-submission-form .attachment-size {
  font-size: var(--font-size-xs);
  color: var(--text-subtle);
}

.task-submission-form .attachment-actions {
  padding: var(--spacing-2);
  border-top: var(--border-width) solid var(--border);
  display: flex;
  justify-content: space-between;
}

.task-submission-form .attachment-actions button {
  padding: var(--spacing-1);
  font-size: var(--font-size-sm);
  min-height: var(--tap-min);
}

.task-submission-form .upload-area {
  border: var(--border-width-thick) dashed var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.task-submission-form .upload-area:hover {
  border-color: var(--brand);
  background-color: var(--surface-sunken);
}

.task-submission-form .upload-area p {
  margin: 0;
  color: var(--text-muted);
}

.task-submission-form .upload-area input[type="file"] {
  display: none;
}

/* Task submission review (approve/reject pages) */
.task-submission-review header {
  margin-bottom: var(--spacing-6);
}

.task-submission-review header h1 {
  margin-bottom: var(--spacing-2);
}

.task-submission-review .submission-meta,
.task-submission-review .task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-top: var(--spacing-3);
}

.task-submission-review .meta-item {
  display: flex;
  flex-direction: column;
}

.task-submission-review .meta-label {
  font-size: var(--font-size-sm);
  color: var(--text-subtle);
}

.task-submission-review .meta-value {
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.task-submission-review .task-details {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.task-submission-review .task-description {
  margin-top: var(--spacing-3);
  color: var(--text);
}

.task-submission-review .submission-content,
.task-submission-review .submission-attachments {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: var(--border-width) solid var(--border);
}

.task-submission-review .submission-content h2,
.task-submission-review .submission-attachments h2,
.task-submission-review .submission-signature h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: var(--border-width) solid var(--border);
}

.task-submission-review .attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-3);
}

.task-submission-review .attachment-item {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-submission-review .attachment-preview {
  height: 150px;
  background-color: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-submission-review .attachment-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.task-submission-review .attachment-preview .file-icon {
  font-size: var(--font-size-2xl);
  color: var(--text-muted);
}

.task-submission-review .attachment-info {
  padding: var(--spacing-2);
}

.task-submission-review .attachment-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-submission-review .attachment-actions {
  padding: var(--spacing-2);
  border-top: var(--border-width) solid var(--border);
  text-align: center;
}

.task-submission-review .attachment-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  color: var(--brand);
}

.task-submission-review .submission-signature {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: var(--border-width) solid var(--border);
}

.task-submission-review .signature-image {
  max-width: 300px;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-2);
}

.task-submission-review .review-form {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-top: var(--spacing-4);
}

.task-submission-review .review-form h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-3);
  color: var(--text);
}

.task-submission-review .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

/* Approval / rejection forms */
.approval-form .approval-message,
.rejection-form .rejection-reason {
  margin-bottom: var(--spacing-4);
}

.approval-form .form-actions,
.rejection-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-3);
}
}