/* Shared forms: grids, labels, contextual help, controls, options and form actions. */

.grid {
  display: grid;
  gap: var(--field-gap);
  min-width: 0;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.span-all {
  grid-column: 1 / -1;
}

.table-cell-note {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--slate-500);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.required-mark {
  color: var(--danger-text);
}

.user-create-form {
  align-items: end;
}

.field label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--slate-700);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--slate-700);
  font-weight: var(--weight-bold);
  cursor: pointer;
  min-height: var(--control-min);
  min-width: 0;
}

.checkbox-field input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--brand-blue-900);
}

.checkbox-field input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.field-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  min-width: 0;
  min-height: 1.5rem;
}

.field-label-row label {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.field-help {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.field-help summary {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--slate-600);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  list-style: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.field-help summary::-webkit-details-marker {
  display: none;
}

.field-help summary:hover,
.field-help[open] summary {
  background: var(--brand-blue-900);
  border-color: var(--brand-blue-900);
  color: var(--white);
}

.field-help summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.field-help-popover {
  position: fixed;
  right: auto;
  left: 0;
  top: 0;
  z-index: var(--z-popover);
  width: min(20rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  box-sizing: border-box;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-sm);
  border: 1px solid var(--brand-blue-900);
  border-radius: var(--radius-md);
  background: var(--brand-blue-900);
  color: var(--white);
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.field-help-popover::before {
  content: "";
  position: absolute;
  right: auto;
  left: calc(var(--field-help-arrow-x, 1rem) - .325rem);
  top: -.36rem;
  width: .65rem;
  height: .65rem;
  background: var(--brand-blue-900);
  border-left: 1px solid var(--brand-blue-900);
  border-top: 1px solid var(--brand-blue-900);
  transform: rotate(45deg);
}

.field-help-popover[data-placement="top"]::before {
  top: auto;
  bottom: -.36rem;
}

.field-hint {
  display: block;
  margin: var(--space-xs) 0 0;
  color: var(--slate-500);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.html-editor {
  display: grid;
  gap: var(--space-xs);
}

.html-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.html-editor-toolbar .btn {
  min-width: 0;
}

.html-editor-toolbar .btn.is-active,
.html-editor-toolbar .btn[aria-pressed="true"] {
  color: var(--white);
  background: var(--brand-blue-900);
  border-color: var(--brand-blue-900);
}

.html-editor-source {
  min-height: 10.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.html-editor-preview {
  min-height: 7rem;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--slate-800);
  padding: var(--space-md);
  line-height: 1.55;
}

.html-editor-preview.is-empty {
  color: var(--slate-500);
  font-style: italic;
}

.html-editor-preview > :first-child {
  margin-top: 0;
}

.html-editor-preview > :last-child {
  margin-bottom: 0;
}

.html-editor-preview h2,
.html-editor-preview h3 {
  color: var(--slate-900);
  line-height: 1.2;
  margin: var(--space-md) 0 var(--space-xs);
}

.html-editor-preview h2 {
  font-size: var(--text-xl);
}

.html-editor-preview h3 {
  font-size: var(--text-md);
}

.html-editor-preview p,
.html-editor-preview ul,
.html-editor-preview ol {
  margin: var(--space-xs) 0;
}

.html-editor-preview ul,
.html-editor-preview ol {
  padding-left: var(--space-lg);
}

.html-editor-preview a {
  color: var(--brand-blue-900);
  text-decoration: underline;
  text-underline-offset: .16em;
}

.html-editor-preview table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.html-editor-preview th,
.html-editor-preview td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--slate-100);
  background: var(--white);
  color: var(--slate-800);
  text-align: left;
  vertical-align: top;
}

.html-editor-preview th {
  width: 28%;
  background: var(--slate-50);
  color: var(--slate-900);
  font-weight: var(--weight-bold);
}

.field,
.grid > * {
  min-width: 0;
}

.login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  background: var(--slate-50);
}

.login-card {
  width: min(28rem, 100%);
  padding: var(--panel-padding);
  box-shadow: none;
  text-align: center;
}

.login-logo {
  display: block;
  width: min(15rem, 82%);
  height: auto;
  margin: 0 auto var(--space-xl);
  object-fit: contain;
}

.login-card h1 {
  margin: 0;
  color: var(--brand-blue-900);
  font-size: var(--text-2xl);
  line-height: 1.2;
}

.login-card h1 + p {
  margin: var(--space-2xs) 0 var(--space-lg);
}

.login-card form,
.login-card .flash {
  text-align: left;
}

.code-box {
  display: block;
  overflow-x: auto;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  color: var(--slate-800);
  font-family: var(--font-sans);
  overflow-wrap: anywhere;
}

.one-time-key {
  border-color: color-mix(in srgb, var(--brand-700) 32%, var(--slate-200));
  background: color-mix(in srgb, var(--brand-700) 3%, var(--white));
}

.one-time-key-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.form-actions .btn {
  flex: 0 1 auto;
}

.form-footer {
  grid-column: 1 / -1;
  padding-top: var(--space-md);
  border-top: 1px solid var(--slate-100);
}

.form-footer-sticky {
  position: sticky;
  bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  padding: var(--space-sm);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.form-save-status {
  margin-right: auto;
  color: var(--slate-600);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.compact-input {
  height: 2.25rem;
  min-height: 2.25rem;
  width: min(14rem, 100%);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
}

.submit-row {
  grid-column: 1 / -1;
}

.table-actions {
  justify-content: flex-end;
}

.nowrap {
  white-space: nowrap;
}

.push-right {
  margin-left: auto;
}

.form-stack {
  display: grid;
  gap: var(--section-gap);
  min-width: 0;
}

.form-section {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  margin: 0;
}

.form-section + .form-section {
  padding-top: var(--section-gap);
  border-top: 1px solid var(--slate-200);
}

.form-section h3 {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin: 0;
  color: var(--slate-800);
  font-size: var(--text-md);
  line-height: 1.2;
}

.form-step {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--white);
}

.option-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-grid-3 > .option-card:last-child:nth-child(3n+1) {
  grid-column: 1 / -1;
}

.option-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  min-height: 3.4rem;
  padding: var(--space-sm) var(--space-sm);
  border-right: 1px solid var(--slate-200);
  cursor: pointer;
}

.option-card:last-child {
  border-right: 0;
}

.option-card:hover {
  background: var(--slate-50);
}

.option-card:has(input:checked) {
  background: color-mix(in srgb, var(--brand-blue-900) 4%, var(--white));
}

.option-card:focus-within {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--focus-ring-color);
}

