/* Export styles: the template picker, the style editor and the export dialog around it. */

/* Template cards in the new-export-style dialog. Each preview is drawn with the colours the template
   actually resolves to, so the swatch is the thing itself rather than an impression of it. */
.style-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

/* The border is the mark of being chosen, so it is there at full weight from the start and only its colour
   changes - nothing moves or reflows when a card is picked. Hovering fills the card instead. */
/* A button centres its content, so the preview and the label are stacked from the top explicitly. */
.style-template {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    outline: 1px solid var(--mud-palette-lines-default);
    outline-offset: -2px;
    border-radius: var(--ms-radius);
    overflow: hidden;
    cursor: pointer;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    transition: border-color 120ms ease, background-color 120ms ease, outline-color 120ms ease;
}

.style-template:focus-visible {
    border-color: var(--mud-palette-primary);
}

.style-template:hover {
    border-color: var(--mud-palette-primary-darken);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.style-template--chosen {
    border-color: var(--mud-palette-primary);
    outline-color: transparent;
}

/* A window onto the top of the page, the same height on every card: a denser template fills it with more of
   its table, and the paper shows where a sparser one runs out. */
.style-template__preview {
    height: 236px;
    padding: 14px 14px 0;
    overflow: hidden;
    background-color: var(--ms-surface-2);
}

/* The page as paper - the export's own colours, whatever the theme. */
.style-template__sheet {
    min-height: 100%;
    padding: 12px 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    font-family: var(--ms-font-ui);
    line-height: 1.3;
}

.style-template__title {
    text-align: center;
}

.style-template__accent {
    height: 1px;
    margin: 6px 0 8px;
}

.style-template__table {
    width: 100%;
    border-collapse: collapse;
}

.style-template__table th,
.style-template__table td {
    text-align: left;
    white-space: nowrap;
}

.style-template__table th:last-child,
.style-template__table td:last-child:not([colspan]) {
    text-align: right;
}

/* Square, as the export draws it: the app's grids round their header's outer corners. */
.style-template__table th:first-child,
.style-template__table th:last-child {
    border-radius: 0;
}

.style-template__label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.style-template__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ms-font-ui);
    font-size: .875rem;
    font-weight: 600;
}

.style-template__name .material-symbols-outlined {
    color: var(--mud-palette-primary);
    font-size: 18px;
}

.style-template__description {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    line-height: 1.45;
}

/* Ny eksportstil: the name, then the templates under their label. */
.style-create__name {
    max-width: 480px;
    margin-bottom: 18px;
}

/* Rediger eksportstil: the title on the left, the preview's switch at the right of the same line. */
.style-dialog__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-right: 40px;
}

.style-dialog__name {
    max-width: 480px;
    margin-bottom: 18px;
}

/* The export dialog is a short form until the style editor is opened inside it, and then needs the room that
   editor was drawn for. Keyed on the editor being present rather than on a class the dialog swaps: MudDialog
   reads Class and Options when it opens, so changing either while it is open does nothing. */
.ms-export-dialog:has(.style-editor),
.report-export-dialog:has(.style-editor) {
    width: min(920px, 96vw) !important;
    max-width: none !important;
}

/* The editor beside a preview of what it is describing. A width fixed here rather than left to the content:
   the sections hold different numbers of fields, and a dialog that resized for each of them moved the rail
   out from under the pointer on every change of section. */
.style-editing {
    display: flex;
    gap: 20px;
}

.style-editing__editor {
    flex: 1 1 auto;
    min-width: 0;
}

/* The same height as the editor beside it, so the two sides start and end together. */
.style-editing__preview {
    flex: 0 0 660px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: min(780px, calc(95vh - 250px));
}

/* Wide enough for the page beside the fields; narrower again when the preview is put away. */
.mud-dialog:has(.style-editing) {
    width: min(1000px, 96vw) !important;
    max-width: none !important;
}

/* Room for both, since whatever is not spent on the fields is the page you are judging. */
.mud-dialog:has(.style-editing--previewing) {
    width: min(1580px, 96vw) !important;
}

/* Fills what the bar above it leaves of the column's height. */
.style-preview {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ms-radius-sm);
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.style-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.style-preview__label {
    font-family: var(--ms-font-ui);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.style-preview__zoom {
    display: flex;
    align-items: center;
    gap: 2px;
}


.style-preview__frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.style-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: var(--mud-palette-text-secondary);
}

/* Where the page would be while the style has errors: tinted like a banner in the same tone, so it reads as
   the state of the style rather than a page still loading. */
.style-preview__blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 340px;
    padding: 20px 24px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--ms-tone) 30%, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius);
    background-color: color-mix(in srgb, var(--ms-tone) 6%, var(--mud-palette-surface));
}

:root[data-theme="dark"] .style-preview__blocked {
    background-color: color-mix(in srgb, var(--ms-tone) 12%, var(--mud-palette-surface));
}

.style-preview__blocked-icon {
    color: var(--ms-tone-ink);
    font-size: 32px;
}

.style-preview__blocked-title {
    color: var(--ms-tone-ink);
    font-family: var(--ms-font-ui);
    font-size: .9375rem;
    font-weight: 600;
}

.style-preview__blocked-text {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    line-height: 1.5;
}

/* Over the previous drawing rather than in place of it: a redraw that blanked the page would flicker on
   every change, which is most of them. */
