/* Shared controls only. Navigation, filters, cards and stage colors remain local. */
:root {
  --mly-ui-ink: #171a18;
  --mly-ui-muted: #626866;
  --mly-ui-border: #dfe4e0;
  --mly-ui-surface: #f5f7f5;
  --mly-ui-focus: #277449;
  --mly-ui-positive: #286443;
  --mly-ui-negative: #a32e35;
  --mly-ui-pending: #855d16;
  --mly-ui-radius: 12px;
  --mly-ui-speed: 160ms;
}

/* Explicit action controls: segmented choices and reading navigation are excluded. */
:is(.btn, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
    .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button)
:where(svg) { flex-shrink: 0; }

:is(.btn, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
    .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button):not(:where([aria-pressed], [role=tab], .btn-ghost, .is-quiet, .is-danger-quiet,
             .mly-contract-reader-nav *, .mly-benefit-switch *)) {
  border-radius: var(--mly-ui-radius);
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background var(--mly-ui-speed) ease, border-color var(--mly-ui-speed) ease,
              color var(--mly-ui-speed) ease, box-shadow var(--mly-ui-speed) ease,
              transform var(--mly-ui-speed) ease;
}

/* Secondary actions share a neutral outline; explicit primary/destructive variants follow. */
:is(.btn-secondary, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
    .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button):not(:where([aria-pressed], [role=tab], .is-primary, .is-quiet, .is-danger, .is-danger-quiet,
             .mly-contract-reader-nav *, .mly-contract-refresh *, .mly-benefit-switch *)) {
  color: var(--mly-ui-ink);
  background: #fff;
  border: 1px solid var(--mly-ui-border);
}

:is(.btn-secondary, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
    .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button):not(:where([aria-pressed], [role=tab], .is-primary, .is-quiet, .is-danger, .is-danger-quiet,
             .mly-contract-reader-nav *, .mly-contract-refresh *, .mly-benefit-switch *)):hover:not(:disabled):not([aria-disabled=true]) {
  color: var(--mly-ui-ink);
  background: var(--mly-ui-surface);
  border-color: #c7d0c9;
  transform: none;
}

:is(.btn.btn-primary, .mly-verification-button.is-primary, .mly-invoice-button.is-primary,
    .mly-benefit-button.is-primary, .mly-notice-button.is-primary,
    .mly-contract-button.is-primary, .mly-project-button.is-primary, .mly-cf-button.is-primary) {
  color: #fff;
  background: var(--mly-ui-ink);
  border: 1px solid var(--mly-ui-ink);
}

:is(.btn.btn-primary, .mly-verification-button.is-primary, .mly-invoice-button.is-primary,
    .mly-benefit-button.is-primary, .mly-notice-button.is-primary,
    .mly-contract-button.is-primary, .mly-project-button.is-primary, .mly-cf-button.is-primary):hover:not(:disabled):not([aria-disabled=true]) {
  color: #fff;
  background: #303832;
  border-color: #303832;
  transform: none;
}

:is(.btn.btn-danger, .mly-invoice-button.is-danger, .mly-benefit-button.is-danger) {
  color: var(--mly-ui-negative);
  background: #fff7f7;
  border: 1px solid #ecd3d5;
}

:is(.btn.btn-danger, .mly-invoice-button.is-danger, .mly-benefit-button.is-danger):hover:not(:disabled):not([aria-disabled=true]) {
  background: #fceced;
  border-color: #d9a7ab;
}

:is(.btn, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
    .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button):focus-visible {
  outline: 2px solid var(--mly-ui-focus);
  outline-offset: 3px;
}