.option-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: .55;
}

.option-card input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--brand-blue-900);
}

.option-card span {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.option-card strong {
  color: var(--slate-700);
  font-size: var(--text-sm);
  line-height: 1.25;
}

.option-card small {
  color: var(--slate-500);
  font-size: var(--text-xs);
  line-height: 1.25;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-md);
}

.form-inline .grow {
  flex: 1 1 18rem;
}

.form-error {
  margin: 0;
  color: var(--danger-text);
  font-weight: var(--weight-bold);
}

.input,
.textarea,
.select {
  width: 100%;
  max-width: 100%;
  min-height: var(--control-min);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--slate-900);
  font: inherit;
  font-size: var(--text-control);
  line-height: 1.35;
  padding: var(--control-padding-block) var(--control-padding-inline);
  outline: none;
  transition: border-color var(--transition-ui), box-shadow var(--transition-ui), background-color var(--transition-ui);
}

.input[type="file"] {
  padding: var(--space-2xs);
}

.input[type="file"]::file-selector-button {
  min-height: 2.1rem;
  margin-right: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--slate-700);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui);
}

.input[type="file"]::file-selector-button:hover {
  border-color: var(--slate-300);
  background: var(--white);
  color: var(--brand-blue-900);
}

.textarea {
  min-height: 6rem;
  resize: vertical;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--focus-ring-color);
  box-shadow: var(--shadow-focus);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  cursor: not-allowed;
  opacity: .55;
  background: var(--slate-50);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--red-600);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red-600) 62%, var(--white));
}

.input::placeholder, .textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

:is(.input, .select, .textarea):hover:not(:disabled):not(:focus):not([aria-invalid="true"]) {
  border-color: var(--color-text-secondary);
}

:is(.input, .textarea)[readonly] {
  background: var(--color-canvas);
}

:is(.input, .textarea, .select)[aria-invalid="true"]:focus {
  border-color: var(--danger-text);
  box-shadow: 0 0 0 2px var(--danger-text);
}

.form-actions > form {
  margin: 0;
  min-width: 0;
}

@media (min-width: 901px) {
  .option-grid-3 > .option-card:nth-last-child(2):nth-child(3n+1) {
    grid-column: span 2;
  }
}

@media (min-width: 1180px) {
  .user-create-form {
    grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1fr) minmax(12rem, 1fr) max-content;
    gap: var(--space-sm);
  }

  .grid.user-create-form > .field {
    grid-column: auto;
  }

  .user-create-form .submit-row {
    grid-column: auto;
    width: auto;
    margin-left: 0;
    justify-content: flex-start;
  }

  .user-create-form .submit-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (min-width: 641px) and (max-width: 1179px) {
  .category-create-form .form-actions,
  .user-create-form .submit-row {
    grid-column: auto;
    width: auto;
    align-self: end;
  }

  .category-create-form .form-actions .btn,
  .user-create-form .submit-row .btn {
    flex: 0 1 auto;
  }
}

@media (max-width: 1179px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .checkbox-field {
    min-height: var(--control-min);
  }

  .field-help summary {
    width: var(--control-min);
    height: var(--control-min);
  }

  .compact-input {
    height: auto;
    min-height: var(--control-min);
    font-size: var(--text-md);
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .form-actions {
    width: 100%;
    margin-left: 0;
  }

  .form-actions .btn {
    flex: 1 1 12rem;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }

  .option-card {
    border-right: 0;
    border-bottom: 1px solid var(--slate-200);
  }

  .option-card:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .html-editor-toolbar .btn {
    flex: 1 1 8.5rem;
  }

  .html-editor-preview th {
    width: auto;
  }

  .field-label-row {
    position: relative;
  }

  .field-help {
    position: static;
  }

  .field-help-popover {
    right: auto;
    width: min(20rem, calc(100vw - 1.5rem));
  }

  .field-help-popover::before {
    right: auto;
    left: calc(var(--field-help-arrow-x, 1rem) - .325rem);
  }

  .html-editor-source {
    font-size: var(--text-md);
  }

  .input,
  .select,
  .textarea {
    font-size: var(--text-md);
  }

  .form-actions .btn {
    width: 100%;
  }

  .form-footer-sticky {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .form-footer-sticky .form-save-status {
    grid-column: 1 / -1;
    margin: 0;
  }

  .form-footer-sticky .btn {
    min-width: 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-actions > form .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (any-pointer: coarse) {
  .field-help summary {
    width: var(--control-touch);
    height: var(--control-touch);
  }

  .compact-input {
    min-height: var(--control-touch);
    height: auto;
    font-size: var(--text-md);
  }

  .input, .select, .textarea {
    font-size: var(--text-md);
  }
}