/*
 * Indivisible Volunteer Signup — Frontend (volunteer-facing) styles
 *
 * Covers: [ivs_form_list], [ivs_volunteer_opportunities], [ivs_signup_form],
 *         [ivs_published_assignments], [ivs_help], [ivs_test_page]
 *
 * Requires: indivisible-design-system.css (all containers use .ids-page)
 */

/* ============================================================
   1. Form list — card grid of open volunteer forms
   ============================================================ */
.ivs-form-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ids-space-md);
  padding: var(--ids-space-md) 0;

  & .ivs-form-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ids-space-md);
    text-decoration: none;
    background: var(--ids-surface-card);
    color: var(--ids-text-on-card);
    border: 1px solid var(--ids-border-card);
    border-radius: var(--ids-radius-md);
    padding: var(--ids-space-lg);
    cursor: pointer;
    transition:
      box-shadow var(--ids-transition-normal),
      transform var(--ids-transition-normal);

    &:hover {
      box-shadow: 0 4px 12px oklch(from var(--ids-color-background) l c h / 0.15);
      transform: translateY(-2px);
    }
  }

  & .ivs-form-title {
    font-size: var(--ids-font-size-md);
    font-weight: 600;
    color: var(--ids-text-on-card);
  }
}

/* ============================================================
   2. Volunteer opportunities — list of open forms
   ============================================================ */
.ivs-opportunity-list {
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.ivs-opportunity-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.ivs-opportunity-link {
  font-weight: 600;
}

.ivs-responded-indicator {
  font-size: 0.85em;
  font-weight: 600;
  color: oklch(from var(--ids-accent-success) l c h);
  background: oklch(from var(--ids-accent-success) calc(l + 0.35) calc(c * 0.3) h);
  padding: 0.1em 0.5em;
  border-radius: 4px;
}

.ivs-login-required-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  font-weight: 600;
  color: oklch(from var(--ids-accent-warning) l c h);
  background: oklch(from var(--ids-accent-warning) calc(l + 0.35) calc(c * 0.3) h);
  padding: 0.25em 0.6em;
  border-radius: 4px;
  text-align: center;
  line-height: 1.2;
}

.ivs-login-required-indicator::after {
  content: "\1F512";
  font-size: 1.2em;
}

/* ============================================================
   3. Signup form — dark container, light-field inputs
   ============================================================ */
.ivs-signup-form {
  max-width: 640px;
  margin: 0 auto;

  & .ids-banner {
    object-fit: contain;
  }
}

.ivs-signup-title {
  font-size: var(--ids-font-size-xl);
  color: var(--ids-text-on-dark);
  margin: 0 0 var(--ids-space-lg);
}

.ivs-preamble {
  margin-bottom: var(--ids-space-lg);
}

.ivs-signup-form-inner {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-lg);
}

/* Contact fields */
.ivs-contact-fields {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-md);

  & label {
    display: block;
    color: var(--ids-text-label);
    font-size: var(--ids-font-size-base);
    font-weight: 400;
  }

  & input {
    width: 100%;
  }
}

.ivs-contact-row {
  display: flex;
  gap: var(--ids-space-md);

  & > label {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Roles section */
.ivs-roles-section {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-sm);
}

.ivs-role-item {
  padding: var(--ids-space-sm) 0;

  & label {
    display: flex;
    align-items: center;
    gap: var(--ids-space-sm);
    color: var(--ids-text-on-dark);
    font-size: var(--ids-font-size-base);
    cursor: pointer;
  }

  & .ivs-role-checkbox {
    width: auto;
    accent-color: var(--ids-accent-primary);
    margin: 0;
    flex-shrink: 0;
  }
}

.ivs-assigned-badge {
  display: inline-block;
  font-size: var(--ids-font-size-sm);
  font-weight: 600;
  padding: 0.1em 0.5em;
  border-radius: var(--ids-radius-sm);
  background: oklch(from var(--ids-color-green-dark) l c h / 0.3);
  color: oklch(from var(--ids-color-green-dark) calc(l + 0.35) c h);
  margin-left: var(--ids-space-xs);
  vertical-align: middle;
}

/* Role extra fields — revealed when checkbox is checked */
.ivs-role-fields {
  margin-top: var(--ids-space-sm);
  padding: var(--ids-space-md);
  padding-left: calc(var(--ids-space-md) + 4px);
  border-left: 3px solid var(--ids-accent-primary);
  background: oklch(from var(--ids-surface-page) calc(l + 0.08) c h);
  border-radius: 0 var(--ids-radius-md) var(--ids-radius-md) 0;

  & label {
    display: block;
    color: var(--ids-text-on-dark);
    font-size: var(--ids-font-size-base);
    margin-bottom: var(--ids-space-sm);
  }

  & input:not([type="radio"]):not([type="checkbox"]):not([type="date"]) {
    width: 100%;
  }

  & label:has(input[type="date"]) {
    display: inline-block;
  }

  & fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }

  & fieldset legend {
    color: var(--ids-text-on-dark);
    font-size: var(--ids-font-size-base);
    margin-bottom: var(--ids-space-sm);
    padding: 0;
  }

  & fieldset label {
    display: flex;
    align-items: center;
    gap: var(--ids-space-sm);
    cursor: pointer;
  }
}

