@import url("../Polhem.Web.Blazor/polhem-blazor.css");

/* The rules that depend on Fluent UI. Web components keep their inside in a shadow root, so these use design tokens and
   what is outside it, not internal class names. */
/* A brand tint, because the neutral selected color is the grid's hover color. */
tr.polhem-grid__row--selected, td.polhem-grid__row--selected { background: var(--colorBrandBackground2); }
/* A Fluent button is at least 96px wide by default, and body clips what overflows, so a phone lost the last command. */
.polhem-form-page__toolbar, .polhem-form-page__pager { flex-wrap: wrap; }
.polhem-form-page__toolbar fluent-button, .polhem-form-page__pager fluent-button { min-width: 64px; }
/* Columns keep their layout width, so a narrow screen scrolls the grid and not the whole page. */
.polhem-grid { overflow-x: auto; }
/* The grid's fixed-layout table fills its container and spreads the space its columns leave over across them, so a
   column dragged narrower came out wider. An empty cell at the end of every row takes that space instead, and each
   column keeps exactly its width; once the columns are wider than the container the cell is empty and the grid
   scrolls. */
.polhem-grid table.fluent-data-grid tr::after { content: ""; display: table-cell; border-bottom: 1px solid var(--colorNeutralStroke2); }
.polhem-grid__toolbar { position: sticky; left: 0; }
/* An editor is taller than the text it replaces, and the row must not jump when the cell opens. */
.polhem-grid-cell__editor { margin-block: -6px; }
.polhem-grid__header { display: inline-flex; align-items: center; gap: 2px; }
.polhem-grid__header--required { color: var(--colorBrandForeground1); }
.polhem-grid-cell__text:hover, .polhem-grid-cell__text:focus { outline-color: var(--colorNeutralStroke1); }
.polhem-form-page__dirty { color: var(--colorStatusWarningForeground1); margin-left: 8px; font-size: 13px; }
.polhem-form-layout__label--required { color: var(--colorBrandForeground1); }
.polhem-grid-filter__button { min-width: 0; }
.polhem-grid-filter__error { color: var(--colorStatusDangerForeground1); font-size: 13px; }
.polhem-card { padding: 10px; border: 1px solid var(--colorNeutralStroke1); border-radius: 6px; cursor: pointer; }
.polhem-card--selected { background: var(--colorNeutralBackground1Selected); }
.polhem-card-list__limit { margin-top: 8px; font-size: 13px; color: var(--colorNeutralForeground3); }
.polhem-dialog { display: contents; }
.polhem-related-record-dialog, .polhem-row-edit-dialog, .polhem-lookup-dialog { --dialog-width: min(900px, 90vw); }

.polhem-login-panel__label, .polhem-native-input__label { display: block; font-size: 13px; }
.polhem-login-panel__input, .polhem-native-input { box-sizing: border-box; width: 100%; padding: 5px 8px; font: inherit; border: 1px solid var(--colorNeutralStroke1); border-radius: 4px; }
.polhem-login-panel__submit, .polhem-native-button { padding: 6px 12px; font: inherit; color: var(--colorNeutralForegroundOnBrand); background: var(--colorBrandBackground); border: 0; border-radius: 4px; cursor: pointer; }
.polhem-lookup-panel__search-input { flex: 1; }
.polhem-shell-signin { border: 1px solid var(--colorNeutralStroke1); border-radius: 6px; }
.polhem-shell-signin__title { font-size: 20px; font-weight: 600; }
.polhem-shell-signin__hint { font-size: 13px; color: var(--colorNeutralForeground3); }

.polhem-shell { display: grid; grid-template: "header header" auto "nav main" 1fr / 200px 1fr; min-height: 100vh; }
.polhem-shell:not(.polhem-shell--menu-open) { grid-template-columns: 0 1fr; }
.polhem-shell__header { grid-area: header; display: flex; align-items: center; gap: 8px; padding: 6px 12px; color: var(--colorNeutralForegroundOnBrand); background: var(--colorBrandBackground); }
.polhem-shell__spacer { flex: 1; }
.polhem-shell__menu-button, .polhem-shell__signout { padding: 4px 8px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.polhem-shell__nav { grid-area: nav; overflow: hidden; border-right: 1px solid var(--colorNeutralStroke1); }
.polhem-shell:not(.polhem-shell--menu-open) .polhem-shell__nav { visibility: hidden; border: 0; }
.polhem-shell__main { grid-area: main; min-width: 0; padding: 16px; }
.polhem-shell--narrow { grid-template: "header" auto "main" 1fr / 1fr; }
.polhem-shell--narrow:not(.polhem-shell--menu-open) { grid-template-columns: 1fr; }
.polhem-shell--narrow .polhem-shell__nav { position: fixed; z-index: 2; top: 0; bottom: 0; left: 0; width: 200px; background: var(--colorNeutralBackground1); }
.polhem-shell--narrow:not(.polhem-shell--menu-open) .polhem-shell__nav { transform: translateX(-100%); }
.polhem-shell__overlay { position: fixed; z-index: 1; inset: 0; background: rgb(0 0 0 / 30%); }
/* A folder is a small capitalised heading over its forms, which are indented under it; folders after the first are
   separated by a rule. */
.polhem-shell-nav__header { padding: 12px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colorNeutralForeground3); }
.polhem-shell-nav__header ~ .polhem-shell-nav__header { margin-top: 8px; border-top: 1px solid var(--colorNeutralStroke2); }
.polhem-shell-nav__link { display: block; padding: 6px 16px 6px 28px; border-left: 3px solid transparent; color: inherit; text-decoration: none; }
.polhem-shell-nav__link:hover { background: var(--colorNeutralBackground1Hover); }
.polhem-shell-nav__link.active { border-left-color: var(--colorBrandStroke1); background: var(--colorNeutralBackground1Selected); font-weight: 600; }
.polhem-shell-nav__loading, .polhem-shell-nav__empty { padding: 8px 16px; font-size: 13px; color: var(--colorNeutralForeground3); }