/* Styles of the MMFR module (public/js/modules/mmfr). Loaded after css/app.css. */

/* --------------------------------------------------- Generated forms -- */
.mmfr-fields { display: grid; gap: 0.9rem; min-width: 0; }
.mmfr-fields-compact { gap: 0.5rem; }
.mmfr-ref { font-family: var(--font-id); font-size: 0.72rem; font-weight: 500; color: var(--slate); white-space: nowrap; }
.mmfr-fields .help-text { white-space: pre-line; }
.mmfr-group { border-left: 3px solid var(--line-soft); padding: 0.1rem 0 0.2rem 0.9rem; display: grid; gap: 0.6rem; min-width: 0; }
.mmfr-group-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mmfr-group-title { margin: 0; font-weight: 600; color: var(--ink); max-width: none; }
.mmfr-group-inline > .mmfr-fields > .grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.mmfr-optional { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.mmfr-choice { display: grid; gap: 0.6rem; }
.mmfr-segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.mmfr-segmented label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; cursor: pointer; border-right: 1px solid var(--line); font-weight: 500; }
.mmfr-segmented label:last-child { border-right: 0; }
.mmfr-segmented label.on { background: var(--mist); color: var(--ink); }
.mmfr-segmented input { margin: 0; }
.mmfr-na { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem 0.9rem; }
.mmfr-na > .field { flex: 1 1 12rem; }
.mmfr-na-box { display: inline-flex; align-items: center; gap: 0.35rem; padding-bottom: 0.55rem; white-space: nowrap; font-size: 0.9rem; }
.mmfr-na-value { margin: 0; padding: 0.45rem 0; }
.mmfr-na-group { flex: 1 1 100%; display: grid; gap: 0.4rem; }
.mmfr-line { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.mmfr-line > .field { flex: 1 1 9rem; min-width: 8rem; }
/* In a table, the column headers name the fields: their labels stay for screen readers only. */
.mmfr-compact > .label-row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mmfr-compact { margin: 0; }
.mmfr-compact .field-msg:empty { display: none; }

/* ---------------------------------------------------------------- Tables -- */
.mmfr-table-block { display: grid; gap: 0.5rem; min-width: 0; }
table.mmfr-table { width: 100%; border-collapse: collapse; }
table.mmfr-table th, table.mmfr-table td { padding: 0.35rem 0.5rem; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.mmfr-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--slate); background: var(--mist); }
table.mmfr-table tbody th { font-weight: 600; white-space: nowrap; padding-top: 0.7rem; }
table.mmfr-table td input, table.mmfr-table td select { min-width: 7rem; }
table.mmfr-summary td { padding-top: 0.55rem; }
table.mmfr-summary tr.mmfr-open { background: var(--mist); }
.mmfr-list-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.mmfr-pager { display: inline-flex; align-items: center; gap: 0.35rem; }
.mmfr-editor { border: 1px solid var(--line); border-radius: var(--r-s); padding: 0.9rem 1rem 1rem; background: var(--paper); display: grid; gap: 0.75rem; }
.mmfr-editor:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.mmfr-editor-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: center; }

/* ------------------------------------------------- Sections of a tab -- */
.mmfr-panel { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-m, 10px); padding: 1rem 1.25rem 1.25rem; margin-bottom: 1rem; }
.mmfr-index { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 1rem; padding: 0.4rem 0; }
.mmfr-index-item { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 0.2rem 0.7rem; font: inherit; font-size: 0.85rem; cursor: pointer; }
.mmfr-index-item:hover { background: var(--mist); }
.mmfr-only-toggle { margin-left: auto; }
.mmfr-section { display: grid; gap: 0.9rem; padding: 0.6rem 0 1rem; border-top: 1px solid var(--line-soft); scroll-margin-top: 3.5rem; }
.mmfr-section:first-of-type { border-top: 0; }
/* "Show only the problems": the fields, rows and sections without a problem are hidden. */
.mmfr-only-problems .mmfr-section .field:not(.field-error):not(.field-warning):not(:has(.field-error, .field-warning)) { display: none; }
.mmfr-only-problems .mmfr-table tbody tr:not(:has(.field-error, .field-warning)) { display: none; }
.mmfr-only-problems .mmfr-section:not(:has(.field-error, .field-warning)) { display: none; }
.mmfr-only-problems .mmfr-optional { display: none; }

/* ------------------------------------------------------- Administration -- */
.mmfr-cell { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; }
.mmfr-group-compact { border-left: 0; padding: 0; }

