/*
 * mlp-forms styles. Import after platform.css — reuses its tokens (--c-*, --s-*) and its
 * existing .field/.field__hint rules for anything that already looks right; only adds classes
 * for widget internals that have no hand-written precedent yet (see mlp-framework
 * docs/form-fields.md "Styling").
 */

/* platform.css never styled textarea — only text/email/password/number inputs and select. */
.field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface-raised);
  color: var(--c-text);
  font: inherit;
  resize: vertical;
}

.field textarea::placeholder {
  color: var(--c-text-muted);
}

.mlp-money-field {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.mlp-money-field__symbol {
  color: var(--c-text-muted);
  font-weight: 600;
}

.mlp-date-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.mlp-date-field input[type='text'] {
  flex: 1;
}

.mlp-date-field__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface-raised);
  padding: 0.5rem 0.6rem;
  line-height: 1;
  cursor: pointer;
  font: inherit;
}

.mlp-date-field__toggle:hover {
  background: var(--c-accent-wash);
}

.mlp-date-field__popup {
  position: absolute;
  top: calc(100% + var(--s-1));
  left: 0;
  z-index: 20;
  width: 17rem;
  padding: var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow);
}

.mlp-date-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
  font-weight: 600;
  font-size: var(--t-sm);
}

.mlp-date-field__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  padding: var(--s-1) var(--s-2);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.mlp-date-field__nav:hover {
  background: var(--c-accent-wash);
}

.mlp-date-field__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mlp-date-field__weekday {
  text-align: center;
  padding: var(--s-1) 0;
  color: var(--c-text-muted);
  font-size: var(--t-xs);
}

.mlp-date-field__cell {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

.mlp-date-field__cell:hover:not(:disabled) {
  background: var(--c-accent-wash);
}

.mlp-date-field__cell:disabled {
  color: var(--c-text-muted);
  opacity: 0.4;
  cursor: default;
}

.mlp-date-field__cell--blank {
  visibility: hidden;
}

.mlp-date-field__cell--today {
  font-weight: 700;
  text-decoration: underline;
}

.mlp-date-field__cell--selected {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}

.mlp-autocomplete {
  position: relative;
  display: block;
}

.mlp-autocomplete__input--invalid {
  border-color: var(--c-danger) !important;
}

.mlp-autocomplete__popup {
  position: absolute;
  top: calc(100% + var(--s-1));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: var(--s-1) 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow);
}

.mlp-autocomplete__option {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  cursor: pointer;
}

.mlp-autocomplete__option:hover,
.mlp-autocomplete__option--highlighted {
  background: var(--c-accent-wash);
}

/* The `computed` field type — a read-only, live-updating value derived from other fields (see
 * render-field.js's renderComputed and index.js's wireComputedField). Deliberately does *not*
 * borrow the other fields' bordered box shape (border/radius/padding to look like a text
 * input/select) — an early version did, and it read as editable at a glance, exactly the
 * confusion this type exists to avoid (real feedback, not a style nit). Shaped instead like
 * platform.css's own `.tag`/`.pill` convention (a rounded, borderless badge, --radius-pill) —
 * the visual language every app here already uses for "this is a value, not a control" (the
 * Priority column in mlp-app-service-call's own ticket table, say) — so a computed field reads
 * as a label sitting where a control would otherwise be, not a third kind of input. */
.mlp-computed-field {
  display: inline-block;
  /* platform.css's .field is a flex column (align-items: stretch by default) — every other
   * type's own box opts into that full width on purpose (width: 100% on .field input/select);
   * this type deliberately doesn't, so align-self overrides the stretch instead of relying on
   * width alone, or the pill would fill the row the same way a text input does. */
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--c-accent-wash);
  color: var(--c-accent);
  font-weight: 600;
  font-size: var(--t-sm);
}

/* The `tag-picker` field type — chips (styled like `.mlp-computed-field`'s own pill, the same
 * "this is a value, not a control" accent-wash look) plus a plain typing input, all in one
 * wrapped flex row that looks like an ordinary text field until a chip is added. The suggestion
 * popup reuses `.mlp-autocomplete__popup`/`.mlp-autocomplete__option` as-is (see
 * index.js's wireTagPicker) — no new popup CSS needed, it's the identical widget. */
.mlp-tag-picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface-raised);
}

.mlp-tag-picker:focus-within {
  border-color: var(--c-accent);
}

.mlp-tag-picker__chips {
  display: contents;
}

