/* Transitional mappings for audited legacy utilities.
   Source: index.html Tailwind classes and character/index.html DaisyUI classes.
   Scope: known host roots only. Remove a mapping once its component uses ui-* classes. */
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar :is(.bg-gray-50, .bg-gray-100, .bg-white),
html[data-ui-theme="mist-day"] body.web-rp-shell .app-main :is(.bg-gray-50, .bg-gray-100, .bg-white),
html[data-ui-theme="mist-day"] body.web-rp-shell .generator-view :is(.bg-gray-50, .bg-gray-100, .bg-white),
html[data-ui-theme="mist-day"] body.web-rp-shell .native-tools-view :is(.bg-gray-50, .bg-gray-100, .bg-white),
html[data-ui-theme="mist-day"] body.web-rp-shell .web-popover :is(.bg-gray-50, .bg-gray-100, .bg-white),
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(.bg-gray-50, .bg-gray-100, .bg-white) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar :is(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-ui-theme="mist-day"] body.web-rp-shell .app-main :is(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-ui-theme="mist-day"] body.web-rp-shell .generator-view :is(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-ui-theme="mist-day"] body.web-rp-shell .native-tools-view :is(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-ui-theme="mist-day"] body.web-rp-shell .web-popover :is(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(.text-gray-900, .text-gray-800, .text-gray-700) {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar :is(.text-gray-600, .text-gray-500, .text-gray-400),
html[data-ui-theme="mist-day"] body.web-rp-shell .app-main :is(.text-gray-600, .text-gray-500, .text-gray-400),
html[data-ui-theme="mist-day"] body.web-rp-shell .generator-view :is(.text-gray-600, .text-gray-500, .text-gray-400),
html[data-ui-theme="mist-day"] body.web-rp-shell .native-tools-view :is(.text-gray-600, .text-gray-500, .text-gray-400),
html[data-ui-theme="mist-day"] body.web-rp-shell .web-popover :is(.text-gray-600, .text-gray-500, .text-gray-400),
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(.text-gray-600, .text-gray-500, .text-gray-400) {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.bg-primary-50, .bg-primary-100) {
    background: var(--ui-brand-soft) !important;
    color: var(--ui-brand-strong) !important;
    border-color: rgba(40, 34, 24, 0.18) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.text-primary-500, .text-primary-600, .text-primary-700) {
    color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.border-gray-100, .border-gray-200, .border-gray-300) {
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(.bg-gray-50\/30, .bg-gray-50\/50, .bg-gray-50\/80) {
    background: var(--ui-surface-subtle) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(.bg-black\/40, .bg-black\/50, .bg-gray-900\/40, .bg-gray-900\/45) {
    background: var(--ui-overlay) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.bg-base-100, .bg-base-100\/80, .bg-base-100\/90) {
    background: var(--ui-surface) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.bg-base-200, .bg-base-200\/30, .bg-base-200\/40, .bg-base-200\/50) {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border) !important;
}

/* DaisyUI sometimes puts bg-base-200 directly on an editor control. The
   control contract wins over the surrounding sunken section. */
html[data-ui-theme="mist-day"] body.web-workshop-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select, .input, .textarea, .select).bg-base-200,
html[data-ui-theme="mist-day"] body.web-workshop-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select, .input, .textarea, .select)[class*="bg-base-200/"] {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.border-base-200, .border-base-300) {
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.text-primary, .text-primary-content) {
    color: var(--ui-brand) !important;
}

/* Legacy decontamination pass. web-ui-redesign.css contains several final
   dark-green !important rules; this scoped pass is intentionally last so
   no host component can fall back to that palette during migration. */
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) {
    --ui-ink: var(--ui-text);
    --ui-ink-raised: var(--ui-surface);
    --ui-paper: var(--ui-canvas);
    --ui-panel: var(--ui-surface);
    --ui-line: var(--ui-border);
    --ui-muted: var(--ui-text-muted);
    --ui-mint: var(--ui-brand);
    --ui-mint-deep: var(--ui-brand-strong);
    --ui-signal: var(--ui-danger);
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is([class*="bg-white"], [class*="bg-gray-50"], [class*="bg-gray-100"]),
html[data-ui-theme="mist-day"] body.web-workshop-shell :is([class*="bg-base-100"], [class*="bg-white"]) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is([class*="text-gray-900"], [class*="text-gray-800"], [class*="text-gray-700"]),
html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.text-base-content, [class*="text-base-content/"]) {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is([class*="text-gray-600"], [class*="text-gray-500"], [class*="text-gray-400"]) {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell [class*="text-primary-"],
html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.text-primary, [class*="text-primary/"]) {
    color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="border-gray-"],
    [class*="border-primary-"],
    [class*="border-base-"],
    [class*="border-base-content/"]
) {
    border-color: var(--ui-border) !important;
}

