/**
 * Member Styling Page Styles
 *
 * Styles for the Member Styling admin page (per-member body classes
 * and custom CSS). Mirrors the visual language of the Members Access pages.
 *
 * @package ArraySubs
 */

.arraysubs-member-styling {
  .arraysubs-rule-builder__section-header {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }

  .arraysubs-rule-builder__section-content {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  // Page section header
  &__section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;

    h3 {
      margin: 0 0 5px 0;
      font-size: 15px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: #666;
      font-size: 13px;
    }
  }

  &__section-info {
    flex: 1;
  }

  // Master enable toggle row
  &__toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px solid #e2e4e7;
    border-radius: 6px;

    .arraysubs-rule-field__toggle {
      flex: 0 0 auto;
      margin-top: 2px;
    }
  }

  &__toggle-text {
    flex: 1;
    min-width: 0;

    strong {
      display: block;
      color: #1d2327;
      font-size: 13px;
      font-weight: 600;
    }

    p {
      margin: 3px 0 0 0;
      color: #666;
      font-size: 12px;
      line-height: 1.5;
    }
  }

  // Info box — step-by-step explanatory panel
  &__info-box {
    background: color-mix(in srgb, var(--wp-admin-theme-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--wp-admin-theme-color) 25%, transparent);
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #1d2327;

    h4 {
      margin: 0 0 10px 0;
      font-size: 14px;
      font-weight: 600;
    }

    ol {
      margin: 0 0 8px 18px;
      padding: 0;

      li {
        margin-bottom: 6px;
        line-height: 1.5;
      }
    }
  }

  &__info-note {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    background: #fff8e5;
    border-left: 3px solid #dba617;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.5;
  }

  // Monospace CSS editor textarea
  &__css-input {
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    max-width: 700px;
    white-space: pre;
    tab-size: 2;
  }
}

// Responsive adjustments
@media (max-width: 782px) {
  .arraysubs-member-styling {
    &__section-header {
      flex-direction: column;
      align-items: stretch;
    }

    &__css-input {
      max-width: 100%;
    }
  }
}