/*
  TYPO3 v14 Form Framework skin.

  The default TYPO3 Form prototype ships Bootstrap-ish class names
  (form-control, form-select, btn, invalid-feedback, row/col-* ...).
  This file provides a Tailwind v4-ish look using plain CSS so it works
  with the current setup that loads a prebuilt Tailwind stylesheet via <link>.
*/

@layer components {
  :root {
    --dgm-form-fg: rgb(15 23 42) !important; /* slate-900 */
    --dgm-form-muted: rgb(71 85 105) !important; /* slate-600 */
    --dgm-form-border: rgb(226 232 240) !important; /* slate-200 */
    --dgm-form-border-strong: rgb(203 213 225) !important; /* slate-300 */
    --dgm-form-surface: rgb(255 255 255) !important;
    --dgm-form-surface-muted: rgb(248 250 252) !important; /* slate-50 */
    --dgm-form-accent: rgb(59 130 246) !important; /* blue-500 */
    --dgm-form-danger: rgb(220 38 38) !important; /* red-600 */
    /* Tailwind rounded-md */
    --dgm-form-radius: 0.375rem !important;
  }

  /* Scope everything to TYPO3 form content element output */
  .frame-type-form_formframework {
    color: var(--dgm-form-fg) !important;
    background: var(--dgm-form-surface) !important;
    border: 1px solid var(--dgm-form-border) !important;
    border-radius: var(--dgm-form-radius) !important;
    padding: 1.25rem !important;
    box-shadow:
      0 4px 6px -1px rgba(2, 6, 23, 0.12),
      0 2px 4px -2px rgba(2, 6, 23, 0.10) !important; /* shadow-md */
  }

  .frame-type-form_formframework > header {
    position: relative !important;
    margin: 0 0 1.25rem !important;
    padding: 0 0 0.85rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dgm-form-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .frame-type-form_formframework > header h2 {
    margin: 0 !important;
    font-weight: 750 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem) !important;
  }

  .frame-type-form_formframework > header::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 4.25rem !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.95), rgba(14, 165, 233, 0.75)) !important;
  }

  .frame-type-form_formframework form {
    margin: 0 !important;
  }

  /* Layout helpers for TYPO3's GridRow/GridColumn (Bootstrap-like) */
  .frame-type-form_formframework form .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
  }
  .frame-type-form_formframework form .row > [class*="col-"] {
    box-sizing: border-box !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: 100% !important;
  }
  .frame-type-form_formframework form .col-12 { width: 100% !important; }
  .frame-type-form_formframework form .col-6 { width: 50% !important; }
  .frame-type-form_formframework form .col-4 { width: 33.3333% !important; }
  .frame-type-form_formframework form .col-3 { width: 25% !important; }

  @media (min-width: 640px) {
    .frame-type-form_formframework form .col-sm-12 { width: 100% !important; }
    .frame-type-form_formframework form .col-sm-6 { width: 50% !important; }
    .frame-type-form_formframework form .col-sm-4 { width: 33.3333% !important; }
    .frame-type-form_formframework form .col-sm-3 { width: 25% !important; }
  }
  @media (min-width: 768px) {
    .frame-type-form_formframework form .col-md-12 { width: 100% !important; }
    .frame-type-form_formframework form .col-md-6 { width: 50% !important; }
    .frame-type-form_formframework form .col-md-4 { width: 33.3333% !important; }
    .frame-type-form_formframework form .col-md-3 { width: 25% !important; }
  }
  @media (min-width: 1024px) {
    .frame-type-form_formframework form .col-lg-12 { width: 100% !important; }
    .frame-type-form_formframework form .col-lg-6 { width: 50% !important; }
    .frame-type-form_formframework form .col-lg-4 { width: 33.3333% !important; }
    .frame-type-form_formframework form .col-lg-3 { width: 25% !important; }
  }
  @media (min-width: 1280px) {
    .frame-type-form_formframework form .col-xl-12 { width: 100% !important; }
    .frame-type-form_formframework form .col-xl-6 { width: 50% !important; }
    .frame-type-form_formframework form .col-xl-4 { width: 33.3333% !important; }
    .frame-type-form_formframework form .col-xl-3 { width: 25% !important; }
  }
  @media (min-width: 1536px) {
    .frame-type-form_formframework form .col-xxl-12 { width: 100% !important; }
    .frame-type-form_formframework form .col-xxl-6 { width: 50% !important; }
    .frame-type-form_formframework form .col-xxl-4 { width: 33.3333% !important; }
    .frame-type-form_formframework form .col-xxl-3 { width: 25% !important; }
  }

  /* Labels + help text */
  .frame-type-form_formframework form .form-label,
  .frame-type-form_formframework form legend {
    display: block !important;
    color: var(--dgm-form-fg) !important;
    font-weight: 650 !important;
    font-size: 0.975rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem !important;
  }
  .frame-type-form_formframework form .form-text {
    display: block !important;
    color: var(--dgm-form-muted) !important;
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
    margin-top: 0.4rem !important;
  }
  .frame-type-form_formframework form .required {
    color: var(--dgm-form-danger) !important;
    margin-left: 0.15rem !important;
  }

  /* Inputs */
  .frame-type-form_formframework form .form-control,
  .frame-type-form_formframework form .form-select {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--dgm-form-border) !important;
    background: color-mix(in oklab, var(--dgm-form-surface) 92%, var(--dgm-form-surface-muted)) !important;
    color: var(--dgm-form-fg) !important;
    border-radius: var(--dgm-form-radius) !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  }
  @supports not (color-mix(in oklab, black, white)) {
    .frame-type-form_formframework form .form-control,
    .frame-type-form_formframework form .form-select {
      background: var(--dgm-form-surface) !important;
    }
  }

  .frame-type-form_formframework form textarea.form-control {
    min-height: 8rem !important;
    resize: vertical !important;
  }
  .frame-type-form_formframework form .form-control::placeholder,
  .frame-type-form_formframework form .form-select:invalid {
    color: rgb(148 163 184) !important; /* slate-400 */
  }

  .frame-type-form_formframework form .form-control:hover,
  .frame-type-form_formframework form .form-select:hover {
    border-color: var(--dgm-form-border-strong) !important;
  }

  .frame-type-form_formframework form .form-control:focus,
  .frame-type-form_formframework form .form-select:focus {
    outline: none !important;
    border-color: color-mix(in oklab, var(--dgm-form-accent) 70%, white) !important;
    box-shadow:
      0 0 0 4px color-mix(in oklab, var(--dgm-form-accent) 18%, transparent),
      0 1px 2px rgba(2, 6, 23, 0.06) !important;
    background: var(--dgm-form-surface) !important;
  }
  @supports not (color-mix(in oklab, black, white)) {
    .frame-type-form_formframework form .form-control:focus,
    .frame-type-form_formframework form .form-select:focus {
      border-color: var(--dgm-form-accent) !important;
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 1px 2px rgba(2, 6, 23, 0.06) !important;
    }
  }

  .frame-type-form_formframework form .form-control[disabled],
  .frame-type-form_formframework form .form-select[disabled],
  .frame-type-form_formframework form .form-control[readonly],
  .frame-type-form_formframework form .form-select[readonly] {
    cursor: not-allowed !important;
    background: var(--dgm-form-surface-muted) !important;
    color: rgb(100 116 139) !important;
  }

  /* Select dropdown affordance */
  .frame-type-form_formframework form .form-select {
    appearance: none !important;
    padding-right: 2.5rem !important;
    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85rem center !important;
    background-size: 1.1rem 1.1rem !important;
  }

  /* Errors */
  .frame-type-form_formframework form .invalid-feedback {
    display: block !important;
    margin-top: 0.5rem !important;
    color: var(--dgm-form-danger) !important;
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
  }
  .frame-type-form_formframework form .is-invalid .form-control,
  .frame-type-form_formframework form .is-invalid .form-select,
  .frame-type-form_formframework form .form-control.is-invalid,
  .frame-type-form_formframework form .form-select.is-invalid {
    border-color: color-mix(in oklab, var(--dgm-form-danger) 70%, white) !important;
  }
  @supports not (color-mix(in oklab, black, white)) {
    .frame-type-form_formframework form .is-invalid .form-control,
    .frame-type-form_formframework form .is-invalid .form-select,
    .frame-type-form_formframework form .form-control.is-invalid,
    .frame-type-form_formframework form .form-select.is-invalid {
      border-color: var(--dgm-form-danger) !important;
    }
  }
  .frame-type-form_formframework form .is-invalid .form-control:focus,
  .frame-type-form_formframework form .is-invalid .form-select:focus,
  .frame-type-form_formframework form .form-control.is-invalid:focus,
  .frame-type-form_formframework form .form-select.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18), 0 1px 2px rgba(2, 6, 23, 0.06) !important;
  }

  /* Fieldsets */
  .frame-type-form_formframework form fieldset.form-element {
    border: 1px solid var(--dgm-form-border) !important;
    border-radius: var(--dgm-form-radius) !important;
    padding: 1.1rem 1.1rem 0.35rem !important;
    margin-bottom: 1.5rem !important;
    background:
      radial-gradient(900px 120px at 20% 0%, rgba(59, 130, 246, 0.06), transparent 65%),
      linear-gradient(180deg, var(--dgm-form-surface), var(--dgm-form-surface-muted)) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06) !important;
  }

  /* If a fieldset is just a structural wrapper (no legend), don't render it like a section card. */
  .frame-type-form_formframework form fieldset.form-element-fieldset:not(:has(> legend)) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  .frame-type-form_formframework form fieldset.form-element > legend {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: 0.9rem !important;
    padding: 0.25rem 0.7rem !important;
    border: 1px solid var(--dgm-form-border) !important;
    border-radius: var(--dgm-form-radius) !important;
    background: rgba(15, 23, 42, 0.035) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em !important;
  }

  /* Static text blocks inside forms */
  .frame-type-form_formframework form .form-element-statictext p {
    margin: 0.25rem 0 0.75rem !important;
    padding: 0.75rem 0.9rem !important;
    border: 1px solid var(--dgm-form-border) !important;
    border-radius: var(--dgm-form-radius) !important;
    background: rgba(59, 130, 246, 0.06) !important;
    color: rgb(51 65 85) !important; /* slate-700 */
  }

  /* Checkboxes / radios */
  .frame-type-form_formframework form .form-check {
    margin-bottom: 0.5rem !important;
  }
  .frame-type-form_formframework form .form-check-wrapping-label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    cursor: pointer !important;
    user-select: none !important;
  }
  .frame-type-form_formframework form .form-check-label {
    display: inline-block !important;
    color: var(--dgm-form-fg) !important;
    line-height: 1.35 !important;
  }
  .frame-type-form_formframework form input.form-check-input {
    margin-top: 0.15rem !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    border-radius: var(--dgm-form-radius) !important;
    accent-color: var(--dgm-form-accent) !important;
  }
  .frame-type-form_formframework form input[type="radio"].form-check-input {
    border-radius: 999px !important;
  }
  .frame-type-form_formframework form input.form-check-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18) !important;
  }

  /* Buttons (scoped to the TYPO3 form navigation wrapper) */
  .frame-type-form_formframework form .actions {
    margin-top: 1.25rem !important;
  }
  .frame-type-form_formframework form .form-navigation {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  .frame-type-form_formframework form .form-navigation .btn {
    appearance: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--dgm-form-radius) !important;
    padding: 0.6rem 1rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform 90ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06) !important;
  }
  .frame-type-form_formframework form .form-navigation .btn:active {
    transform: translateY(1px) !important;
  }
  .frame-type-form_formframework form .form-navigation .btn-primary {
    background: var(--dgm-form-accent) !important;
    color: white !important;
  }
  .frame-type-form_formframework form .form-navigation .btn-primary:hover {
    filter: brightness(0.95) !important;
  }
  .frame-type-form_formframework form .form-navigation .btn-outline-primary {
    background: transparent !important;
    color: var(--dgm-form-accent) !important;
    border-color: color-mix(in oklab, var(--dgm-form-accent) 55%, white) !important;
  }
  .frame-type-form_formframework form .form-navigation .btn-outline-primary:hover {
    background: color-mix(in oklab, var(--dgm-form-accent) 10%, transparent) !important;
    border-color: var(--dgm-form-accent) !important;
  }
  @supports not (color-mix(in oklab, black, white)) {
    .frame-type-form_formframework form .form-navigation .btn-outline-primary {
      border-color: rgba(59, 130, 246, 0.55) !important;
    }
    .frame-type-form_formframework form .form-navigation .btn-outline-primary:hover {
      background: rgba(59, 130, 246, 0.10) !important;
      border-color: var(--dgm-form-accent) !important;
    }
  }

  /* Accessibility helper class from TYPO3 form prototype */
  .frame-type-form_formframework form .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}