/* Keep this final, after the generic hue bridge: numeric colour classes in
   this range represent clickable commands in the existing templates. */
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="bg-green-500"], [class*="bg-green-600"], [class*="bg-green-700"],
    [class*="bg-emerald-500"], [class*="bg-emerald-600"], [class*="bg-emerald-700"],
    [class*="bg-teal-500"], [class*="bg-teal-600"], [class*="bg-teal-700"],
    [class*="bg-cyan-500"], [class*="bg-cyan-600"], [class*="bg-cyan-700"],
    [class*="bg-blue-500"], [class*="bg-blue-600"], [class*="bg-blue-700"],
    [class*="bg-indigo-500"], [class*="bg-indigo-600"], [class*="bg-indigo-700"],
    [class*="bg-violet-500"], [class*="bg-violet-600"], [class*="bg-violet-700"]
) {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-hover)) !important;
    border-color: var(--ui-brand-hover) !important;
    color: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="bg-green-500"], [class*="bg-green-600"], [class*="bg-green-700"],
    [class*="bg-emerald-500"], [class*="bg-emerald-600"], [class*="bg-emerald-700"],
    [class*="bg-teal-500"], [class*="bg-teal-600"], [class*="bg-teal-700"],
    [class*="bg-cyan-500"], [class*="bg-cyan-600"], [class*="bg-cyan-700"],
    [class*="bg-blue-500"], [class*="bg-blue-600"], [class*="bg-blue-700"],
    [class*="bg-indigo-500"], [class*="bg-indigo-600"], [class*="bg-indigo-700"],
    [class*="bg-violet-500"], [class*="bg-violet-600"], [class*="bg-violet-700"]
) :is(svg, span, strong, p) {
    color: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.btn-warning, .btn-info, .btn-success) {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-hover)) !important;
    color: var(--ui-canvas) !important;
    border-color: var(--ui-brand-hover) !important;
}

