/*
 * MudBlazor dark-theme overrides for Package Center surfaces.
 *
 * Why this file exists:
 * Q11 (locked) — MudBlazor handles the "deep" interactive controls inside
 * Package Center pages: MudDatePicker, MudDateTimePicker, MudSelect /
 * MudAutocomplete (multi-select with dropdown), MudTimePicker, MudTooltip.
 * Many of these render their popover at document body level (Fixed="true"),
 * which means ::deep CSS in component-isolated files cannot reach them
 * (per memory feedback_no_inline_css). Those styles MUST live here, loaded
 * globally, so the popovers inherit the dark theme.
 *
 * Targeting rule:
 * Selectors are scoped to descendants of `.pc-canvas` (the V2 root marker)
 * OR `.pc-popover-dark` (a class applied to MudPopover via the picker's
 * PopoverClass parameter). This keeps the rest of the admin (which uses
 * MudBlazor's default light theme) unaffected.
 */

/* ---- Inputs (text fields, selects in their inline form) ---- */
.pc-canvas .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: var(--pc-stroke);
}

.pc-canvas .mud-input.mud-input-outlined:hover > .mud-input-outlined-border {
    border-color: var(--pc-green);
}

.pc-canvas .mud-input.mud-input-outlined.mud-input-focused > .mud-input-outlined-border {
    border-color: var(--pc-green);
}

.pc-canvas .mud-input input,
.pc-canvas .mud-input textarea {
    color: var(--pc-text);
}

.pc-canvas .mud-input-label,
.pc-canvas .mud-input-helper-text {
    color: var(--pc-text-muted);
}

.pc-canvas .mud-input-label.mud-input-label-focused {
    color: var(--pc-green);
}

/* ---- Popovers (date/time pickers, multi-select dropdowns) ---- */
/*
 * MudBlazor v9 popovers render at document body when Fixed=true. They cannot
 * be reached by ::deep. Consumers apply PopoverClass="pc-popover-dark" on
 * MudDatePicker, MudSelect, etc. — that class is the targeting handle below.
 */
.pc-popover-dark.mud-popover,
.pc-popover-dark .mud-popover {
    background: var(--pc-panel-b);
    color: var(--pc-text);
    border: 1px solid var(--pc-stroke);
}

/* Date / DateTime picker innards */
.pc-popover-dark .mud-picker-content,
.pc-popover-dark .mud-picker {
    background: var(--pc-panel-b);
    color: var(--pc-text);
}

.pc-popover-dark .mud-picker-calendar-header,
.pc-popover-dark .mud-picker-calendar-day-of-week {
    color: var(--pc-text-muted);
}

.pc-popover-dark .mud-picker-calendar-day {
    color: var(--pc-text);
}

.pc-popover-dark .mud-picker-calendar-day.mud-button-root.mud-selected {
    background: var(--pc-green);
    color: var(--pc-btn-text-dark);
}

.pc-popover-dark .mud-picker-calendar-day.mud-button-root:hover:not(.mud-selected) {
    background: var(--pc-panel-a);
}

.pc-popover-dark .mud-button-text-primary {
    color: var(--pc-green);
}

/* Multi-select dropdown items */
.pc-popover-dark .mud-list-item {
    color: var(--pc-text);
}

.pc-popover-dark .mud-list-item:hover {
    background: var(--pc-panel-a);
}

.pc-popover-dark .mud-list-item.mud-selected-item {
    background: var(--pc-green-tint);
    color: var(--pc-text);
}

/* Multi-select chip ("pill" inside the input box for selected values) */
.pc-canvas .mud-chip.mud-chip-filled {
    background: var(--pc-green-tint);
    color: var(--pc-green);
    border: 1px solid var(--pc-green);
}

/* Tooltip dark variant (apply via Class="pc-tooltip-dark") */
.pc-tooltip-dark.mud-tooltip {
    background: var(--pc-panel-a);
    color: var(--pc-text);
    border: 1px solid var(--pc-stroke);
    font-family: var(--pc-font);
    font-size: 12px;
    font-weight: 500;
}