/* CV Markdown Editor Component */
/* File: frontend/spa/styles/components/cv-markdown-editor.css */

.cv-markdown-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
}

/* Loading State */
.cv-markdown-editor__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: var(--spacing-8);
  gap: var(--spacing-4);
}

.cv-markdown-editor__loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-subtle);
  border-top-color: var(--interactive-primary);
  border-radius: 50%;
  animation: cv-editor-spin 0.8s linear infinite;
}


@keyframes cv-editor-spin {
  to {
    transform: rotate(360deg);
  }
}

.cv-markdown-editor__loading-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Error State */
.cv-markdown-editor__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: var(--spacing-8);
  gap: var(--spacing-2);
  color: var(--status-error);
}

.cv-markdown-editor__error i {
  font-size: 48px;
  margin-bottom: var(--spacing-2);
}

.cv-markdown-editor__error-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cv-markdown-editor__error-message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Header */
.cv-markdown-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: var(--surface-background);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--spacing-4);
}

.cv-markdown-editor__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* Mode Switcher */
.cv-markdown-editor__mode-switcher {
  display: flex;
  gap: var(--spacing-1);
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 2px;
}

.cv-markdown-editor__mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cv-markdown-editor__mode-btn:hover:not(:disabled) {
  background: var(--interactive-hover);
  color: var(--text-primary);
}

.cv-markdown-editor__mode-btn--active {
  background: var(--interactive-primary);
  color: var(--text-on-primary);
}

.cv-markdown-editor__mode-btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Validation Status */
.cv-markdown-editor__validation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.cv-markdown-editor__validation--valid {
  background: rgba(40, 167, 69, 0.1);
  color: var(--status-success);
}

.cv-markdown-editor__validation--invalid {
  background: rgba(220, 53, 69, 0.1);
  color: var(--status-error);
  cursor: pointer;
  user-select: none;
}

.cv-markdown-editor__validation--invalid:hover {
  background: rgba(220, 53, 69, 0.15);
  transform: translateY(-1px);
}

.cv-markdown-editor__validation--invalid:active {
  transform: translateY(0);
}

.cv-markdown-editor__validation--invalid:focus {
  outline: 2px solid var(--status-error);
  outline-offset: 2px;
}

/* Content Area */
.cv-markdown-editor__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-4);
  /* max-height: 600px;
  min-height: 400px; */
}

/* Structured Editor */
.cv-structured-editor {
  max-width: 900px;
  margin: 0 auto;
}

/* Sections */
.cv-section {
  margin-bottom: var(--spacing-4);
}

.cv-section__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

.cv-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
}

.cv-section__heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-2) 0;
}

.cv-section__add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-default);
  color: var(--interactive-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cv-section__add-btn:hover {
  background: var(--interactive-hover);
  border-color: var(--interactive-primary);
}

/* Fields */
.cv-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.cv-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.cv-field__input,
.cv-field__textarea {
  width: 95%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cv-field__input:focus,
.cv-field__textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cv-field__input:readonly,
.cv-field__textarea:readonly {
  background: var(--input-disabled-bg);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

.cv-field__textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--line-height-relaxed);
}

/* Lists */
.cv-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.cv-list__empty {
  padding: var(--spacing-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
  background: var(--surface-background);
  border: 1px dashed var(--border-subtle);
  border-radius: 4px;
  margin: 0;
}

.cv-list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.cv-list-item__input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cv-list-item__input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cv-list-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--status-error);
  font-size: var(--font-size-base);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.cv-list-item__remove:hover {
  background: rgba(220, 53, 69, 0.1);
}

/* Experience Items */
.cv-experience-item,
.cv-education-item {
  padding: var(--spacing-4);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--surface-background);
  margin-bottom: var(--spacing-4);
}

.cv-experience-item__header,
.cv-education-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
}

.cv-experience-item__title,
.cv-education-item__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.cv-experience-item__fields,
.cv-education-item__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.cv-experience-item__fields .cv-field:nth-child(3),
.cv-education-item__fields .cv-field:nth-child(3) {
  grid-column: 1 / -1;
}

/* Responsibilities */
.cv-responsibilities {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.cv-add-responsibility-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--border-subtle);
  background: transparent;
  color: var(--interactive-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cv-add-responsibility-btn:hover {
  background: var(--interactive-hover);
  border-color: var(--interactive-primary);
  border-style: solid;
}

/* Raw Markdown Editor */
.cv-raw-editor {
  height: 100%;
}

.cv-raw-editor .EasyMDEContainer {
  height: 100%;
}

.cv-raw-editor .CodeMirror {
  height: calc(100vh - 300px);
  min-height: 500px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
}

/* Validation Errors */
.cv-markdown-editor__errors {
  border-top: 1px solid var(--border-subtle);
  background: rgba(220, 53, 69, 0.05);
  padding: var(--spacing-4);
}

.cv-markdown-editor__errors-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--status-error);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-4);
}

.cv-markdown-editor__errors-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.cv-markdown-editor__error-item {
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--surface-default);
  border-left: 3px solid var(--status-error);
  border-radius: 4px;
}

.cv-markdown-editor__error-code {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--status-error);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-1);
}

.cv-markdown-editor__error-message {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--spacing-1);
}

.cv-markdown-editor__error-location {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
  .cv-markdown-editor__header {
    flex-direction: column;
    align-items: stretch;
  }

  .cv-markdown-editor__mode-switcher {
    order: -1;
  }

  .cv-experience-item__fields,
  .cv-education-item__fields {
    grid-template-columns: 1fr;
  }

  .cv-experience-item__fields .cv-field:nth-child(3),
  .cv-education-item__fields .cv-field:nth-child(3) {
    grid-column: auto;
  }
}

/* ============================================
   Responsive: Single-column mode (920px)
   Disable internal scroll, use natural height
   ============================================ */
@media (max-width: 920px) {
  .cv-markdown-editor {
    height: auto;
    overflow: visible;
  }

  .cv-markdown-editor__content {
    overflow: visible;
    max-height: none;
    min-height: auto;
  }

  /* Structured editor sections flow naturally */
  .cv-structured-editor {
    height: auto;
  }

  /* Raw editor needs a usable fixed height */
  .cv-raw-editor .CodeMirror {
    height: 400px;
    min-height: 300px;
  }
}