/**
 * @file
 * DevPortal theme settings page — gin-like UI for Appearance and Accent colour.
 *
 * Loaded only on /admin/appearance/settings/devportal via devportal_accent library.
 * All selectors are scoped to #system-theme-settings.
 *
 * DOM structure — elements are nested inside the "Portal Branding" details:
 *   details#edit-devportal-branding
 *     └─ fieldset.devportal-appearance-radios      ← appearance_mode
 *          └─ .fieldset__wrapper
 *               └─ .form-item.form-type--radios
 *                    └─ .form-radios               ← flex target
 *                         └─ .form-item.form-type--radio
 *                              ├─ input[type=radio] (hidden)
 *                              └─ label.form-item__label  ← pill segment
 *
 *     └─ fieldset.devportal-accent-radios          ← preset_accent_color
 *          └─ .fieldset__wrapper
 *               └─ .form-item.form-type--radios
 *                    └─ .form-radios               ← flex target
 *                         └─ .form-item.form-type--radio
 *                              ├─ input[type=radio] (hidden)
 *                              └─ label.form-item__label  ← colour circle
 *
 *     └─ fieldset.devportal-accent-group           ← accent_group (states-hidden)
 *          └─ .fieldset__wrapper
 *               └─ .devportal-custom-accent-row    ← flex row
 *                    ├─ .form-item.form-type--color  ← color picker
 *                    └─ .form-item.form-type--textfield  ← hex input
 *               └─ p.devportal-custom-accent-note
 *
 * Note: gin's settings.css selectors target [data-drupal-selector=edit-*] IDs
 * that are specific to gin's own form elements. Our devportal_branding elements
 * are nested inside details#edit-devportal-branding, so their IDs are prefixed
 * with "edit-devportal-branding-*" — gin's rules do NOT match our elements.
 * We therefore do not need visibility/position overrides for gin's label hiding.
 */

/* ==========================================================================
   Appearance mode — segmented pill control  (Light / Dark / Auto)
   Match gin's edit-enable-darkmode style: container border, no per-label border
   ========================================================================== */

/* The .form-radios container is the visible pill-group border */
#system-theme-settings .devportal-appearance-radios .form-radios {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  align-items: stretch;
  padding: 0 var(--gin-spacing-xxs, 4px) !important;
  border: 1px solid var(--gin-border-color-form-element, #bfbfbf) !important;
  border-radius: var(--gin-spacing-xl, 2rem) !important;
  background: var(--gin-bg-layer, #fff) !important;
  margin-bottom: 4px;
}

/* Each radio form-item: no block layout */
#system-theme-settings .devportal-appearance-radios .form-radios > .form-item,
#system-theme-settings .devportal-appearance-radios .form-radios > .js-form-item {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Hide the actual radio input (same as gin) */
#system-theme-settings .devportal-appearance-radios .form-radios input[type="radio"] {
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Every segment label — neutral colour (matches gin unselected state) */
#system-theme-settings .devportal-appearance-radios .form-radios .form-item__label {
  display: inline-block !important;
  padding: .375rem var(--gin-spacing-m, 1rem) !important;
  margin: var(--gin-spacing-xxs, 4px) 0 !important;
  border: 2px solid transparent !important;
  border-radius: var(--gin-border-xl, 2rem) !important;
  font-size: var(--gin-font-size-s, 13px) !important;
  font-weight: var(--gin-font-weight-semibold, 600) !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  user-select: none !important;
  /* Neutral text colour for unselected (not the accent primary) */
  color: var(--gin-color-title, #1a1a1a) !important;
  background: transparent !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  width: auto !important;
}

/* Hover */
#system-theme-settings .devportal-appearance-radios .form-radios .form-item__label:hover {
  color: var(--gin-color-primary, #3b7cdd) !important;
  background: var(--gin-color-primary-light-hover, rgba(59,124,221,.08)) !important;
}

/* Selected — filled with gin/devportal accent */
#system-theme-settings .devportal-appearance-radios .form-radios input[type="radio"]:checked + .form-item__label {
  color: var(--gin-color-button-text, #fff) !important;
  background: var(--gin-color-primary, #3b7cdd) !important;
}

/* Focus ring */
#system-theme-settings .devportal-appearance-radios .form-radios input[type="radio"]:focus + .form-item__label {
  box-shadow: 0 0 0 1px var(--gin-color-focus-border, #26a769), 0 0 0 4px var(--gin-color-focus, rgba(38,167,105,.2)) !important;
}

/* ==========================================================================
   Accent colour — circular swatch row
   ========================================================================== */

/* Inner .form-radios container — horizontal flex */
#system-theme-settings .devportal-accent-radios .form-radios {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  align-items: center !important;
}

/* Each radio form-item: shrink to the circle size */
#system-theme-settings .devportal-accent-radios .form-radios > .form-item,
#system-theme-settings .devportal-accent-radios .form-radios > .js-form-item {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
}