/* Saturated legacy utility actions must remain commands after their old
   turquoise/green colours are removed. Keep them dark rather than letting a
   success action collapse into a pale information panel. */
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="bg-green-500"], [class*="bg-green-600"], [class*="bg-green-700"],
    [class*="bg-emerald-500"], [class*="bg-emerald-600"], [class*="bg-emerald-700"],
    [class*="bg-teal-500"], [class*="bg-teal-600"], [class*="bg-teal-700"],
    [class*="bg-cyan-500"], [class*="bg-cyan-600"], [class*="bg-cyan-700"],
    [class*="bg-blue-500"], [class*="bg-blue-600"], [class*="bg-blue-700"],
    [class*="bg-indigo-500"], [class*="bg-indigo-600"], [class*="bg-indigo-700"],
    [class*="bg-violet-500"], [class*="bg-violet-600"], [class*="bg-violet-700"]
) {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-hover)) !important;
    border-color: var(--ui-brand-hover) !important;
    color: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="bg-green-500"], [class*="bg-green-600"], [class*="bg-green-700"],
    [class*="bg-emerald-500"], [class*="bg-emerald-600"], [class*="bg-emerald-700"],
    [class*="bg-teal-500"], [class*="bg-teal-600"], [class*="bg-teal-700"],
    [class*="bg-cyan-500"], [class*="bg-cyan-600"], [class*="bg-cyan-700"],
    [class*="bg-blue-500"], [class*="bg-blue-600"], [class*="bg-blue-700"],
    [class*="bg-indigo-500"], [class*="bg-indigo-600"], [class*="bg-indigo-700"],
    [class*="bg-violet-500"], [class*="bg-violet-600"], [class*="bg-violet-700"]
) :is(svg, span, strong, p) {
    color: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="shadow-green"], [class*="shadow-emerald"], [class*="shadow-teal"],
    [class*="shadow-cyan"], [class*="shadow-blue"], [class*="shadow-indigo"],
    [class*="shadow-violet"], [class*="rgba(74,222,128"], [class*="rgba(45,212,191"]
) {
    box-shadow: var(--ui-shadow-sm) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.btn-warning, .btn-info, .btn-success) {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-hover)) !important;
    color: var(--ui-canvas) !important;
    border-color: var(--ui-brand-hover) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden),
    textarea,
    select,
    .input,
    .textarea,
    .select
) {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    caret-color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(input, textarea, .input, .textarea)::placeholder {
    color: var(--ui-text-muted) !important;
    opacity: 1 !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden),
    textarea,
    select,
    .input,
    .textarea,
    .select
):focus {
    background: var(--ui-surface) !important;
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 2px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(.btn-primary, .bg-primary-600, .bg-primary-700) {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-hover)) !important;
    border-color: var(--ui-brand-hover) !important;
    color: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(.btn-primary, .bg-primary-600, .bg-primary-700) :is(svg, span, strong) {
    color: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.btn-outline, .btn-ghost) {
    color: var(--ui-text-secondary) !important;
    background: transparent !important;
    border-color: var(--ui-border-strong) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(.btn-outline, .btn-ghost):hover {
    color: var(--ui-text) !important;
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(.native-api-close, .native-tools-close, .native-profile-close) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="text-blue-"],
    [class*="text-teal-"],
    [class*="text-green-"],
    [class*="text-emerald-"],
    [class*="text-cyan-"],
    [class*="text-sky-"],
    [class*="text-indigo-"],
    [class*="text-violet-"]
) {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="bg-blue-"],
    [class*="bg-teal-"],
    [class*="bg-green-"],
    [class*="bg-emerald-"],
    [class*="bg-cyan-"],
    [class*="bg-sky-"],
    [class*="bg-indigo-"],
    [class*="bg-violet-"]
) {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) :is(
    [class*="border-blue-"],
    [class*="border-teal-"],
    [class*="border-green-"],
    [class*="border-emerald-"],
    [class*="border-cyan-"],
    [class*="border-sky-"],
    [class*="border-indigo-"],
    [class*="border-violet-"]
) {
    border-color: var(--ui-border) !important;
}

/* Workshop model picker: the old editorial skin forced a near-black selected
   row and dark green hover/focus treatment. Selected models are now readable
   paper cards with a restrained seal-brown focus outline. */
html[data-ui-theme="mist-day"] body.web-workshop-shell .web-model-picker button[class*="bg-primary"],
html[data-ui-theme="mist-day"] body.web-workshop-shell .web-model-picker .bg-primary {
    background: var(--ui-brand-soft) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .web-model-picker button:hover {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .web-model-picker button:focus-visible {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
    background: var(--ui-surface-raised) !important;
    border-color: var(--ui-danger) !important;
    box-shadow: 0 0 0 4px rgba(140, 58, 43, 0.12) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .web-model-picker :is(
    .bg-blue-100,
    .bg-teal-100,
    .bg-amber-100,
    .bg-rose-100
) {
    background: var(--ui-surface-raised) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .web-model-picker :is(
    .text-blue-700,
    .text-blue-600,
    .text-teal-700,
    .text-teal-600
) {
    color: var(--ui-text-secondary) !important;
}

/* Shared custom-select trigger and chat tool state. */
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) .custom-select-trigger-open,
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) button[aria-haspopup="listbox"][aria-expanded="true"] {
    background: var(--ui-brand-soft) !important;
    border-color: var(--ui-brand) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) button.custom-select-trigger-open:focus-visible,
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) button[aria-haspopup="listbox"][aria-expanded="true"]:focus-visible {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-tool-action-active {
    background: var(--ui-brand-soft) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-brand-strong) !important;
    box-shadow: inset 3px 0 0 var(--ui-brand), 0 0 0 1px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-tool-action-active svg {
    color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-tool-action-active:hover,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-tool-action-active:focus-visible {
    background: var(--ui-surface-raised) !important;
    border-color: var(--ui-danger) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-tool-action-active:focus-visible {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}