/* Shared shell and responsive controls. Keep page data grids as their own scroll surfaces. */
.main-layout-header { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.2fr) minmax(180px, 1fr); align-items: center; min-height: 64px; gap: 20px; padding: 8px 20px; border-bottom-width: 3px !important; box-sizing: border-box; }
.topbar-brand, .topbar-actions { display: flex; gap: 10px; align-items: center; min-width: 0; }
.topbar-actions { justify-content: flex-end; }
.brand-link { display: flex; flex-shrink: 1; min-width: 0; }
.brand-link img { width: auto; height: 40px; max-width: 190px; object-fit: contain; }
.topbar-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--colorNeutralForeground1); cursor: pointer; box-sizing: border-box; }
.topbar-icon:hover, .account-trigger:hover, .topbar-company:hover { background: var(--colorNeutralBackground1Hover); }
.topbar-icon:focus-visible, .account-trigger:focus-visible, .topbar-company:focus-visible, .navigation-button:focus-visible { outline: 2px solid var(--app-accent-color); outline-offset: 2px; }
.topbar-company { display: flex; align-items: center; justify-content: center; gap: 9px; justify-self: center; min-width: 0; max-width: 100%; padding: 8px 12px; border: 0; border-bottom: 3px solid var(--company-color, var(--app-accent-color)); border-radius: 6px 6px 0 0; background: transparent; color: var(--colorNeutralForeground1); font: inherit; font-weight: 600; cursor: pointer; }
.topbar-company-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-company svg { flex-shrink: 0; }
.account-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px; min-height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--colorNeutralForeground1); cursor: pointer; font: inherit; white-space: nowrap; }
.topbar-user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.account-email { color: var(--colorNeutralForeground2); font-size: 13px; }
.account-actions { display: grid; gap: 3px; }
.account-actions button, .account-actions a, .account-signout { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 10px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--colorNeutralForeground1); font: inherit; text-decoration: none; cursor: pointer; }
.account-actions button:hover, .account-actions a:hover, .account-signout:hover { background: var(--colorNeutralBackground1Hover); }
.account-language { display: grid; gap: 8px; min-width: 0; }
.account-language-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.account-language-control > svg { flex-shrink: 0; }
.account-language select { width: 100%; min-width: 0; height: 36px; padding: 6px 8px; border: 1px solid var(--colorNeutralStroke1); border-radius: 4px; background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font: inherit; cursor: pointer; }
.account-language select:focus-visible { outline: 2px solid var(--app-accent-color); outline-offset: 2px; }
.account-language select:disabled { opacity: .6; cursor: wait; }
html[data-theme-mode="dark"] .account-language select { color-scheme: dark; }
.account-signout { width: 100%; }
.theme-icon-dark { display: none; }
html[data-theme-mode="dark"] .theme-icon-dark { display: flex; }
html[data-theme-mode="dark"] .theme-icon-light { display: none; }
html[data-theme-mode="dark"] .brand-link img, html[data-theme-mode="dark"] .login-logo { filter: brightness(0) invert(1); }
.login-shell { height: 100dvh; box-sizing: border-box; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: safe center; gap: 24px; padding: 32px 20px; background: var(--colorNeutralBackground3, #edf0ec); color: var(--colorNeutralForeground1); }
.login-tools { display: flex; justify-content: flex-end; width: min(420px, 100%); }
.login-footer { color: var(--colorNeutralForeground2); font-size: 12px; }
.navigation-button { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; gap: 6px; min-height: 32px; padding: 5px 12px; box-sizing: border-box; border: 1px solid var(--colorNeutralStroke1); border-radius: 4px; background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font: inherit; font-weight: 600; line-height: 20px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.navigation-button:hover { color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1Hover); text-decoration: none; }
.navigation-button-primary { color: white; background: var(--app-accent-color); border-color: var(--app-accent-color); }
.navigation-button-primary:hover { color: white; background: var(--app-accent-color); filter: brightness(.93); }
.navigation-button-subtle, .navigation-button-transparent { background: transparent; border-color: transparent; }
.navigation-button svg { flex: 0 0 auto; }
.app-shell > .main { gap: 0 !important; }
.navmenu { background: var(--colorNeutralBackground2); border-inline-end: 1px solid var(--colorNeutralStroke2); }
.navmenu-backdrop { display: none; }
.sitenav { padding: 12px 8px; box-sizing: border-box; }
#app-navigation { max-width: 100%; }
.sitenav .fluent-navitem, .sitenav .fluent-navcategoryitem { min-height: 40px; border-radius: 5px; margin-block: 2px; padding-block: 8px; font-size: 14px; line-height: 20px; color: var(--colorNeutralForeground1); }
.sitenav .fluent-navcategoryitem { font-weight: 600; }
.sitenav .fluent-navsubitemgroup { margin-inline-start: 12px; border-inline-start: 1px solid var(--colorNeutralStroke2); padding-inline-start: 5px; }
.sitenav .fluent-navsubitem { padding-inline-start: 12px; }
.sitenav .fluent-navitem.active { background: var(--colorBrandBackground2); color: var(--colorBrandForeground1); font-weight: 600; }
.sitenav .fluent-navitem:hover, .sitenav .fluent-navcategoryitem:hover { background: var(--colorNeutralBackground1Hover); }
.content { min-width: 0; box-sizing: border-box; padding: 20px 24px; }
.content > h3, .content > h1 { margin: 0 0 16px; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }
.app-filter-panel { width: 100%; min-width: 0; }
.app-filter-panel fluent-accordion-item { max-width: 100%; width: 100%; }
.app-filter-panel fluent-accordion-item::part(heading) { min-height: 42px; border-radius: 6px; background: var(--colorNeutralBackground2); }
.app-filter-panel fluent-accordion-item::part(content) { padding: 16px 4px 8px; }
.filter-header { gap: 10px; }
.filter-header svg { width: 20px; height: 20px; }
.app-filter-panel :is(.fluent-stack-horizontal, .fluent-stack-vertical) { min-width: 0; max-width: 100%; }
.app-filter-panel fluent-field:has(fluent-text-input[auto-complete]) fluent-dropdown { max-width: 100%; }
.app-filter-panel fluent-field { min-width: 0; max-width: 100%; }
fluent-dialog::part(dialog) { box-sizing: border-box; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; }
fluent-dialog-body { max-width: 100%; }
.main-layout-footer { justify-content: flex-end; border-top: 1px solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground2); color: var(--colorNeutralForeground2); padding: 6px 20px; }
@media (max-width: 1100px) { .topbar-user-name { display: none; } .main-layout-header { gap: 12px; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.2fr) auto; } }
@media (max-width: 800px) {
    .app-shell > .main { position: relative; }
    /* Page-local cards and sticky controls must stay below the mobile drawer. */
    .app-shell > .main > .body-content { position: relative; z-index: 0; isolation: isolate; }
    .main-layout-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px 40px; min-height: 104px; gap: 0 8px; padding: 4px 12px 8px; }
    .topbar-brand { grid-row: 1; grid-column: 1; gap: 4px; }
    .brand-link img { height: 34px; max-width: 140px; }
    .topbar-actions { grid-row: 1; grid-column: 2; gap: 2px; }
    .topbar-actions .theme-toggle { display: none; }
    .topbar-company { grid-row: 2; grid-column: 1 / -1; margin-left: 44px; justify-self: stretch; padding: 7px 8px; justify-content: flex-start; font-size: 13px; }
    .topbar-company > svg:last-child { margin-left: auto; }
    .account-trigger { padding: 2px; gap: 4px; }
    .app-shell > .main { flex-direction: column !important; }
    .app-shell > .main > .navmenu { width: 100%; height: 0; padding: 0; max-height: none; border: 0; overflow: visible; }
    #navmenu-toggle { display: block; appearance: none; position: fixed; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .navmenu-toggle-button { position: fixed; top: 60px; left: 12px; width: 34px; height: 34px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; z-index: 45; border: 1px solid var(--colorNeutralStroke1); border-radius: 5px; background: var(--colorNeutralBackground1); cursor: pointer; box-shadow: none; }
    .navmenu-toggle-button span { width: 17px; height: 2px; border-radius: 2px; background: var(--colorNeutralForeground1); }
    #navmenu-toggle:focus-visible + label { outline: 2px solid var(--app-accent-color); outline-offset: 2px; }
    #navmenu-toggle ~ nav.sitenav { display: none; position: absolute; top: 0; inset-inline-start: 0; bottom: 0; width: min(320px, 88vw); height: auto; overflow-y: auto; overscroll-behavior: contain; background: var(--colorNeutralBackground2, #fafafa); border-inline-end: 1px solid var(--colorNeutralStroke2); box-shadow: var(--shadow16); z-index: 40; }
    #navmenu-toggle:checked ~ nav.sitenav { display: block; }
    #navmenu-toggle:checked ~ .navmenu-backdrop { display: block; position: absolute; inset: 0; z-index: 39; padding: 0; border: 0; background: rgb(0 0 0 / 35%); }
    #navmenu-toggle:checked + .navmenu-toggle-button span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    #navmenu-toggle:checked + .navmenu-toggle-button span:nth-child(2) { opacity: 0; }
    #navmenu-toggle:checked + .navmenu-toggle-button span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    #app-navigation { width: 100% !important; }
    .content { padding: 16px 12px; }
    .content div[xs]:has(> .app-filter-panel) { flex-basis: 100%; max-width: 100%; }
    .app-filter-panel fluent-accordion-item::part(content) { padding-inline: 0; }
    fluent-dialog-body [slot="title"] { overflow-wrap: anywhere; }
    .main-layout-footer { font-size: 11px; padding: 5px 12px; }
}
@media (max-width: 380px) { .brand-link img { max-width: 110px; height: 30px; } .topbar-icon { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .sitenav *, fluent-accordion-item { scroll-behavior: auto; transition: none !important; } }
/* Compact filter rows preserve room for the result grid. */
.fluent-grid:has(> div[xs] > .app-filter-panel) { align-items: flex-start !important; }
@media (max-width: 800px) {
    .topbar-actions .theme-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
    fluent-dialog :is(.fluent-stack-horizontal, .fluent-stack-vertical):has(> fluent-text[style*="width: 200px"]) { flex-wrap: wrap !important; }
    fluent-dialog :is(.fluent-stack-horizontal, .fluent-stack-vertical) > fluent-text[style*="width: 200px"] { width: 100% !important; margin: 0; }
    fluent-dialog :is(.fluent-stack-horizontal, .fluent-stack-vertical):has(> fluent-text[style*="width: 200px"]) > fluent-field { width: 100% !important; min-width: 0; }
}

.main-layout-header { z-index: 30 !important; }
.main-layout-profile-popover { position: absolute !important; }
.main-layout-profile-popover::part(dialog) { border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; padding: 0; }
.filter-date-range, .fluent-stack-horizontal:has(> .filter-date-time) { flex-wrap: wrap !important; gap: 12px !important; }
.filter-date-time { flex: 1 1 280px; min-width: 0; }
.filter-date-time > fluent-field { flex: 1 1 0; min-width: 0; }
.filter-date-time fluent-text-input { width: 100%; min-width: 0; }
.fluent-stack-horizontal:has(> .filter-date-time) > .fluent-spacer { display: none; }
.app-filter-panel [style*="min-width: 360px"] { min-width: 0 !important; }
.preview-filter-panel > summary { padding: 12px 16px; border-radius: 6px; background: var(--colorNeutralBackground2); cursor: pointer; }
.preview-filter-panel > summary:focus-visible { outline: 2px solid var(--app-accent-color); outline-offset: 2px; }
.preview-filter-content { padding: 16px 4px 8px; }
.preview-filter-content > .fluent-stack-horizontal { flex-wrap: wrap !important; }
.preview-filter-panel fluent-accordion-item { width: 100% !important; }

/* Fluent 5 menu triggers include both an icon and an arrow. Give their labels room. */
.content fluent-menu-button { min-height: 36px; padding: 6px 10px; gap: 8px; width: auto; }
.content fluent-menu-button > svg { width: 20px !important; flex-shrink: 0; }
.content .fluent-stack-horizontal:has(> fluent-menu) { flex-wrap: wrap !important; gap: 6px !important; }
.content fluent-menu-button::part(content) { white-space: nowrap; }
.language-option { display: inline-flex; align-items: center; gap: 10px; }
.language-option svg { flex-shrink: 0; }
.language-picker { min-width: 0; }

.app-startup { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; background: var(--colorNeutralBackground1, #fff); color: var(--colorNeutralForeground1, #242424); }
.app-startup[hidden] { display: none; }
.app-startup img { width: 220px; max-width: 80vw; }
.app-startup p { margin: 0; font-size: 14px; }
.app-startup__progress { width: min(260px, 80vw); height: 4px; overflow: hidden; border-radius: 4px; background: var(--colorNeutralStroke2, #e5e5e5); }
.app-startup__progress::after { content: ""; display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--app-accent-color, #00796e); animation: app-startup-progress 1.5s ease-in-out infinite alternate; }
@keyframes app-startup-progress { from { transform: translateX(0); } to { transform: translateX(150%); } }
html[data-theme-mode="dark"] .app-startup { background: var(--colorNeutralBackground1, #1f1f1f); color: var(--colorNeutralForeground1, #fff); }
html[data-theme-mode="dark"] .app-startup img { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) { .app-startup__progress::after { animation: none; width: 100%; opacity: .7; } }
@media (max-width: 800px) {
    .main-layout-header.public-header { grid-template-rows: 48px; min-height: 64px; }
    .public-header > div:empty { display: none; }
}
.fluent-grid:has(> div[xs] > .app-filter-panel) > div[xs]:has(> .app-filter-panel) { flex: 1 1 300px; max-width: none; }
.fluent-grid:has(> div[xs] > .app-filter-panel) > div[xs]:has(fluent-menu) { flex: 0 1 auto; max-width: 100%; }
/* Expanded navigation must grow when a nested category opens. Fluent's retained
   height animation otherwise pins the parent to its earlier pixel height. */
.sitenav .fluent-navsubitemgroup.expanded,
.sitenav .fluent-navsubitemgroup:not(.user-interacted):has(.active) { height: auto !important; min-height: 0 !important; flex-shrink: 0; }
.sitenav .fluent-navitem, .sitenav .fluent-navcategoryitem { flex-shrink: 0; }
.section-heading { display: inline-flex; align-items: center; gap: 10px; line-height: 1.4; }
.section-heading > svg { flex: 0 0 20px; }
/* Fluent 5 puts selected tags in the text input's start slot. Constrain and
   scroll that actual tag container, without clipping the options popover. */
fluent-text-input[auto-complete] { min-width: 0; max-width: 100%; }
fluent-text-input[auto-complete] > [slot="start"] { min-width: 0; max-width: 100%; }
fluent-text-input[auto-complete] > [slot="start"] > div:has(.fluent-badge:not([alone])) { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; max-width: 100%; }
fluent-text-input[auto-complete] .fluent-badge { max-width: 100%; box-sizing: border-box; }
fluent-text-input[auto-complete] .fluent-badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
fluent-text-input[auto-complete] .fluent-badge > svg { flex-shrink: 0; }
.app-filter-panel fluent-text-input[auto-complete] > [slot="start"] > div:has(.fluent-badge:not([alone])) { max-height: 112px !important; }

.public-language { height: 32px; padding: 4px 6px; border: 1px solid var(--colorNeutralStroke1); border-radius: 4px; background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font: inherit; cursor: pointer; }
.public-language:focus-visible { outline: 2px solid var(--app-accent-color); outline-offset: 2px; }

.null-filter-mode-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; height: 32px; padding: 0; margin: 0 4px 0 0; border: 0; background: transparent; color: var(--colorNeutralForeground1); cursor: pointer; border-radius: 4px; }
.null-filter-mode-toggle:hover { background: var(--colorNeutralBackground1Hover); }
.null-filter-mode-toggle:focus-visible { outline: 2px solid var(--app-accent-color); outline-offset: 1px; }
.app-filter-panel fluent-text[style*="color: #FFFFFF"] { visibility: hidden; }
.user-edit-form { padding: 12px 20px; }
.user-edit-form .fluent-stack-horizontal:has(> label) { align-items: center !important; }
.user-edit-form .fluent-stack-horizontal > label { flex-shrink: 0; }
@media (max-width: 600px) {
    .user-edit-form { padding: 4px 0; }
    .user-edit-form .fluent-stack-horizontal:has(> label) { flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 12px; }
    .user-edit-form .fluent-stack-horizontal > label { width: 100% !important; }
    .user-edit-form .fluent-stack-horizontal > fluent-field { min-width: 0 !important; width: 100% !important; }
}

/* Keep the upload control's internal z-index below a modal's sticky actions. */
fluent-dialog .fluent-inputfile-container { position: relative; isolation: isolate; z-index: 0; }

/* Keep list actions on their own row so every expanded filter can use the list width. */
.fluent-grid:has(> div[xs] > .app-filter-panel) > div[xs]:has(> .app-filter-panel) { flex: 1 1 100%; max-width: 100%; order: 1; }
.fluent-grid:has(> div[xs] > .app-filter-panel) > div[xs]:not(:has(> .app-filter-panel)) { flex: 1 1 100%; max-width: 100%; order: 0; }

.app-filter-panel fluent-field { margin-block: 0 !important; }
.navigation-icon-button { width: 32px; min-width: 32px !important; height: 32px; padding: 0; flex: 0 0 32px; }
.action-edit { --action-color: #875400; --action-background: #fff3c4; --action-border: #bd8500; --action-hover: #ffe39a; }
.action-delete { --action-color: #b10e1c; --action-background: #fde7e9; --action-border: #c4314b; --action-hover: #fac3c8; }
html[data-theme-mode="dark"] .action-edit { --action-color: #ffd166; --action-background: #423414; --action-border: #bd8b24; --action-hover: #5a4318; }
html[data-theme-mode="dark"] .action-delete { --action-color: #ff9aa2; --action-background: #481d25; --action-border: #d96a77; --action-hover: #642932; }
:is(.action-delete, .action-edit):not([disabled]) { color: var(--action-color) !important; background: var(--action-background) !important; border-color: var(--action-border) !important; }
:is(.action-delete, .action-edit):not([disabled]):is(:hover, :active) { background: var(--action-hover) !important; }
:is(.action-delete, .action-edit):not([disabled]) > svg { color: inherit !important; fill: currentColor !important; }
@media (forced-colors: active) {
    :is(.action-delete, .action-edit):not([disabled]) { color: ButtonText !important; background: ButtonFace !important; border-color: ButtonText !important; }
}
.user-language-field { width: 250px; max-width: 100%; }
.user-language-field > fluent-field { margin: 0; }
.external-role-mapping > fluent-field { margin-block: 0 !important; min-width: 0 !important; }
.external-role-mapping { display: grid !important; grid-template-columns: minmax(160px, 230px) minmax(0, 1fr) 32px; align-items: end !important; }
.external-role-mapping > fluent-field { width: 100% !important; }
.wizard-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.wizard-actions > fluent-button { white-space: nowrap; min-height: 32px; }
@media (max-width: 600px) { .user-language-field { width: 100%; } }

.password-change-page { max-width: 480px; margin: 16px auto; }
.password-change-form { display: grid; gap: 16px; }
.password-field { display: grid; gap: 6px; }
.password-field > div { display: flex; gap: 8px; }
.password-field input { min-width: 0; width: 100%; height: 36px; padding: 6px 10px; box-sizing: border-box; font: inherit; color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke1); border-radius: 4px; }
.password-visibility { width: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke1); border-radius: 4px; color: var(--colorNeutralForeground1); cursor: pointer; }
.password-field :is(input, button):focus-visible { outline: 2px solid var(--app-accent-color); outline-offset: 2px; }
.password-requirements { padding: 12px 16px; border-radius: 6px; background: var(--colorNeutralBackground2); line-height: 1.6; }
.password-requirements ul { margin: 6px 0 0; padding-left: 20px; }
.password-error { color: var(--colorPaletteRedForeground1); margin: 0; }
.password-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.invoice-detail-status { display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--colorNeutralBackground2); font-weight: 600; }
.invoice-detail-status-error { color: var(--colorPaletteRedForeground1); background: var(--colorPaletteRedBackground1); border-left: 3px solid currentColor; }

.app-filter-panel [style*="min-width: 340px"] { min-width: 0 !important; }

.external-role-mapping > fluent-button { margin-bottom: 2px; }

.role-row-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 4px; white-space: nowrap; }
.role-row-actions > fluent-button { flex: 0 0 32px; }

@media (max-width: 600px) {
    .external-role-mapping { grid-template-columns: minmax(0, 1fr) 32px; }
    .external-role-mapping > fluent-field:first-child { grid-column: 1 / -1; }
}

/* Every filter has the same label, comparison and input tracks. Subgrid shares
   their heights across a row, including wrapped labels and selected tags. */
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-shell, .report-definitions-filter-shell, .calculation-definitions-filter-shell) { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100%; min-width: 0; gap: 8px !important; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-fields, .report-definitions-filter-grid, .calculation-definitions-filter-grid) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 16px !important; align-items: stretch !important; width: 100% !important; min-width: 0; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field, .report-filter-field, .calculation-definition-filter-field, .exchange-date-filter) { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(20px, auto) 20px minmax(32px, auto); grid-row: span 3; align-items: start !important; justify-content: stretch !important; gap: 4px !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 0 12px !important; }
@supports (grid-template-rows: subgrid) {
    :is(.app-filter-panel, .preview-filter-panel) :is(.filter-field, .report-filter-field, .calculation-definition-filter-field, .exchange-date-filter) { grid-template-rows: subgrid; }
}
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-label, .report-filter-caption, .calculation-definition-filter-caption) { grid-row: 1; order: 0 !important; align-self: start; min-height: 20px; margin: 0 !important; color: var(--colorNeutralForeground1); font-weight: 600; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field, .report-filter-field, .calculation-definition-filter-field) > fluent-text:not(.filter-field-label, .report-filter-caption, .calculation-definition-filter-caption),
:is(.app-filter-panel, .preview-filter-panel) .filter-field-spacer { grid-row: 2; order: 0 !important; min-height: 20px; margin: 0 !important; font-size: 12px; }
:is(.app-filter-panel, .preview-filter-panel) fluent-text h6 { margin: 0; font-size: 13px; line-height: 20px; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-controls, .report-filter-row, .report-filter-date-row, .calculation-definition-filter-input-row, .calculation-definition-date-row, .calculation-definition-deleted-filter-row) { display: flex !important; grid-row: 3; align-items: flex-start !important; gap: 8px !important; min-width: 0; min-height: 32px; width: 100% !important; padding: 0 !important; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field, .report-filter-field, .calculation-definition-filter-field) > fluent-field { grid-row: 3; width: 100% !important; min-width: 0; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-controls, .report-filter-row, .report-filter-date-row, .calculation-definition-filter-input-row, .calculation-definition-date-row, .calculation-definition-deleted-filter-row) > fluent-field { flex: 1 1 0; min-width: 0; width: 100% !important; margin: 0 !important; }
:is(.app-filter-panel, .preview-filter-panel) :is(fluent-field, fluent-text-input, fluent-dropdown) { min-width: 0; max-width: 100%; }
:is(.app-filter-panel, .preview-filter-panel) fluent-field > [slot="input"] { width: 100%; min-width: 0; }
/* Unlabelled Fluent fields still reserve the empty label track and its gap.
   The filter already provides its label above, so start the input at row one. */
:is(.app-filter-panel, .preview-filter-panel) fluent-field:not(:has(> [slot="label"])) { grid-template-areas: "input" "message"; row-gap: 0 !important; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-controls, .report-filter-row, .calculation-definition-filter-input-row) > svg { flex: 0 0 24px; margin-top: 4px; }
.app-filter-panel .null-filter-mode-toggle { flex: 0 0 28px; margin: 0; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-date, .filter-field-datetime) > .filter-field-spacer { display: none; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-date, .filter-field-datetime) > .filter-field-controls { grid-row: 2 / span 2; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-date, .filter-field-datetime) fluent-field { row-gap: 4px !important; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-date, .filter-field-datetime) [slot="label"] { min-height: 20px; line-height: 20px; padding: 0; margin: 0; }
:is(.app-filter-panel, .preview-filter-panel) .filter-field-controls > .fluent-spacer { display: none; }
:is(.app-filter-panel, .preview-filter-panel) .filter-field-datetime > .filter-field-controls { flex-wrap: wrap !important; }
:is(.app-filter-panel, .preview-filter-panel) .filter-date-time { flex: 1 1 260px; min-width: 0; gap: 8px !important; }
:is(.app-filter-panel, .preview-filter-panel) .filter-date-time > fluent-field { flex: 1 1 0; width: 100% !important; margin: 0 !important; }
:is(.app-filter-panel, .preview-filter-panel) .filter-field-switch > .filter-field-controls { align-items: center !important; }
.app-filter-panel .exchange-date-field { display: contents; }
.app-filter-panel .exchange-date-field .filter-date-range { grid-row: 2 / span 2; gap: 8px !important; flex-wrap: nowrap !important; align-items: start !important; }
.app-filter-panel .exchange-date-field fluent-field { width: 100% !important; min-width: 0; flex: 1 1 0; row-gap: 4px !important; margin: 0 !important; }
.app-filter-panel .exchange-date-field [slot="label"] { min-height: 20px; line-height: 20px; }
/* An empty message track adds a second row gap to date fields. Remove only
   absent slots so the label/input pair occupies the same tracks as its peers. */
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-date, .filter-field-datetime, .exchange-date-filter) fluent-field:not(:has(> [slot="message"])) { grid-template-areas: "label" "input"; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-date, .filter-field-datetime, .exchange-date-filter) fluent-field:not(:has(> [slot="label"])) { grid-template-areas: "input" "message"; row-gap: 0 !important; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-field-date, .filter-field-datetime, .exchange-date-filter) fluent-field:not(:has(> [slot="label"], > [slot="message"])) { grid-template-areas: "input"; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-actions, .report-filter-buttons, .calculation-definitions-filter-buttons, .calculation-run-filter-buttons) { display: flex !important; flex-direction: row !important; grid-column: 1 / -1; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: wrap; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 4px 0 0 !important; }
:is(.app-filter-panel, .preview-filter-panel) :is(.filter-actions, .report-filter-buttons, .calculation-definitions-filter-buttons, .calculation-run-filter-buttons) > fluent-button { height: 32px; min-width: 96px; width: auto !important; margin: 0 !important; white-space: nowrap; }
@media (min-width: 1000px) {
    :is(.app-filter-panel, .preview-filter-panel) .filter-field-datetime { grid-column: span 2; }
}
/* Mixed links, menu triggers and buttons share one toolbar baseline. */
.content :is(fluent-button, .navigation-button) { vertical-align: middle; }
.fluent-grid:has(> div[xs] > .app-filter-panel) > div[xs]:not(:has(> .app-filter-panel)) > :is(.fluent-stack-horizontal, .fluent-stack-vertical) { gap: 8px !important; align-items: center !important; flex-wrap: wrap !important; }
.fluent-grid:has(> div[xs] > .app-filter-panel) > div[xs]:not(:has(> .app-filter-panel)) :is(fluent-menu-button, fluent-button, .navigation-button) { min-height: 36px; margin: 0 !important; }
:is(.app-filter-panel, .preview-filter-panel) .filter-field-native > fluent-field { grid-row: 1 / span 3; grid-template-rows: minmax(20px, auto) 20px minmax(32px, auto); grid-template-areas: "label" "." "input"; row-gap: 4px !important; }
@supports (grid-template-rows: subgrid) {
    :is(.app-filter-panel, .preview-filter-panel) .filter-field-native > fluent-field { grid-template-rows: subgrid; }
}
.app-filter-panel .vat-period-filter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding-bottom: 12px; }
.app-filter-panel .vat-period-filter > fluent-field { margin: 0 !important; }
.app-filter-panel .vat-period-filter > fluent-button { margin: 0; min-height: 32px; }
.app-filter-panel .calculation-definition-deleted-filter-row { flex-wrap: wrap; }
.app-filter-panel .calculation-definition-deleted-filter-row > fluent-field:has(fluent-switch) { flex-basis: 100%; }
.app-filter-panel .vat-filter-grid { align-items: start; }
.app-filter-panel .vat-filter-grid > fluent-field { margin: 0 !important; width: 100% !important; row-gap: 4px !important; }
.app-filter-panel .vat-filter-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.app-filter-panel .vat-filter-actions > fluent-button { margin: 0 !important; min-height: 32px; }

/* Comparison captions need readable contrast in both themes. */
:is(.app-filter-panel, .preview-filter-panel) fluent-text[style*="#1abc9c" i] {
    color: var(--colorNeutralForeground2, #424242) !important;
}
:is(.app-filter-panel, .preview-filter-panel) fluent-text[style*="#e74c3c" i] {
    color: var(--colorPaletteRedForeground1, #b10e1c) !important;
}

/* A clear action is a control, not a shrinking SVG in a percentage-width cell. */
.app-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--colorNeutralStroke1, #b3b3b3);
    border-radius: 4px;
    color: var(--colorNeutralForeground1, #242424);
    background: var(--colorNeutralBackground1, #fff);
    cursor: pointer;
    touch-action: manipulation;
}
.app-clear-button > svg { flex: 0 0 20px; width: 20px; height: 20px; color: inherit; }
.app-clear-button:not([disabled]):hover { background: var(--colorNeutralBackground1Hover, #f0f0f0); }
.app-clear-button[disabled] { color: var(--colorNeutralForegroundDisabled, #8a8886); cursor: default; }
.app-clear-button:focus-visible { outline: 2px solid var(--app-accent-color); outline-offset: 2px; }
fluent-text-input .app-clear-button { flex-basis: 28px; width: 28px; min-width: 28px; height: 28px; border-color: transparent; }
.fluent-grid:has(> div[xs="1"] .app-clear-button) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px !important;
    min-width: 0;
    margin: 0 !important;
}
.fluent-grid:has(> div[xs="1"] .app-clear-button) > div[xs] {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0 !important;
}
@media (max-width: 600px) {
    fluent-dialog .fluent-grid:has(> div[xs="1"] .app-clear-button) { width: 100% !important; }
    fluent-dialog-body { min-width: 0; }
    fluent-dialog-body [slot="title"] { min-width: 0; }
    fluent-dialog-body [slot="title"] svg { flex-shrink: 0; }
}