/* SMS Component */

/**
 * SMS Form Component
 * A form for composing and sending SMS messages
 * Uses existing form components (textarea, button, checkbox, date-picker)
 * WCAG 2.2 AAA compliant
 */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* SMS form container */
  --sms-form-gap: var(--ds-space-l);

  /* SMS message area */
  --sms-message-min-height: 120px;

  /* SMS character counter */
  --sms-counter-font-size: var(--ds-font-size-s);
  --sms-counter-color: var(--ds-color-text-weak);
  --sms-counter-warning-color: var(--ds-color-warning);
  --sms-counter-error-color: var(--ds-color-danger);

  /* SMS schedule section */
  --sms-schedule-bg: var(--ds-color-surface-raised);
  --sms-schedule-padding: var(--ds-space-m);
  --sms-schedule-border-radius: var(--ds-radius-m);
  --sms-schedule-border-color: var(--ds-color-border);

  /* SMS preview */
  --sms-preview-bg: var(--ds-color-surface-raised);
  --sms-preview-padding: var(--ds-space-m);
  --sms-preview-border-radius: var(--ds-radius-m);
  --sms-preview-font-size: var(--ds-font-size-s);
  --sms-preview-text-color: var(--ds-color-text);

  /* Transitions */
  --sms-transition: all var(--ds-duration-fast) var(--ds-ease-out);
}

/* ========================================
   Base SMS Form Container
   ======================================== */

.c-sms-form {
  display: flex;
  flex-direction: column;
  gap: var(--sms-form-gap);
  width: 100%;
}

/* ========================================
   SMS Message Section
   ======================================== */

.c-sms-form__message-section {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.c-sms-form__message-wrapper {
  position: relative;
}

.c-sms-form__message-field {
  min-height: var(--sms-message-min-height);
  resize: vertical;
}

/* ========================================
   SMS Character Counter
   ======================================== */

.c-sms-form__counter {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-s);
  font-size: var(--sms-counter-font-size);
  color: var(--sms-counter-color);
}

.c-sms-form__counter-current {
  font-weight: var(--ds-font-weight-medium);
}

.c-sms-form__counter--warning .c-sms-form__counter-current {
  color: var(--sms-counter-warning-color);
}

.c-sms-form__counter--error .c-sms-form__counter-current {
  color: var(--sms-counter-error-color);
}

.c-sms-form__counter-sms {
  padding-left: var(--ds-space-s);
  border-left: 1px solid var(--ds-color-border);
}

/* ========================================
   SMS Options Section
   ======================================== */

.c-sms-form__options {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-m);
}

.c-sms-form__option {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-s);
}

/* ========================================
   SMS Schedule Section
   ======================================== */

.c-sms-form__schedule {
  display: none;
  flex-direction: column;
  gap: var(--ds-space-m);
  padding: var(--sms-schedule-padding);
  background: var(--sms-schedule-bg);
  border: 1px solid var(--sms-schedule-border-color);
  border-radius: var(--sms-schedule-border-radius);
  margin-top: var(--ds-space-s);
}

.c-sms-form__schedule--visible {
  display: flex;
}

.c-sms-form__schedule-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-m);
  align-items: flex-end;
}

.c-sms-form__schedule-field {
  flex: 1;
  min-width: 200px;
}

/* ========================================
   SMS Recipients Section
   ======================================== */

.c-sms-form__recipients {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-m);
}

.c-sms-form__recipients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-m);
}

.c-sms-form__recipients-title {
  margin: 0;
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
}

.c-sms-form__recipients-count {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
}

/* ========================================
   SMS Actions Section
   ======================================== */

.c-sms-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-m);
  padding-top: var(--ds-space-m);
  border-top: 1px solid var(--ds-color-border);
}

.c-sms-form__actions--right {
  justify-content: flex-end;
}

.c-sms-form__actions--between {
  justify-content: space-between;
}

/* ========================================
   SMS Preview
   ======================================== */

.c-sms-form__preview {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-s);
  padding: var(--sms-preview-padding);
  background: var(--sms-preview-bg);
  border-radius: var(--sms-preview-border-radius);
}

.c-sms-form__preview-label {
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text-weak);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.c-sms-form__preview-content {
  font-size: var(--sms-preview-font-size);
  color: var(--sms-preview-text-color);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ========================================
   SMS Status Messages
   ======================================== */

.c-sms-form__status {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  padding: var(--ds-space-m);
  border-radius: var(--ds-radius-m);
  font-size: var(--ds-font-size-s);
}

.c-sms-form__status--success {
  background: var(--ds-color-success-subtle);
  color: var(--ds-color-success);
}

.c-sms-form__status--error {
  background: var(--ds-color-danger-subtle);
  color: var(--ds-color-danger);
}

.c-sms-form__status--info {
  background: var(--ds-color-info-subtle);
  color: var(--ds-color-info);
}

.c-sms-form__status-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.c-sms-form__status-icon svg {
  width: 100%;
  height: 100%;
}

/* ========================================
   Accessibility & Focus Management
   ======================================== */

.c-sms-form__schedule:focus-within {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-sms-form__schedule {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-sms-form__schedule {
    transition: none;
  }
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 640px) {
  .c-sms-form__schedule-row {
    flex-direction: column;
  }

  .c-sms-form__schedule-field {
    min-width: 100%;
  }

  .c-sms-form__actions {
    flex-direction: column;
  }

  .c-sms-form__actions .c-button {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .c-sms-form__actions {
    display: none;
  }

  .c-sms-form__schedule {
    background: white;
    border: 1px solid #000;
  }
}