/*!
 * Semble Patient Registration CSS
 * Version: 3.0.0
 * Date: January 2025
 * 
 * PURPOSE:
 * Contains all patient registration specific styles including form layouts,
 * validation states, success/error messages, and registration flow components.
 * Uses BEM methodology and design tokens from core.css.
 * 
 * DEPENDENCIES:
 * - core.css (design tokens, base components, utilities)
 * 
 * STRUCTURE:
 * 1. Registration Container
 * 2. Form Layout & Styling
 * 3. Form Validation States
 * 4. Registration Status Messages
 * 5. Responsive Design
 */

/* ==========================================================================
   REGISTRATION CONTAINER
   ========================================================================== */

.semble-registration {
  max-width: 800px;
  margin: 0 auto;
  background: var(--semble-white);
  border-radius: var(--semble-radius-lg);
  box-shadow: var(--semble-shadow-md);
  padding: var(--semble-spacing-3xl);
}

.semble-registration__header {
  text-align: center;
  margin-bottom: var(--semble-spacing-2xl);
}

.semble-registration__header .semble-heading {
  margin-bottom: var(--semble-spacing-md);
  color: var(--semble-gray-900);
}

.semble-registration__header .semble-text {
  color: var(--semble-gray-600);
  margin: 0;
}

/* ==========================================================================
   FORM LAYOUT & STYLING
   ========================================================================== */

.semble-registration__form {
  display: flex;
  flex-direction: column;
  gap: var(--semble-spacing-2xl);
}

.semble-registration__section {
  border: 1px solid var(--semble-gray-200);
  border-radius: var(--semble-radius-md);
  padding: var(--semble-spacing-xl);
  background: var(--semble-gray-50);
}

.semble-registration__section .semble-heading {
  margin-bottom: var(--semble-spacing-lg);
  color: var(--semble-gray-800);
  font-size: var(--semble-font-size-lg);
  font-weight: 600;
}

/* Form Row Layout */
.semble-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--semble-spacing-xs);
  margin-bottom: var(--semble-spacing-lg);
}

.semble-form__row:last-child {
  margin-bottom: 0;
}

/* Form Labels */
.semble-form__label {
  font-weight: 500;
  color: var(--semble-gray-700);
  font-size: var(--semble-font-size-sm);
  margin-bottom: var(--semble-spacing-xs);
}

/* Form Inputs */
.semble-form__input {
  padding: var(--semble-spacing-md) !important;
  border: 1px solid var(--semble-gray-300) !important;
  border-radius: var(--semble-radius-md) !important;
  font-size: var(--semble-font-size-base) !important;
  transition: var(--semble-transition) !important;
  background: var(--semble-white) !important;
  color: var(--semble-gray-900) !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.semble-form__input:focus {
  outline: none !important;
  border-color: var(--semble-primary) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1) !important;
}

.semble-form__input--readonly {
  background: var(--semble-gray-100);
  color: var(--semble-gray-500);
  cursor: not-allowed;
}

/* Form Selects */
.semble-form__select {
  padding: var(--semble-spacing-md) !important;
  border: 1px solid var(--semble-gray-300) !important;
  border-radius: var(--semble-radius-md) !important;
  font-size: var(--semble-font-size-base) !important;
  transition: var(--semble-transition) !important;
  background: var(--semble-white) !important;
  color: var(--semble-gray-900) !important;
  cursor: pointer !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.semble-form__select:focus {
  outline: none !important;
  border-color: var(--semble-primary) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1) !important;
}

/* Display Fields (for read-only text) */
.semble-form__display-field {
  padding: var(--semble-spacing-md);
  border: 1px solid var(--semble-gray-300);
  border-radius: var(--semble-radius-md);
  font-size: var(--semble-font-size-base);
  background: transparent;
  color: var(--semble-gray-900);
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Date of Birth Fields */
.semble-form__date-fields {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--semble-spacing-sm);
}

/* ==========================================================================
   FORM VALIDATION STATES
   ========================================================================== */

/* Error state styling for form fields */
.semble-form__input--error,
.semble-form__select--error {
  border-color: var(--semble-red-500) !important;
}

.semble-form__input--error:focus,
.semble-form__select--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Only show error styling when form has been submitted and field is invalid */
.semble-registration__form.semble-registration__form--submitted .semble-form__input:invalid,
.semble-registration__form.semble-registration__form--submitted .semble-form__select:invalid {
  border-color: var(--semble-red-500);
}

.semble-registration__form.semble-registration__form--submitted .semble-form__input:invalid:focus,
.semble-registration__form.semble-registration__form--submitted .semble-form__select:invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   REGISTRATION STATUS MESSAGES
   ========================================================================== */

.semble-registration__message {
  padding: var(--semble-spacing-lg);
  border-radius: var(--semble-radius-md);
  margin-bottom: var(--semble-spacing-xl);
}

.semble-registration__message--error {
  background: var(--semble-red-50);
  border: 1px solid var(--semble-red-200);
  color: var(--semble-red-800);
}

.semble-registration__message--success {
  background: var(--semble-green-50);
  border: 1px solid var(--semble-green-200);
  color: var(--semble-green-800);
}



/* ==========================================================================
   FORM ACTIONS
   ========================================================================== */

.semble-registration__actions {
  display: flex;
  gap: var(--semble-spacing-lg);
  justify-content: center;
  align-items: center;
  margin-top: var(--semble-spacing-xl);
  padding-top: var(--semble-spacing-xl);
  border-top: 1px solid var(--semble-gray-200);
}



/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .semble-registration {
    padding: var(--semble-spacing-xl);
    margin: 0 var(--semble-spacing-md);
  }
  
  .semble-registration__section {
    padding: var(--semble-spacing-lg);
  }
  
  .semble-form__date-fields {
    grid-template-columns: 1fr;
    gap: var(--semble-spacing-md);
  }
  
  .semble-registration__actions {
    flex-direction: column;
    gap: var(--semble-spacing-md);
  }
  
  .semble-registration__actions .semble-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .semble-registration {
    padding: var(--semble-spacing-lg);
    margin: 0 var(--semble-spacing-sm);
  }
  
  .semble-registration__section {
    padding: var(--semble-spacing-md);
  }
}