/* Create/edit pages: page frame, sections, translations, file fields, save bar, confirm dialog. */

.form-page { max-width: 54rem; }
.form-page .back-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.75rem; color: var(--mc-muted); font-size: 0.875rem; }
.form-page .back-link:hover { color: var(--mc-ink); text-decoration: none; }
.form-page .page-header { margin-bottom: 1.25rem; }
.form-page .page-header .actions form { display: inline; }

.form-section { margin-bottom: 1.25rem; border: 1px solid var(--mc-border); border-radius: var(--mc-radius); background: var(--mc-surface); box-shadow: var(--mc-shadow-sm); }
.form-section > header { padding: 1rem 1.25rem 0; }
.form-section > header h2 { font-size: 1.0625rem; margin: 0; }
.form-section > header p { margin: 0.2rem 0 0; color: var(--mc-muted); font-size: 0.875rem; }
.form-section-body { padding: 1.25rem; }
.form-section-body > :last-child { margin-bottom: 0; }
.form-section-body > .form-section-note { margin-bottom: 1rem; color: var(--mc-muted); font-size: 0.875rem; }

/* The save bar stays in view at the bottom of a long form */
.form-actions { position: sticky; bottom: 0; z-index: 20; margin: 0 -0.5rem; padding: 0.75rem 0.5rem 1rem; background: linear-gradient(to top, var(--mc-bg) 65%, transparent); }
.form-actions-inner { display: flex; gap: 0.5rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--mc-border); border-radius: var(--mc-radius); background: var(--mc-surface); box-shadow: var(--mc-shadow); }

/* Translations and other repeated items */
.collection-list { display: grid; gap: 1rem; margin-bottom: 1rem; }
.collection-item { border: 1px solid var(--mc-border); border-radius: var(--mc-radius); background: var(--mc-surface-2); overflow: hidden; }
.collection-item-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--mc-border); background: var(--mc-surface); }
.collection-item-title { font-weight: 600; }
.collection-item-body { padding: 1rem 1rem 0.25rem; }
.collection-item-body .form-control, .collection-item-body .form-select { background-color: var(--mc-surface); }
.collection-empty { margin: 0 0 1rem; padding: 1rem; border: 1px dashed var(--mc-border-strong); border-radius: var(--mc-radius-sm); color: var(--mc-muted); text-align: center; }

/* Uploads */
.file-current { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.6rem; padding: 0.6rem; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm); background: var(--mc-surface); }
.file-current img { display: block; width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: var(--mc-radius-sm); background: var(--mc-surface-2); }
.file-current .file-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--mc-radius-sm); background: var(--mc-surface-2); color: var(--mc-muted); font-size: 1.4rem; flex: none; }
.file-current .file-meta { min-width: 0; }
.file-current .file-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.file-current.is-replaced { opacity: 0.5; }
.file-preview { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; padding: 0.5rem; border: 1px dashed var(--mc-brand); border-radius: var(--mc-radius-sm); font-size: 0.875rem; }
.file-preview[hidden] { display: none; }
.file-preview img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: var(--mc-radius-sm); background: var(--mc-surface-2); }
.file-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Confirm dialog */
dialog.confirm-dialog { width: min(26rem, calc(100vw - 2rem)); padding: 1.4rem 1.5rem 1.2rem; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-lg); background: var(--mc-surface); color: var(--mc-ink); box-shadow: var(--mc-shadow-lg); }
dialog.confirm-dialog::backdrop { background: rgba(10, 12, 17, 0.55); backdrop-filter: blur(2px); }
dialog.confirm-dialog h2 { font-size: 1.125rem; margin: 0 0 0.4rem; }
dialog.confirm-dialog p { margin: 0 0 1.2rem; color: var(--mc-muted); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

@media (max-width: 575.98px) {
  .form-section-body { padding: 1rem; }
  .file-current { flex-wrap: wrap; }
}

/* Long checkbox lists */
.checklist-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.checklist-toolbar .form-control { flex: 1 1 14rem; max-width: 20rem; }
.checklist-count { margin-left: auto; color: var(--mc-muted); font-size: 0.8125rem; }
.checklist-box { max-height: 17rem; overflow-y: auto; padding: 0.6rem 0.85rem; border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm); background: var(--mc-surface); }
.checklist-box .form-check { margin-bottom: 0.35rem; }
.checklist-box .form-check[hidden] { display: none; }
.checklist-empty { margin: 0; color: var(--mc-muted); text-align: center; }

/* Password strength meter (password_strength_controller.js) */
.pw-toggle { padding: 0.15rem 0; font-size: 0.8125rem; }
.pw-meter { margin-top: 0.4rem; }
.pw-meter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-meter-bar span { height: 6px; border-radius: 3px; background: var(--mc-border); transition: background-color 0.15s; }
.pw-meter[data-score="0"] .pw-meter-bar span.on, .pw-meter[data-score="1"] .pw-meter-bar span.on { background: var(--mc-danger); }
.pw-meter[data-score="2"] .pw-meter-bar span.on { background: var(--mc-warning); }
.pw-meter[data-score="3"] .pw-meter-bar span.on, .pw-meter[data-score="4"] .pw-meter-bar span.on { background: var(--mc-success); }
.pw-meter-label { margin-top: 0.3rem; font-size: 0.8125rem; font-weight: 600; color: var(--mc-ink-2); }
.pw-meter-problems { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--mc-danger); font-size: 0.8125rem; }
.pw-meter-problems:empty { display: none; }