/**
 * Component Library Bridge for Planner
 *
 * Maps component library CSS variables to planner design tokens.
 * This allows ws-* components to seamlessly integrate with planner styling.
 *
 * Import after components.css to override component defaults.
 */

/* ========================================
   AUTH MODAL OVERRIDES
   Use planner blue instead of mainsite red
   ======================================== */

:root {
  --ws-primary-red: var(--planner-primary);
  --ws-primary-red-dark: var(--planner-dark);
  --ws-auth-primary: var(--planner-primary);
  --ws-auth-primary-dark: var(--planner-dark);
  --primary: var(--planner-primary);
  --primary-hover: var(--planner-dark);
}

/* ========================================
   FOCUS STATE OVERRIDES
   Use planner blue instead of mainsite red
   ======================================== */

.workshop-planner .ws-input:focus,
.workshop-planner .ws-select:focus,
.workshop-planner textarea.ws-input:focus {
  border-color: var(--planner-primary);
  box-shadow: 0 0 0 3px var(--planner-very-light);
}

/* ========================================
   BUTTON OVERRIDES
   Primary buttons use planner gradient
   ======================================== */

.workshop-planner .ws-btn--primary {
  background: var(--planner-topbar-bg);
  border-color: transparent;
}

.workshop-planner .ws-btn--primary:hover:not(:disabled) {
  background: var(--planner-dark);
  transform: translateY(-1px);
  box-shadow: var(--planner-shadow);
}

.workshop-planner .ws-btn--primary .icon,
.workshop-planner .ws-btn--primary .ws-btn__icon,
.workshop-planner .ws-btn--primary svg {
  color: white;
  fill: white;
}

/* Template buttons - white icons */
.use-template-card-btn .icon,
.use-template-card-btn svg,
.template-use-btn .icon,
.template-use-btn svg {
  color: white !important;
  fill: white !important;
}

.workshop-planner .ws-btn--secondary {
  color: var(--planner-primary);
  border-color: var(--planner-primary);
}

.workshop-planner .ws-btn--secondary:hover:not(:disabled) {
  background: var(--planner-primary);
  color: white;
}

/* ========================================
   INPUT STYLING
   Match planner form styling
   ======================================== */

.workshop-planner .ws-input,
.workshop-planner .ws-select {
  border-radius: var(--planner-radius);
  border-color: var(--planner-border);
}

.workshop-planner .ws-input:hover:not(:disabled):not(:focus),
.workshop-planner .ws-select:hover:not(:disabled):not(:focus) {
  border-color: var(--planner-border-medium);
}

/* Error states use planner error color */
.workshop-planner .ws-input--error,
.workshop-planner .ws-input--error:focus {
  border-color: var(--planner-error);
  box-shadow: 0 0 0 3px var(--planner-error-bg);
}

/* ========================================
   BADGE OVERRIDES
   ======================================== */

.workshop-planner .ws-badge--primary {
  background: var(--planner-very-light);
  color: var(--planner-primary);
  border-color: var(--planner-light);
}

/* ========================================
   MODAL INPUTS
   Make ws-field components match planner modal styling
   ======================================== */

/* Field wrapper matches form-group spacing */
.modal-overlay .ws-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-4);
}

.modal-overlay .ws-field:last-child {
  margin-bottom: 0;
}

/* Label styling matches planner */
.modal-overlay .ws-field__label {
  display: block;
  font-size: var(--text-meta);
  font-weight: var(--font-medium);
  color: var(--planner-gray-700);
  margin-bottom: var(--space-1);
}

.modal-overlay .ws-field__label .ws-field__required {
  color: var(--planner-error);
  margin-left: var(--space-0-5);
}