.mlp-tag-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--c-accent-wash);
  color: var(--c-accent);
  font-weight: 600;
  font-size: var(--t-sm);
}

/* Only rendered for a chip whose value carries an `href` (render-field.js's renderTagPicker) —
 * a freshly typed/picked chip never has one until a real save resolves it fresh, so this only
 * ever appears on chips the server already confirmed link to something, on page load. */
.mlp-tag-picker__chip-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.mlp-tag-picker__chip-open:hover {
  opacity: 0.7;
}

.mlp-tag-picker__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  /* The × glyph carries a lot of internal whitespace within its own em box compared to the
   * 14px open-icon SVG next to it — a plain 1em read visibly smaller/thinner at a glance, even
   * though both boxes were nominally the same size. Bumped to read as the same weight. */
  font-size: 1.35em;
  line-height: 1;
  cursor: pointer;
}

.mlp-tag-picker__chip-remove:hover {
  opacity: 0.7;
}

/* platform.css's `.field input[type='text']` (specificity 0,2,1) otherwise beats a plain
 * `.mlp-tag-picker__input` (0,1,0) and its own border wins, doubling up with the wrapper's —
 * matching that specificity exactly (0,2,1) and relying on load order instead (mlp-forms.css
 * loads after platform.css) is this file's own documented idiom, not a new one. */
.mlp-tag-picker input.mlp-tag-picker__input {
  /* flex-basis: 100% forces this onto its own wrapped line below any existing chips (a
   * standard flex-wrap trick) — so typing never nudges an already-placed chip sideways, and
   * the input itself always has the field's full width to work with, chips or not. */
  flex: 1 1 100%;
  min-width: 0;
  border: none;
  background: none;
  padding: 0.2rem;
  font: inherit;
  color: var(--c-text);
}

.mlp-tag-picker__input:focus {
  outline: none;
}

/* The `photo` field type's preview + file input + Remove button + click-to-enlarge lightbox,
 * grouped as one visual unit (see render-field.js's renderPhoto and index.js's wirePhotoField)
 * — this is what replaced mlp-app-wardrobe's old three-separate-pieces layout (a view-authored
 * <img>, this library's plain `file` field, and a hand-added `checkbox` field the route had to
 * name itself). The lightbox itself is mlp-dialog's own mechanism, reused declaratively — see
 * the .mlp-photo-field__lightbox rules further down. */
.mlp-photo-field {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.mlp-photo-field__preview {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border-strong);
}

/* Wraps .mlp-photo-field__image — the actual click-to-enlarge target (see render-field.js's
 * renderPhoto and mlp-dialog's data-mlp-dialog-trigger convention). Reset to hug the image
 * exactly, no default button chrome; the empty-state icon is a plain, non-interactive sibling,
 * never wrapped in this — there's nothing to enlarge when there's no photo yet. */
.mlp-photo-field__zoom {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: zoom-in;
}

.mlp-photo-field__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.mlp-photo-field__zoom:hover .mlp-photo-field__image {
  opacity: 0.85;
}

.mlp-photo-field__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--c-text-muted);
}

.mlp-photo-field__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.mlp-photo-field__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border: none;
  background: none;
  padding: 0;
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

.mlp-photo-field__remove:hover {
  color: var(--c-danger);
}

/* index.js's wirePhotoField toggles the native `hidden` attribute on these three elements —
 * each one's own `display` rule above (block/flex/inline-flex, needed so it lays out correctly
 * *when shown*) is an author style, which always beats the `[hidden] { display: none }` the
 * browser applies by default, so without this override `hidden` would be silently ignored on
 * all three — caught only by actually driving the widget with Playwright, not by reading the
 * markup. */
.mlp-photo-field__zoom[hidden],
.mlp-photo-field__empty[hidden],
.mlp-photo-field__remove[hidden] {
  display: none;
}

/* The lightbox — .mlp-dialog is mlp-dialog's own class (sizing/backdrop mechanism); this repo
 * adds a second class alongside it as a modifier, the same "extend via an additional class,
 * don't touch the shared library's own CSS" pattern this codebase already uses elsewhere
 * (.filter-bar--end, .button--secondary) — wider than the default dialog box since it exists to
 * show an image, not a form. */
.mlp-photo-field__lightbox {
  width: min(90vw, 48rem);
  max-height: 90vh;
}

.mlp-photo-field__lightbox .mlp-dialog__header {
  justify-content: flex-end;
}

.mlp-photo-field__lightbox-image {
  display: block;
  width: 100%;
  max-height: calc(90vh - 5rem);
  object-fit: contain;
}