.style-preview__drawing {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* The dialog is tall - the style editor decides that - so it is kept wide enough not to read as a column.
   Its own views are narrower than this and simply sit in it. */
.report-export-dialog {
    min-width: min(660px, 92vw);
}

/* A column of switches and fields has a natural width; left alone it would stretch to the dialog's. */
.report-settings-narrow {
    max-width: 560px;
}

.report-settings-note {
    max-width: 520px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* The style editor: the list of sections on the left, the one being edited on the right. A fixed height so
   the dialog does not resize as sections are changed - the content scrolls inside instead of the frame
   jumping under the pointer. */
.style-editor {
    /* Kept free to the right of every field for the marker that says a format ignores it. The role table
       leaves the same strip, so both end on the same line whether or not a marker is showing. */
    --style-marker-gutter: 34px;

    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ms-radius);
    overflow: hidden;

    /* One height rather than a min and a max: a min-height wins over a max-height when the two disagree, so
       on a short screen the pair grew the dialog instead of scrolling inside it. The subtraction is the
       dialog's own furniture - title, name field, actions - so the editor takes the rest of the window and
       the shorter sections stop scrolling as soon as there is room for them. The cap is above the tallest
       section rather than at it, since the preview beside it is worth every pixel it can have. */
    height: min(780px, calc(95vh - 250px));
}

/* Across the top of the editor, over the rail and the page alike: the problems belong to the whole style. The
   height they take comes out of the page below, which scrolls. */
.style-editor__issues {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.style-editor__body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* A field one of those errors is about, outlined in the error colour whether or not it has the pointer or the
   caret. */
.style-field--wrong .mud-input.mud-input-outlined .mud-input-outlined-border,
.style-field--wrong .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.style-field--wrong .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-error);
}

/* After the section's name in the rail, so a problem can be found from any section. */
.style-editor__mark {
    margin-left: auto;
    padding-left: 6px;
    font-size: 17px;
    color: var(--ms-tone-ink);
}

/* The only way back to the shipped values, so it sits apart from the sections rather than in the list. */
.style-editor__reset {
    margin-top: auto;
    padding-top: 16px;
}

.style-editor__page {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 24px 28px 28px;
}

.style-editor__head {
    margin-bottom: 22px;
}

.style-editor__title {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* What the section covers, where the field labels cannot say it on their own. Above the controls: it is read
   before the fields, not offered as an explanation afterwards. */
.style-editor__note {
    margin-top: 4px;
    max-width: 760px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.style-field__input {
    flex: 1 1 auto;
    min-width: 0;
}

.style-field__marker {
    flex: 0 0 auto;
    display: inline-flex;
    width: calc(var(--style-marker-gutter) - 2px);
    justify-content: center;
    align-items: center;
    color: var(--mud-palette-text-secondary);
}

.style-field__marker .material-symbols-outlined {
    font-size: 18px;
    cursor: help;
}

/* One row per role, one column per property, in a table of its own: size, weight and colour line up down the
   card and can be read as a set, not as three fields that happen to follow each other. Every row repeats the
   same track sizes, since a shared grid could not paint the head or the lines between rows. */
.style-roles {
    /* Proportions rather than fixed widths: the divider can hand this side of the dialog a good deal less
       room, and the columns give way together instead of the last one being pushed out. At the width the
       editor usually has, this lands close to 172 / 104 / 128 / 140 - the first track wider than it looks
       like it needs, because it carries the capitals switch under the name. */
    --style-roles-columns: minmax(140px, 1.15fr) minmax(84px, .6fr) minmax(104px, .75fr) minmax(116px, 1fr);

    /* Ends where the fields above end: the grid's width less the strip their markers sit in. */
    max-width: calc(620px - var(--style-marker-gutter));
    margin-right: var(--style-marker-gutter);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ms-radius);

    /* Four columns of controls have a width below which they stop being usable. Squeezed past it - the
       divider dragged most of the way across - the table scrolls rather than losing its last column. */
    overflow: auto hidden;
}

/* The type belongs to the fields above it, but is its own thing - enough air to read as a second block. */
.ms-form__grid + .style-roles {
    margin-top: 22px;
}

.style-roles__head,
.style-roles__row {
    display: grid;
    grid-template-columns: var(--style-roles-columns);
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

.style-roles__head {
    background: var(--mud-palette-background-gray);
}

.style-roles__row {
    padding: 10px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.style-roles__head > span {
    font-family: var(--ms-font-ui);
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.style-roles__name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-weight: 500;
    font-size: .84375rem;
}

/* Under the role's name rather than in a column of its own, which would be empty for most roles. */
.style-roles__toggle {
    display: flex;
    margin-right: 0;
}

/* The same size as the fields beside it, so the row reads as one line of settings. */
.style-roles__toggle .mud-switch-label,
.style-roles__toggle .mud-switch-span + * {
    font-size: .84375rem;
    color: var(--mud-palette-text-secondary);
}

/* Eksportstiler. */
.styles-none {
    color: var(--mud-palette-text-secondary);
}

.styles-grid--open .mud-table-body .mud-table-row {
    cursor: pointer;
}

.style-control {
    display: flex;
    align-items: center;
    gap: 2px;
}

.style-control--row-start {
    grid-column-start: 1;
}