/* Hide the radio input behind the label circle */
#system-theme-settings .devportal-accent-radios .form-radios input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

/* The label IS the circle */
#system-theme-settings .devportal-accent-radios .form-radios .form-item__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  color: transparent !important;
  box-sizing: border-box !important;
}

/* Hover: slight scale-up */
#system-theme-settings .devportal-accent-radios .form-radios .form-item__label:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

/* Selected: white inner ring + gin accent outer ring */
#system-theme-settings .devportal-accent-radios .form-radios input[type="radio"]:checked + .form-item__label {
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.90),
    0 0 0 2.5px var(--gin-color-primary, #3b7cdd) !important;
  transform: scale(1.10) !important;
}

/* ── Per-preset swatch colours ───────────────────────────────────────────── */
#system-theme-settings input[data-devportal-accent="navy"]        + .form-item__label { background-color: #00308f !important; }
#system-theme-settings input[data-devportal-accent="blue"]        + .form-item__label { background-color: #0550e6 !important; }
#system-theme-settings input[data-devportal-accent="light_blue"]  + .form-item__label { background-color: #2f6dd0 !important; }
#system-theme-settings input[data-devportal-accent="dark_purple"] + .form-item__label { background-color: #4300bf !important; }
#system-theme-settings input[data-devportal-accent="purple"]      + .form-item__label { background-color: #5b00ff !important; }
#system-theme-settings input[data-devportal-accent="teal"]        + .form-item__label { background-color: #10857f !important; }
#system-theme-settings input[data-devportal-accent="green"]       + .form-item__label { background-color: #00875f !important; }
#system-theme-settings input[data-devportal-accent="pink"]        + .form-item__label { background-color: #d12f70 !important; }
#system-theme-settings input[data-devportal-accent="red"]         + .form-item__label { background-color: #d8002f !important; }
#system-theme-settings input[data-devportal-accent="orange"]      + .form-item__label { background-color: #da6301 !important; }
#system-theme-settings input[data-devportal-accent="yellow"]      + .form-item__label { background-color: #b37a00 !important; }
#system-theme-settings input[data-devportal-accent="neutral"]     + .form-item__label { background-color: #111111 !important; }

/* Custom — checkerboard */
#system-theme-settings input[data-devportal-accent="custom"] + .form-item__label {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) !important;
  background-size: 10px 10px !important;
  background-position: 0 0, 5px 5px !important;
  background-color: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

/* ==========================================================================
   Custom accent fieldset — gin-style inline layout
   Uses .devportal-accent-group class (set via #attributes in DevportalSettings)
   ========================================================================== */

#system-theme-settings .devportal-accent-group {
  border: 1.5px solid var(--gin-bg-app, #e8edf4) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-top: 8px !important;
}

/* Picker + hex input on the same horizontal line */
#system-theme-settings .devportal-custom-accent-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* Strip Drupal's block form-item defaults inside the row */
#system-theme-settings .devportal-custom-accent-row .form-item {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Native <input type="color"> styled as a framed square.
   ID has no edit- prefix — set explicitly in DevportalSettings::getSettingsForm(). */
#system-theme-settings #devportal-accent-color-picker {
  width: 46px !important;
  height: 46px !important;
  padding: 4px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Hex text field — ID is auto-generated but nested path is predictable */
#system-theme-settings .devportal-accent-group input[name="accent_color"] {
  width: 130px !important;
  height: 46px !important;
  padding: 8px 12px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  background: #fff !important;
  color: inherit !important;
  box-sizing: border-box !important;
}

#system-theme-settings .devportal-accent-group input[name="accent_color"]:focus {
  border-color: var(--gin-color-primary, #3b7cdd) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--gin-color-primary-rgb, 59, 124, 221), 0.20) !important;
}

/* Advisory note below the row */
#system-theme-settings .devportal-custom-accent-note {
  margin: 10px 0 0 !important;
  font-size: 12px !important;
  color: var(--gin-color-text-secondary, #6b7280) !important;
  line-height: 1.4 !important;
}