/*
 * Shared scrollbar contract for Microkeep workspace applications.
 * Applications only provide the theme tokens; every ordinary scroll container,
 * Mud surface and reusable component receives the same geometry and interaction.
 * Component-specific hidden scrollbars remain possible because :where() has zero
 * selector specificity.
 */
:where(*) {
    /* Modern Chromium also implements the standard property. Reset Mud and
     * browser-level "thin" declarations so the precise 4px WebKit contract
     * below remains authoritative. Firefox overrides these values later. */
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
}

:where(*)::-webkit-scrollbar {
    width: var(--scrollbar-size, 4px) !important;
    height: var(--scrollbar-size, 4px) !important;
}

:where(*)::-webkit-scrollbar-track {
    background: var(--scrollbar-track, rgba(148, 163, 184, 0.18)) !important;
}

:where(*)::-webkit-scrollbar-thumb {
    min-height: 24px;
    border: var(--scrollbar-border, none) !important;
    border-radius: var(--scrollbar-radius, 999px) !important;
    background: var(--scrollbar-thumb, rgba(107, 114, 128, 0.56)) !important;
    background-clip: padding-box !important;
}

:where(*)::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, rgba(107, 114, 128, 0.72)) !important;
    background-clip: padding-box !important;
}

:where(*)::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

:where(*)::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Firefox does not expose pixel scrollbar geometry. Use its themed thin mode. */
@supports (-moz-appearance: none) {
    :where(*) {
        scrollbar-width: thin !important;
        scrollbar-color:
            var(--scrollbar-thumb, rgba(107, 114, 128, 0.56))
            var(--scrollbar-track, rgba(148, 163, 184, 0.18)) !important;
    }
}

/* Browsers paint saved values with their own light-blue surface unless the
 * application supplies theme-aware autofill tokens. Keep the behavior and
 * accessibility of autofill while making its visual state product-owned. */
:where(input, textarea):-webkit-autofill,
:where(input, textarea):-webkit-autofill:hover,
:where(input, textarea):-webkit-autofill:focus,
:where(input, textarea):-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg, var(--mud-palette-surface)) inset !important;
    -webkit-text-fill-color: var(--autofill-text, var(--mud-palette-text-primary)) !important;
    caret-color: var(--autofill-caret, var(--mud-palette-primary)) !important;
}

:where(input, textarea):autofill {
    box-shadow: 0 0 0 1000px var(--autofill-bg, var(--mud-palette-surface)) inset !important;
    color: var(--autofill-text, var(--mud-palette-text-primary)) !important;
    caret-color: var(--autofill-caret, var(--mud-palette-primary)) !important;
}

/* Shared icon-menu density. Popover content is rendered outside the component
 * subtree, so this belongs to the workspace global stylesheet. */
.workspace-icon-menu .mud-menu-item-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: var(--mud-palette-text-secondary) !important;
    opacity: .62;
}