// Component-specific styling fixes

// Material Expansion Panel customizations — scoped to eru-expansion-panel only
eru-expansion-panel {
  .mat-expansion-panel-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    align-items: stretch !important;
    overflow: visible !important;

    .mat-content {
      align-items: stretch !important;
      overflow: visible !important;
    }

    .eru-panel-header-slot {
      flex: 1 !important;
      min-width: 0 !important;
      display: flex;
      align-items: stretch;
      overflow: visible !important;

      > * {
        flex: 1;
        min-width: 0;
      }
    }

    .mat-panel-title {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100%;

      mat-icon {
        margin-right: 0 !important;
        font-size: 20px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      span {
        display: inline-block;
      }

      span:last-child {
        margin-left: auto !important;
      }
    }
  }
}


// Floating panel styling
eru-floating-panel {
  .mat-mdc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
}

// Properties panel empty state
.properties-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--studio-on-surface-variant, #666);

  mat-icon {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }

  h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
  }

  p {
    margin: 0;
    font-size: 12px;
    opacity: 0.7;
  }
}

// Canvas empty state styling
.canvas-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 32px;
  text-align: center;
  color: var(--studio-on-surface-variant, #666);

  mat-icon {
    font-size: 64px;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
  }

  h2 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 400;
  }

  p {
    margin: 0 0 16px 0;
    font-size: 14px;
    opacity: 0.8;
  }
}

