/* FILE: css/forms.css — form & modal polish (loaded last) */
:root { --app-vh: 100dvh; }

/* Modal always fits the *visible* screen (URL bar / keyboard aware, set by js/form-ux.js) */
.app-modal {
  position: fixed; inset: 0; height: var(--app-vh, 100dvh);
  padding-top: 0 !important; z-index: 80;
}
html .app-modal .modal-panel {
  max-height: calc(var(--app-vh, 100dvh) - 10px) !important;
  overscroll-behavior: contain;
  scroll-padding-bottom: 96px;
}
@media (min-width: 640px) {
  html .app-modal .modal-panel { max-height: min(88vh, calc(var(--app-vh, 100dvh) - 32px)) !important; }
}

/* Header: solid, above content */
.app-modal .modal-panel > div:first-child { z-index: 5; }
@media (max-width: 639px) { .app-modal .modal-panel > div:first-child { padding-top: 1.25rem; } }

/* Sticky Save / Cancel bar: always reachable, never scrolled away */
.app-modal form.has-actions { padding-bottom: 0 !important; }
.form-actions {
  position: sticky; bottom: 0; z-index: 4;
  margin: 1.25rem -1.5rem 0; padding: .75rem 1.5rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid #e2e8f0;
  box-shadow: 0 -8px 16px -12px rgba(15,23,42,.18);
}
.form-actions > button { min-height: 46px; }
html.dark .form-actions { background: #131b2c; border-top-color: #22304a; box-shadow: none; }
@media (max-width: 380px) {
  .form-actions { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Inputs: 16px stops mobile browsers zooming in; taller touch targets */
@media (max-width: 639px) {
  .app-modal input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
  .app-modal select, .app-modal textarea { font-size: 16px !important; min-height: 46px; }
  .app-modal input[type=date] { min-height: 46px; }
  .app-modal label { font-size: .875rem; }
}
.app-modal input[type=number]::-webkit-outer-spin-button,
.app-modal input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.app-modal input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.app-modal input, .app-modal select, .app-modal textarea { scroll-margin: 90px 0 110px; }
.app-modal input:user-invalid, .app-modal select:user-invalid { border-color: #f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,.12); }

/* Section headings inside long forms */
.form-section {
  display: flex; align-items: center; gap: .6rem;
  font-size: .75rem; font-weight: 600; color: #64748b; letter-spacing: .01em;
  padding-top: .25rem;
}
.form-section::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
html.dark .form-section::after { background: #22304a; }
.form-hint { font-size: 11.5px; color: #94a3b8; margin-top: .3rem; line-height: 1.35; }

/* Live margin chip on the product form */
.margin-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; font-size: 12px; font-weight: 600; }
.margin-chip.ok { background: #ecfdf5; color: #047857; }
.margin-chip.warn { background: #fffbeb; color: #b45309; }
.margin-chip.bad { background: #fff1f2; color: #be123c; }
html.dark .margin-chip.ok { background: rgba(16,185,129,.14); color: #6ee7b7; }
html.dark .margin-chip.warn { background: rgba(245,158,11,.14); color: #fcd34d; }
html.dark .margin-chip.bad { background: rgba(244,63,94,.14); color: #fda4af; }