/* AppBar ma zawsze ciemne tło (#133760), ale MudBlazor ustawia .mud-input color na --mud-palette-text-primary
   (ciemny w jasnym motywie), co nadpisuje dziedziczenie z AppBar. Wymuszamy biały kolor dla inputów w AppBar. */
.mud-appbar .mud-input {
    color: white;
}

/* CreateFurgonetkaShipmentDialog's carrier MudSelect renders a DeliveryMethodBadge (a MudChip,
   24px tall) as the selected value. Confirmed via DOM inspection against MudBlazor 9.4.0: the
   actual clipping element is the *visible* .mud-input-slot div wrapping that content - it has its
   own authored height: 19px + overflow: hidden, independent of the outer .mud-input's height.
   overflow: visible + height: auto let both boxes size to the chip's natural height instead of
   forcing an explicit min-height, which just added dead space above/below it.
   Global (not component-scoped ::deep) because Blazor CSS isolation's scope attribute is only
   reliably present on elements this app's own markup renders directly, not guaranteed to reach
   MudSelect's internal template output. */
.carrier-select .mud-input {
    height: auto !important;
}

.carrier-select .mud-input-slot {
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

.carrier-select .mud-chip {
    margin-block: 2px;
}

/* Same MudSelect .mud-input-slot clipping as .carrier-select above, this time for /catalog's
   "Typ" MudSelect rendering an ItemTypeBadge (also a MudChip) as the selected value.
   .chip-select is the generic alias for any other MudSelect whose selected value is a MudChip
   badge (AddItemDialog's "Typ" and "Stan" selects). */
.item-type-select .mud-input,
.chip-select .mud-input {
    height: auto !important;
}

.item-type-select .mud-input-slot,
.chip-select .mud-input-slot {
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

.item-type-select .mud-chip,
.chip-select .mud-chip {
    margin-block: 2px;
}

/* Blazor's built-in <ValidationMessage>/<ValidationSummary> render a bare, unstyled
   .validation-message div — there's no default CSS for it outside the standard project
   template, so error text otherwise looks identical to normal body text. */
.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    display: block;
    margin-top: 4px;
}

.mud-appbar input.mud-input-root::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Quill snow theme — adapt to MudBlazor light/dark palette */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.ql-toolbar.ql-snow {
    border-radius: 4px 4px 0 0;
}

.ql-container.ql-snow {
    border-radius: 0 0 4px 4px;
}

.ql-snow .ql-stroke {
    stroke: var(--mud-palette-text-primary);
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: var(--mud-palette-text-primary);
}

.ql-snow .ql-picker {
    color: var(--mud-palette-text-primary);
}

.ql-snow .ql-picker-options {
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--mud-palette-primary);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
    fill: var(--mud-palette-primary);
}

.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--mud-palette-primary);
}

/* Highlights {placeholder} tokens recognized by the restricted description editor (see
   htmlEditor.js's PlaceholderBlot). The "data-tooltip" attribute set by the blot drives a
   custom tooltip shown instantly on hover, instead of the native "title" attribute's
   browser-enforced ~1s delay. */
.ql-placeholder-token {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    border-radius: 3px;
    padding: 0 2px;
    font-family: monospace;
    position: relative;
    cursor: help;
}

/* {if:name}/{endif:name} conditional tags — same token styling as .ql-placeholder-token above,
   but in a distinct color so they read as control-flow syntax rather than a data placeholder. */
.ql-placeholder-token-conditional {
    background-color: var(--mud-palette-secondary-hover);
    color: var(--mud-palette-secondary);
}

/* Light wash over the text between a matched {if:name}...{endif:name} pair, so it's visually
   obvious at a glance which part of the description only shows up conditionally. */
.ql-conditional-block {
    background-color: var(--mud-palette-secondary-hover);
    opacity: 0.6;
    border-radius: 2px;
}

.ql-placeholder-token[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Above the token. This used to get hidden behind the toolbar for first-line tokens, but
       that was really the editor box clipping it (fixed below via overflow: visible) combined
       with the toolbar painting over it — z-index now keeps it above the toolbar's own content. */
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
    font-family: inherit;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

/* Plain <select> injected into Quill's toolbar for inserting a placeholder at the cursor —
   styled to sit visually alongside Quill's own toolbar buttons. */
.ql-placeholder-picker {
    height: 24px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    max-width: 160px;
}

.ql-container.ql-snow {
    height: auto;
    overflow: visible;
}

.ql-editor {
    color: var(--mud-palette-text-primary);
    min-height: 150px;
    /* Quill's stock CSS sets overflow-y: auto here, which clips any part of the placeholder
       tooltip (see .ql-placeholder-token below) that extends past the editor's own box —
       harmless to disable since the editor's height is auto/unbounded, so nothing ever scrolls. */
    overflow: visible;
}