// Layout hint box
.layout-hint {
  margin-top: 16px;
  padding: 16px;
  background-color: var(--studio-error-container, #ffebee);
  border-radius: var(--studio-border-radius, 4px);
  text-align: left;

  p {
    margin: 4px 0;
    font-size: 12px;
    line-height: 1.5;

    strong {
      font-weight: 600;
    }
  }
}

// eru-grid table styling for visibility. Colours are driven by the grid's own
// design tokens (--grid-*) so preset/custom theming from the properties panel
// flows through; only structural rules (borders, padding, sticky) are forced.
eru-grid {
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: 1px solid var(--grid-outline-variant, #e0e0e0) !important;

    // Border only. Padding and alignment belong to the grid: it sets them from
    // the active preset's --grid-cell-padding-* / --grid-header-padding-*
    // tokens, and forcing a fixed 8px 12px here overrode every preset, so
    // `compact` and `modern` rendered identical cell padding. The same
    // `text-align: left !important` beat even an inline `text-align: center`
    // on the selection cells, pinning their checkboxes to the left edge.
    th, td {
      border: 1px solid var(--grid-outline-variant, #e0e0e0) !important;
    }

    th {
      background-color: var(--grid-header-bg, var(--grid-surface-container)) !important;
      font-weight: 600 !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 10 !important;
      color: var(--grid-header-color, var(--grid-on-surface)) !important;
    }

    td {
      background-color: var(--grid-surface) !important;
      color: var(--grid-on-surface) !important;
    }
  }
}

// Field controls size to Material's intrinsic width by default (consistent
// across every field). To widen/narrow a field the user sets the Layout →
// Width style, which is applied inline on the field's shell <div> and therefore
// overrides this rule. This targets only the shell wrapper, so the inner
// mat-form-field (width:100%) still fills whatever width the shell resolves to:
//   - no width style  -> shell = fit-content  -> Material intrinsic width
//   - width: 400px    -> shell = 400px         -> field 400px
//   - width: 100%      -> shell = 100%          -> field fills the cell
eru-textbox, eru-number, eru-currency, eru-date, eru-datetime, eru-duration,
eru-email, eru-website, eru-time-picker, eru-textarea, eru-select,
eru-location, eru-people, eru-priority, eru-status, eru-tag {
  > div {
    width: fit-content;
    max-width: 100%;
  }

  // NOTE on width: no infix override here on purpose. Angular Material's own
  // default (.mat-mdc-form-field-infix { flex: 1 1 auto; min-width: 0;
  // width: 180px }) already gives every field type the same intrinsic width
  // and lets the infix shrink/grow with the field. The fit-content shell rule
  // above hugs that intrinsic size by default, and a user-set Width style
  // (inline on the shell) overrides it — nothing more is needed. Component
  // stylesheets must NOT override the infix width (a width:100% !important
  // there is what used to collapse selects to their text).

  // Uniform validation UX for every field control:
  //  - the Material subscript area reserves no space while there is no error
  //  - an error renders in-flow directly below the field (no floating gap)
  //  - identical error typography everywhere
  .mat-mdc-form-field-subscript-wrapper {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;

    &::before {
      display: none !important;
    }

    &:not(:has(.mat-mdc-form-field-error)) {
      display: none !important;
    }
  }

  // The message must not SIZE the field. The shell above is `fit-content`, so
  // without this a long error becomes the control's max-content width and
  // stretches the whole field — label, box and all — to fit one line of error
  // text, which is how a validation message ended up rearranging a layout.
  // `width: 0` takes the message out of that intrinsic-size calculation;
  // `min-width: 100%` then lays it out across whatever width the field actually
  // resolved to, so it wraps under the field instead of pushing it wider.
  .mat-mdc-form-field-error-wrapper {
    position: static !important;
    padding: 2px 0 0 0 !important;
    width: 0 !important;
    min-width: 100% !important;
    box-sizing: border-box;
  }

  .mat-mdc-form-field-error {
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    // Wrap rather than overflow, including an unbroken token such as a URL in
    // a pattern message.
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

// Loading shimmer overlay — applied via BaseComponent @HostBinding
@keyframes eru-shimmer-wave {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.eru-component-loading {
  display: block !important;
  position: relative !important;
  pointer-events: none;
  user-select: none;
  overflow: hidden;

  &::after {
    content: '' !important;
    display: block;
    position: absolute !important;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      rgba(224, 224, 224, 0.85) 25%,
      rgba(245, 245, 245, 0.95) 50%,
      rgba(224, 224, 224, 0.85) 75%
    );
    background-size: 200% 100%;
    animation: eru-shimmer-wave 1.6s linear infinite;
    z-index: 10;
  }
}

// Overlay page_refs (popup / side_panel) render no inline content — the
// inner .page-ref-container collapses itself to 0x0, but the hosting
// .flex-child wrapper's min-width/min-height floors (20px, or 50px via
// .no-children) still reserved a dead strip in the layout row, stopping
// sibling containers from using the full available width. Collapse the
// wrapper in both design and view mode (select overlay refs via the
// component tree). Lives in this global sheet because the selector crosses
// component boundaries (flex-container wrapper -> page component template),
// which emulated view encapsulation would otherwise block.
.flex-container-component > .flex-child:has(> eru-page-ref > .page-ref-container.is-overlay-ref) {
  min-width: 0;
  min-height: 0;
  flex: 0 0 0px;
}

// Base text size for every eru control.
//
// The controls set no font-size of their own — they inherit, deliberately, so
// the per-component Font Size style property (applied as an inline style to the
// wrapper INSIDE the host) reaches the value they display. That left the
// baseline at whatever the host app happened to set: 16px from `body` in a bare
// page, 14px under processo's `.desktop-layout`. Anchoring it on the host
// element gives one predictable baseline everywhere, and still sits below the
// wrapper's inline style, so an author-set Font Size continues to win.
eru-attachment,
eru-checkbox,
eru-currency,
eru-date,
eru-datetime,
eru-duration,
eru-email,
eru-location,
eru-number,
eru-people,
eru-priority,
eru-progress,
eru-rating,
eru-select,
eru-status,
eru-tag,
eru-textarea,
eru-textbox,
eru-time-picker,
eru-website {
  font-size: var(--studio-font-size-body, 12px);
}

// ── View-mode display label ──────────────────────────────────────────────────
//
// The caption above (or beside) a read-only value. One definition for all of
// them: this used to be a `.<control>-display-label` block repeated in 17
// component stylesheets, each pinning `font-size` and `color` and nothing else.
// That is what made the Styles tab inconsistent — Text Color and Font Size were
// pinned so they reached only the value, while Font Weight, Font Family and
// letter-spacing were not, so they reached both. Three copies had already
// drifted (checkbox inherited everything, people pinned weight 500, phone
// hardcoded the colour instead of the token).
//
// The rule now pins the whole caption typography, so the Styles tab's
// Typography group belongs unambiguously to the VALUE. The label is styled by
// the same controls switched to their Label target, which write `label_*` keys
// that `BaseComponent.displayLabelStyles()` emits as inline styles — inline, so
// they win over this block without a specificity fight.
//
// `:where()` keeps the whole thing at zero specificity, so an authored utility
// class on the component still wins — same reason the resting cursor is
// declared that way.
:where(.eru-display-label) {
  font-size: 12px;
  color: var(--studio-on-surface-variant, rgba(0, 0, 0, 0.6));
  font-weight: 400;
  font-family: inherit;
  letter-spacing: normal;
  line-height: 1.4;
  text-transform: none;
}