* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* remove hyperlink styling */
.a-no-style {
    color: unset !important;
    text-decoration: none;
}

/* remove underline globally */
a {
    text-decoration: none;
}

.text-overflow-guard {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
    display: inline-block;
}

@media screen and (min-width: 800px) {
    /* wide margin page cards */
    .page-card {
        padding: calc(var(--element-spacing) * 2) !important;
    }
}

/* *** UI KIT styling *** */

body, .body {
    --neutral-foreground-rest: var(--palette-text-body);
}

/* use global border radius in menus */
fluent-menu {
    border-radius: var(--border-radius);
}

/* set primary accent to a concrete color */
fluent-button, .blanc-theme {
    --accent-fill-rest: var(--primary-btn-color);
    --accent-fill-hover: var(--primary-btn-color-hover);
}

/* dialog background */
fluent-dialog::part(control) {
    --fill-color: #FFFFFF;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

/* global badge styling */
.blanc-badge {
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* prevent page cards within the tabs container from shrinking */
fluent-tab-panel {
    padding: 0;
}

/* fix 'cramped' appearance of icon in tab title */
.fluent-tab-icon {
    margin-right: 4px;
}

/* *** UI KIT bug fixes *** */

/* this fixes missing bottom border in some input elements */
fluent-text-field::part(root) {
    box-sizing: content-box;
}

/* fix issue with select dropdown not having a scroll */
fluent-select::part(listbox) {
    height: 300px;
    overflow-y: auto;
}

/* make checkbox wide for tooltip */
fluent-checkbox.form-builder-checkbox::part(label) {
    width: 100%;
}

/* fix validation outline for autocomplete */
.fluent-autocomplete-multiselect:has(+ .validation-message) fluent-text-field::part(root) {
    outline: 1px solid var(--error);
}

/* hard set dialog width to prevent input overflows */
.fluent-dialog-body {
    width: calc(var(--dialog-width) - 50px) !important;
}

/* form input reset */
fluent-text-field::after, fluent-select::after, fluent-text-area::after {
    border: none !important;
}

fluent-text-field::part(root), fluent-select::part(control) {
    background: none;
    height: 32px;
    border: 1px solid var(--border-color);
}

fluent-text-area::part(control) {
    background: none;
    border: 1px solid var(--border-color);
}

fluent-text-field::part(root):hover, fluent-select::part(control):hover, fluent-text-area::part(control):hover {
    background: var(--palette-gray-01);
}

/* Panel: remove default padding */
fluent-dialog.fluent-dialog-main.right.prevent-scroll::part(positioning-region) {
    --design-unit: 0;
}

/* Panel: hard set dialog width to prevent input overflows */
fluent-dialog.fluent-dialog-main.right.prevent-scroll .fluent-dialog-body {
    width: var(--dialog-width) !important;
}

/* Fix: flatpickr pushes scroll down while rendering at the bottom when collapsed */
.flatpickr-calendar {
  overflow: hidden; /* Fixes space occupied when collapsed */
}