/* ============================================================
   CCW Portal — Forms
   ============================================================ */

.ccw-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Field Group ──────────────────────────────────────────── */
.ccw-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ccw-field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.ccw-field--row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

/* ── Label ────────────────────────────────────────────────── */
.ccw-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ccw-label__required {
  color: var(--color-error);
  font-size: var(--text-xs);
}

/* ── Base Input ───────────────────────────────────────────── */
.ccw-input,
.ccw-textarea,
.ccw-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  line-height: var(--line-height-normal);
}

.ccw-input::placeholder,
.ccw-textarea::placeholder {
  color: var(--color-text-placeholder);
}

/* Focus */
.ccw-input:focus,
.ccw-textarea:focus,
.ccw-select:focus {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

/* Hover */
.ccw-input:hover:not(:focus):not(:disabled),
.ccw-textarea:hover:not(:focus):not(:disabled),
.ccw-select:hover:not(:focus):not(:disabled) {
  border-color: var(--color-border-strong);
}

/* Disabled */
.ccw-input:disabled,
.ccw-textarea:disabled,
.ccw-select:disabled {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Read-only */
.ccw-input:read-only,
.ccw-textarea:read-only {
  background-color: var(--color-bg-tertiary);
  cursor: default;
}

/* Error state */
.ccw-input--error,
.ccw-textarea--error,
.ccw-select--error {
  border-color: var(--color-error);
}

.ccw-input--error:focus,
.ccw-textarea--error:focus,
.ccw-select--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* ── Textarea ─────────────────────────────────────────────── */
.ccw-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--line-height-relaxed);
}

.ccw-textarea--lg {
  min-height: 200px;
}

/* ── Select ───────────────────────────────────────────────── */
.ccw-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

/* ── Character Counter ────────────────────────────────────── */
.ccw-field__counter {
  display: flex;
  justify-content: flex-end;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.ccw-field__counter--warning {
  color: var(--color-warning);
}

.ccw-field__counter--error {
  color: var(--color-error);
}

/* ── Help Text ────────────────────────────────────────────── */
.ccw-field__help {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--line-height-snug);
}

/* ── Error Message ────────────────────────────────────────── */
.ccw-field__error {
  font-size: var(--text-xs);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  line-height: var(--line-height-snug);
}

/* ── Checkbox & Radio ─────────────────────────────────────── */
.ccw-check-group,
.ccw-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ccw-check-group--inline,
.ccw-radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.ccw-check,
.ccw-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.ccw-check input[type="checkbox"],
.ccw-radio input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.ccw-radio input[type="radio"] {
  border-radius: var(--radius-full);
}

.ccw-check input[type="checkbox"]:checked,
.ccw-radio input[type="radio"]:checked {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.ccw-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.ccw-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: white;
}

.ccw-check input[type="checkbox"]:focus-visible,
.ccw-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.ccw-check__label,
.ccw-radio__label {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.ccw-check__sublabel,
.ccw-radio__sublabel {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

/* ── Toggle / Switch ──────────────────────────────────────── */
.ccw-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.ccw-toggle__track {
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
  position: relative;
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.ccw-toggle input[type="checkbox"] {
  display: none;
}

.ccw-toggle input[type="checkbox"]:checked + .ccw-toggle__track {
  background-color: var(--color-brand-primary);
}

.ccw-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background-color: white;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.ccw-toggle input[type="checkbox"]:checked ~ .ccw-toggle__track .ccw-toggle__thumb,
.ccw-toggle input[type="checkbox"]:checked + .ccw-toggle__track .ccw-toggle__thumb {
  transform: translateX(18px);
}

.ccw-toggle__label {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

/* ── File Upload ──────────────────────────────────────────── */
.ccw-file-upload {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.ccw-file-upload:hover,
.ccw-file-upload--dragover {
  border-color: var(--color-brand-primary);
  background-color: var(--color-brand-primary-light);
}

.ccw-file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.ccw-file-upload__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-3);
  color: var(--color-text-tertiary);
}

.ccw-file-upload__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.ccw-file-upload__text strong {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
}

.ccw-file-upload__hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.ccw-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ccw-file-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.ccw-file-item__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.ccw-file-item__size {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.ccw-file-item__remove {
  width: 20px;
  height: 20px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.ccw-file-item__remove:hover {
  color: var(--color-error);
  background-color: var(--color-error-bg);
}

/* ── Form Section ─────────────────────────────────────────── */
.ccw-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ccw-form-section__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* ── Anonymous Banner ─────────────────────────────────────── */
.ccw-anon-banner {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-brand-primary-light);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
}

.ccw-anon-banner__icon {
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

.ccw-anon-banner__content {
  flex: 1;
}

.ccw-anon-banner__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-1);
}

.ccw-anon-banner__text {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ── Form Actions ─────────────────────────────────────────── */
.ccw-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.ccw-form-actions--start {
  justify-content: flex-start;
}

.ccw-form-actions--space {
  justify-content: space-between;
}

/* ── Input with Icon ──────────────────────────────────────── */
.ccw-input-wrap {
  position: relative;
}

.ccw-input-wrap .ccw-input {
  padding-left: var(--space-8);
}

.ccw-input-wrap--right .ccw-input {
  padding-left: var(--space-3);
  padding-right: var(--space-8);
}

.ccw-input-wrap__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.ccw-input-wrap--right .ccw-input-wrap__icon {
  left: auto;
  right: var(--space-3);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .ccw-field--row,
  .ccw-field--row-3 {
    grid-template-columns: 1fr;
  }
}