:is(.btn, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
    .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button):is(:disabled, [aria-disabled=true]) {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* Only capture fields; search, filters, toggles and native file pickers keep their behavior. */
:is(.form-field, .mly-verification, .mly-invoices, .mly-benefit-form,
    .mly-benefit-confirm, .mly-notice-composer, .mly-project-field, .rental-guarantor-review)
:is(input, select, textarea):not(:where([type=checkbox], [type=radio], [type=file], [type=range], [type=hidden], [type=submit])) {
  border-color: var(--mly-ui-border);
  border-radius: var(--mly-ui-radius);
  color: var(--mly-ui-ink);
  line-height: 1.6;
  min-height: 44px;
  transition: border-color var(--mly-ui-speed) ease, box-shadow var(--mly-ui-speed) ease;
}

:is(.form-field, .mly-verification, .mly-invoices, .mly-benefit-form,
    .mly-benefit-confirm, .mly-notice-composer, .mly-project-field, .rental-guarantor-review)
:is(input, select, textarea):not(:where([type=checkbox], [type=radio], [type=file], [type=range], [type=hidden], [type=submit])):focus-visible {
  border-color: var(--mly-ui-focus);
  outline: 2px solid var(--mly-ui-focus);
  outline-offset: 2px;
  box-shadow: none;
}

:is(.form-field, .mly-verification, .mly-invoices, .mly-benefit-form,
    .mly-benefit-confirm, .mly-notice-composer, .mly-project-field, .rental-guarantor-review)
:is(input, select, textarea)[aria-invalid=true] {
  border-color: var(--mly-ui-negative);
  outline-color: var(--mly-ui-negative);
}

:is(.crm-field-error, .mly-project-field-error, .inv-filter-error) {
  color: var(--mly-ui-negative);
  line-height: 1.65;
}

:is(.mly-verification-error, .mly-invoice-error, .mly-benefit-error,
    .mly-notice-error, .mly-contract-error, .mly-project-error, .crm-error-summary) {
  color: var(--mly-ui-negative);
  background: #fff5f5;
  border: 1px solid #efdadd;
  border-radius: var(--mly-ui-radius);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* A received response is not automatically success: callers set its actual tone. */
:is(.mly-invoice-feedback, .mly-verification-feedback, .mly-benefit-feedback,
    .mly-notice-feedback)[data-tone]:not(:empty) {
  border: 1px solid transparent;
  border-radius: var(--mly-ui-radius);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

:is(.mly-invoice-feedback, .mly-verification-feedback, .mly-benefit-feedback,
    .mly-notice-feedback)[data-tone=info]:not(:empty) {
  color: #385b7c;
  background: #f1f6fc;
  border-color: #dce7f3;
}

:is(.mly-invoice-feedback, .mly-verification-feedback, .mly-benefit-feedback,
    .mly-notice-feedback)[data-tone=success]:not(:empty) {
  color: var(--mly-ui-positive);
  background: #eff8f1;
  border-color: #d9ebde;
}

:is(.mly-invoice-feedback, .mly-verification-feedback, .mly-benefit-feedback,
    .mly-notice-feedback)[data-tone=warning]:not(:empty) {
  color: var(--mly-ui-pending);
  background: #fff9e9;
  border-color: #eee2bf;
}

:is(.mly-invoice-feedback, .mly-verification-feedback, .mly-benefit-feedback,
    .mly-notice-feedback)[data-tone=error]:not(:empty) {
  color: var(--mly-ui-negative);
  background: #fff5f5;
  border-color: #efdadd;
}

/* Action groups keep DOM order, their existing alignment and contextual positioning. */
:is(.drawer-footer, .detail-actions, .crm-draft-actions, .mly-verification-actions,
    .mly-invoice-actions, .mly-benefit-actions, .mly-notice-actions, .mly-cf-actions,
    .mly-contract-signature-actions, .mly-project-model-actions, .mly-project-form-bottom,
    .mly-contract-reader-footer [data-contract-reader-actions]) {
  gap: 10px;
  flex-wrap: wrap;
}

:is(.drawer-footer, .detail-actions, .crm-draft-actions, .mly-verification-actions,
    .mly-invoice-actions, .mly-benefit-actions, .mly-notice-actions, .mly-cf-actions,
    .mly-contract-signature-actions, .mly-project-model-actions, .mly-project-form-bottom,
    .mly-contract-reader-footer [data-contract-reader-actions])
> :is(.btn, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
      .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button) {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Busy styling is opt-in, separate from each module's existing loading state. */
button[data-mly-busy=true] {
  cursor: wait;
  opacity: .72;
  transform: none;
}

button[data-mly-busy=true]::after,
.mly-ui-spinner {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mly-ui-spin .75s linear infinite;
}

.mly-ui-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  color: var(--mly-ui-muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}

.mly-ui-loading .mly-ui-spinner { color: var(--mly-ui-focus); }

/* Shared notifications remain compact: tone is a small cue, never the whole screen. */
.toast[data-tone] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 10px 10px 16px;
  border: 1px solid #343a36;
  border-radius: 14px;
  background: var(--mly-ui-ink);
  color: #fff;
  box-shadow: 0 10px 32px #13211926;
  line-height: 1.6;
  text-align: left;
}

.toast[data-tone].visible { pointer-events: auto; }
.toast[data-tone=success] { --mly-ui-feedback-color: #a5e6bb; }
.toast[data-tone=error] { --mly-ui-feedback-color: #ffb6bb; }
.toast[data-tone=warning] { --mly-ui-feedback-color: #f5d68d; }
.toast[data-tone=info] { --mly-ui-feedback-color: #bed4ff; }

.mly-ui-feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--mly-ui-feedback-color, #fff);
}

.mly-ui-feedback-icon svg { width: 20px; height: 20px; }
.mly-ui-feedback-message { min-width: 0; overflow-wrap: anywhere; }
.mly-ui-feedback-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  min-height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 9px;
  color: #dce2de;
  background: transparent;
}
.mly-ui-feedback-dismiss:hover { color: #fff; background: #ffffff17; }
.mly-ui-feedback-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mly-ui-feedback-dismiss svg { width: 16px; height: 16px; }

@keyframes mly-ui-spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  :is(.form-field, .mly-verification, .mly-invoices, .mly-benefit-form,
      .mly-benefit-confirm, .mly-notice-composer, .mly-project-field, .rental-guarantor-review)
  :is(input, select, textarea):not(:where([type=checkbox], [type=radio], [type=file], [type=range], [type=hidden], [type=submit])) {
    font-size: 16px;
  }

  :is(.drawer-footer, .detail-actions, .crm-draft-actions, .mly-verification-actions,
      .mly-invoice-actions, .mly-benefit-actions, .mly-notice-actions,
      .mly-contract-signature-actions, .mly-project-model-actions,
      .mly-contract-reader-footer [data-contract-reader-actions])
  > :is(.btn, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
        .mly-notice-button, .mly-contract-button, .mly-project-button) {
    flex: 1 1 130px;
    min-width: min(100%, 130px);
  }

  .toast[data-tone] { max-width: calc(100% - 24px); padding-left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .mly-verification-button, .mly-invoice-button, .mly-benefit-button,
      .mly-notice-button, .mly-contract-button, .mly-project-button, .mly-cf-button),
  :is(.btn, .mly-contract-button) svg, .toast[data-tone] {
    transition: none;
  }
  button[data-mly-busy=true]::after, .mly-ui-spinner { animation: none; }
}