/* ------------------------------------------- Widths of the fields -- */
/* A field takes the width of what it holds; the fields of a group sit side by side and wrap. */
.mmfr-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.mmfr-row > .field, .mmfr-line > .field { margin: 0; }
/* Short fields grow up to the length of their label (on one line when it fits), long ones to their content. */
.field.mmfr-w-xs { flex: 0 1 auto; min-width: 7rem; max-width: 15rem; }
.field.mmfr-w-s { flex: 0 1 auto; min-width: 11rem; max-width: 17rem; }
.field.mmfr-w-m { flex: 0 1 auto; min-width: 16rem; max-width: 22rem; }
.field.mmfr-w-l { flex: 1 1 22rem; max-width: 34rem; }
.field.mmfr-w-full { flex: 1 1 100%; }
.mmfr-line > .field.mmfr-w-l { flex: 1 1 14rem; }
.mmfr-row > .mmfr-na, .mmfr-line > .mmfr-na { flex: 0 1 auto; }
.mmfr-na > .field { flex: 0 0 auto; }
.field[class*='mmfr-w-'] input, .field[class*='mmfr-w-'] select { width: 100%; max-width: 100%; }
table.mmfr-table td .field.mmfr-w-l, table.mmfr-table td .field.mmfr-w-full { min-width: 12rem; }
@media (max-width: 640px) { .field[class*='mmfr-w-'] { flex: 1 1 100%; width: auto; max-width: none; } }

/* ---------------------------------- Title bars: the light green of the logo -- */
.mmfr-section-title { margin: 0 0 0.25rem; padding: 0.45rem 0.8rem; background: var(--teal); color: var(--ink); border-radius: var(--r-s); font-size: 1rem; }
.mmfr-group-title:not(.sr-only) { padding: 0.3rem 0.7rem; background: var(--teal-wash); border-left: 4px solid var(--teal); border-radius: 0 var(--r-s) var(--r-s) 0; }
.mmfr-group { border-left: 0; padding-left: 0; }
.mmfr-group, .mmfr-group-head, .mmfr-slot { width: 100%; }
.mmfr-group-head { flex-wrap: wrap; }
.mmfr-group-head .mmfr-group-title { flex: 1 1 auto; }
table.mmfr-table thead th { background: var(--teal-wash); color: var(--ink); }
.mmfr-band-panel > h2.mmfr-band { margin: -1.5rem -1.75rem 1.1rem; padding: 0.7rem 1.75rem; background: var(--teal); color: var(--ink); border-radius: var(--r-m) var(--r-m) 0 0; }
.mmfr-section-title .mmfr-ref, .mmfr-band .mmfr-ref, .mmfr-group-title .mmfr-ref, table.mmfr-table thead .mmfr-ref { color: var(--ink); opacity: 0.8; }
.mmfr-group-title .help-button, table.mmfr-table thead .help-button { margin-left: 0.25rem; }

/* ------------------------- Choices between simple values, small groups -- */
.mmfr-stack { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.mmfr-stack > .field { flex: 0 0 auto; width: 100%; }
.mmfr-stack > .field.mmfr-w-xs { max-width: 15rem; }
.mmfr-stack > .field.mmfr-w-s { max-width: 17rem; }
.mmfr-stack > .field.mmfr-w-m { max-width: 22rem; }
.mmfr-alt { display: grid; gap: 0.4rem; }
.mmfr-alt-title { margin: 0; font-weight: 600; max-width: none; }
.mmfr-or { align-self: center; color: var(--slate); font-style: italic; padding-top: 1.2rem; }
.mmfr-line > .mmfr-or { padding-top: 0.45rem; }
.mmfr-fields input::placeholder, .mmfr-fields textarea::placeholder, table.mmfr-table input::placeholder { color: #8a9391; opacity: 1; }

/* ------------------------------------------------------- Version .7 -- */
/* "Not available" to the right of its fields. */
.mmfr-na { flex-wrap: nowrap; align-items: flex-end; }
.mmfr-na-group { flex: 1 1 auto; }
.mmfr-na-box { flex: none; }
/* Rates as a table, with their total. */
table.mmfr-rates { width: auto; min-width: 28rem; }
table.mmfr-rates td .field { min-width: 9rem; }
table.mmfr-table tfoot th, table.mmfr-table tfoot td { font-weight: 700; border-top: 2px solid var(--teal); background: var(--teal-wash); }
.mmfr-total { white-space: nowrap; }
.mmfr-help-row td { padding-top: 0; }
.mmfr-plain { border: 0; padding: 0; margin: 0; }
/* Justifications. */
.mmfr-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mmfr-warnings li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line-soft); border-left: 4px solid #b26a00; border-radius: var(--r-s); }
.mmfr-done { color: var(--green); font-weight: 600; white-space: nowrap; }
.mmfr-xpath { font-size: 0.72rem; overflow-wrap: anywhere; max-width: 26rem; }
.mmfr-justify-text { min-width: 22rem; }
.mmfr-justify-text textarea { width: 100%; }
/* Assets. */
.mmfr-add-asset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.75rem; padding: 0.75rem; background: var(--teal-wash); border-radius: var(--r-s); }
.mmfr-add-asset .field { margin: 0; min-width: 18rem; }
.mmfr-problems { color: var(--st-alert, #b3261e); font-weight: 600; white-space: nowrap; }
.mmfr-not-held { margin-top: 0.75rem; }
.mmfr-na-box input { width: auto; margin: 0; }
.mmfr-table-block .table-wrap:has(> table.mmfr-rates) { width: fit-content; max-width: 100%; }