/* Input styling matches planner */
.modal-overlay .ws-input,
.modal-overlay .ws-select,
.modal-overlay .ws-textarea {
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  background: white;
  border: 1px solid var(--planner-border);
  border-radius: var(--planner-radius);
  font-size: var(--text-small);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.modal-overlay .ws-input:focus,
.modal-overlay .ws-select:focus,
.modal-overlay .ws-textarea:focus {
  outline: none;
  border-color: var(--planner-primary);
  box-shadow: 0 0 0 3px var(--planner-very-light);
}

.modal-overlay .ws-input::placeholder,
.modal-overlay .ws-textarea::placeholder {
  color: var(--planner-gray-400);
}

/* Hint and error text */
.modal-overlay .ws-field__hint {
  font-size: var(--text-caption);
  color: var(--planner-gray-500);
  margin-top: var(--space-1);
}

.modal-overlay .ws-field__error {
  font-size: var(--text-caption);
  color: var(--planner-error);
  margin-top: var(--space-1);
}

/* Select wrapper */
.modal-overlay .ws-select-wrapper {
  position: relative;
  width: 100%;
}

.modal-overlay .ws-select-wrapper .ws-select {
  width: 100%;
  padding-right: 36px;
  appearance: none;
}

.modal-overlay .ws-select-wrapper .ws-select__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--planner-gray-500);
}

/* Form row for side-by-side fields */
.modal-overlay .ws-form-row {
  display: flex;
  flex-direction: row !important;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.modal-overlay .ws-form-row:last-child {
  margin-bottom: 0;
}

.modal-overlay .ws-form-row .ws-field {
  flex: 1;
  margin-bottom: 0;
}

/* Nested containers for flex items with IDs */
.modal-overlay .ws-form-row > [id] {
  flex: 1;
}

.modal-overlay .ws-form-row > [id] .ws-field {
  margin-bottom: 0;
}

/* Override shared min-height on textarea inside modals */
#getStartedModal textarea.ws-input {
  min-height: unset;
}

/* Workshop Duration dropdown at 50% width */
#getStartedModal .ws-field:has(#workshopDurationSelect) {
  width: 50%;
}

/* Blue primary buttons in all planner modals */
.red-header-modal .ws-btn--primary {
  background: linear-gradient(135deg, var(--planner-primary) 0%, var(--planner-dark) 100%);
  border-color: transparent;
}

.red-header-modal .ws-btn--primary:hover:not(:disabled) {
  background: var(--planner-dark);
  box-shadow: var(--planner-shadow);
}

/* ========================================
   CREATE WORKSHOP MODAL
   Extended styles for the special workshop modal
   ======================================== */

.create-workshop-body .ws-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-4);
}

.create-workshop-body .ws-field:last-child {
  margin-bottom: 0;
}

.create-workshop-body .ws-field__label {
  display: block;
  font-size: var(--text-meta);
  font-weight: var(--font-medium);
  color: var(--planner-gray-700);
  margin-bottom: var(--space-1);
}

.create-workshop-body .ws-select-wrapper {
  position: relative;
  width: 100%;
}

.create-workshop-body .ws-select-wrapper .ws-select {
  width: 100%;
  padding-right: 36px;
  appearance: none;
}

.create-workshop-body .ws-input,
.create-workshop-body .ws-select,
.create-workshop-body .ws-textarea {
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  background: white;
  border: 1px solid var(--planner-border);
  border-radius: var(--planner-radius);
  font-size: var(--text-small);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.create-workshop-body .ws-input:focus,
.create-workshop-body .ws-select:focus,
.create-workshop-body .ws-textarea:focus {
  outline: none;
  border-color: var(--planner-primary);
  box-shadow: 0 0 0 3px var(--planner-very-light);
}

.create-workshop-body .ws-input::placeholder,
.create-workshop-body .ws-textarea::placeholder {
  color: var(--planner-gray-400);
}

.create-workshop-body .ws-form-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.create-workshop-body .ws-form-row:last-child {
  margin-bottom: 0;
}

.create-workshop-body .ws-form-row .ws-field,
.create-workshop-body .ws-form-row > [id] {
  flex: 1;
}

.create-workshop-body .ws-form-row .ws-field {
  margin-bottom: 0;
}

.create-workshop-body .ws-form-row > [id] .ws-field {
  margin-bottom: 0;
}

/* ========================================
   CARD OVERRIDES
   ======================================== */

.workshop-planner .ws-card:hover {
  border-color: var(--planner-primary);
}

/* ========================================
   TOAST OVERRIDES
   ======================================== */

.workshop-planner .ws-toast--success {
  border-left-color: var(--color-success);
}

.workshop-planner .ws-toast--error {
  border-left-color: var(--color-error);
}

.workshop-planner .ws-toast--warning {
  border-left-color: var(--color-warning);
}

.workshop-planner .ws-toast--info {
  border-left-color: var(--planner-primary);
}