/**
 * Admin Theme Overrides - CSS styling for themed form elements
 *
 * This file contains CSS overrides that work in conjunction with theme styles
 * to ensure proper styling of complex components (input-groups, file uploads, etc.)
 */

/**
 * Phone input group styling
 *
 * Base styles for phone input groups that work with theme-applied styles.
 * The JavaScript in overrides.js applies dynamic theme-aware styling on top of these.
 * Scoped to presentation area to ensure styles only apply in admin form builder.
 *
 * Note: Only the span (input-group-text) gets border removal. The input field keeps its full border
 * since the JavaScript will handle left border removal via inline styles as needed.
 */
#griffinforms-app-presentationarea .griffinforms-phone-input-group .input-group-text {
  /* Remove right border and radius from flag span - JS will apply theme colors */
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#griffinforms-app-presentationarea .griffinforms-phone-input-group .griffinforms-phone-country-select {
  position: relative;
  z-index: 2;
  flex: 0 0 28%;
  max-width: 180px;
  padding-right: 44px;
  border-right-width: var(--gf-phone-border-width, 1px) !important;
  border-right-style: var(--gf-phone-border-style, solid) !important;
  border-right-color: var(--gf-phone-border-color, #dee2e6) !important;
  box-shadow: inset calc(-1 * var(--gf-phone-border-width, 1px)) 0 0 var(--gf-phone-border-color, #dee2e6) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#griffinforms-app-presentationarea .griffinforms-phone-input-group .griffinforms-phone-country-select[data-gf-phone-display-mode="flag_code_name"] {
  flex: 0 0 35%;
  max-width: 35%;
  min-width: 140px;
  max-width: 220px;
}

#griffinforms-app-presentationarea .griffinforms-phone-input-group .griffinforms-phone-country-select[data-gf-phone-display-mode="flag_code"] {
  flex: 0 0 28%;
  max-width: 28%;
  min-width: 120px;
  max-width: 180px;
}

#griffinforms-app-presentationarea .griffinforms-phone-input-group .griffinforms-phone-country-select[data-gf-phone-display-mode="code_only"] {
  flex: 0 0 16%;
  max-width: 16%;
  min-width: 76px;
  max-width: 110px;
}

#griffinforms-app-presentationarea .griffinforms-app-formlayout-form.gf-no-theme .griffinforms-phone-input-group .griffinforms-phone-country-select.form-select {
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#griffinforms-app-presentationarea .griffinforms-app-formlayout-form.gf-no-theme .griffinforms-phone-input-group input[type="tel"].form-control {
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

#griffinforms-app-presentationarea .griffinforms-phone-input-group input[type="tel"].form-control {
  position: relative;
  z-index: 1;
  margin-left: 0 !important;
}

#griffinforms-app-presentationarea .griffinforms-phone-input-group > :not(:first-child) {
  margin-left: 0 !important;
}

/**
 * File upload button styling
 *
 * Base styles for file upload buttons that work with theme-applied styles.
 * The JavaScript in overrides.js applies dynamic theme-aware styling via inline CSS rules.
 * Note: File upload inputs are styled as text_input in the admin form builder
 * Scoped to presentation area to ensure styles only apply in admin form builder.
 */
#griffinforms-app-presentationarea input[type="file"] {
  color: inherit;
}