/* Success/error message */
.ivs-signup-message {
  padding: 12px var(--ids-space-md);
  border-radius: var(--ids-radius-sm);
  font-size: var(--ids-font-size-base);
  line-height: var(--ids-line-height);
  background: var(--ids-color-green-bg);
  color: var(--ids-color-green-dark);
  border: 1px solid var(--ids-accent-success);

  &.ivs-error {
    background: var(--ids-color-red-bg);
    color: var(--ids-color-red-dark);
    border-color: var(--ids-accent-danger);
  }
}

/* Submit button — layout only (ids-btn handles base styling) */
.ivs-signup-submit {
  align-self: flex-start;
}

/* ============================================================
   4. Published assignments — read-only list
   ============================================================ */
.ivs-published-assignments {
  max-width: 700px;
  margin: 0 auto;

  & .ivs-role {
    margin-bottom: var(--ids-space-lg);
    padding-bottom: var(--ids-space-md);
    border-bottom: 1px solid var(--ids-border-section);

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

  & .ivs-role-name {
    font-size: var(--ids-font-size-lg);
    color: var(--ids-text-on-dark);
    margin: 0 0 var(--ids-space-sm);
  }

  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-xs);
  }

  & .ivs-assigned-name {
    color: var(--ids-text-on-dark);
    padding: var(--ids-space-xs) var(--ids-space-sm);
    background: oklch(from var(--ids-surface-page) calc(l + 0.06) c h);
    border-radius: var(--ids-radius-sm);
    font-size: var(--ids-font-size-base);
  }
}

/* ============================================================
   5. Test page
   ============================================================ */
.ivs-test-page {
  & ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-sm);
  }

  & li {
    display: flex;
    align-items: center;
    gap: var(--ids-space-sm);
    flex-wrap: wrap;
  }

  & code {
    background: oklch(from var(--ids-surface-page) calc(l + 0.06) c h);
    padding: 2px 6px;
    border-radius: var(--ids-radius-sm);
    font-size: var(--ids-font-size-sm);
    color: var(--ids-text-muted);
  }
}

/* ============================================================
   6. Export links (shared between results and published assignments)
   ============================================================ */
/* Export links — layout only (ids-btn handles base styling on <a> tags) */
.ivs-export-links {
  display: flex;
  gap: var(--ids-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--ids-space-lg);
}

/* ============================================================
   7. Preview banner
   ============================================================ */
.ivs-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ids-space-sm) var(--ids-space-md);
  margin-bottom: var(--ids-space-md);
  background: var(--ids-color-gold-bg);
  color: var(--ids-color-gold-dark);
  border-radius: var(--ids-radius-sm);
  font-weight: 600;
  font-size: var(--ids-font-size-sm);
}

.ivs-back-to-editor {
  color: var(--ids-color-gold-dark);
  text-decoration: underline;
}

/* ============================================================
   8. Responsive
   ============================================================ */
@media (max-width: 640px) {
  .ivs-form-list {
    grid-template-columns: 1fr;
  }

  .ivs-signup-form {
    max-width: 100%;
  }

  .ivs-contact-row {
    flex-direction: column;
  }

  .ivs-signup-submit {
    width: 100%;
    text-align: center;
  }
}