/**
 * Runtime theme activation for Moroc's Base Nova PHP components.
 *
 * The production shell intentionally uses Tailwind's browser runtime. Its
 * built-in dark variant follows the operating-system preference, while Moroc
 * scopes Base Nova surfaces with a local `.dark` owner. These selectors make
 * that local contract deterministic without rebuilding Tailwind or changing
 * the components' light-mode definitions.
 *
 * `!important` is deliberate: the browser runtime can append utility rules
 * after Joomla's registered styles have loaded.
 */

/*
 * Global application layers.
 *
 * These are deliberately ordinary values with space between semantic bands.
 * Body-portalled components must consume this scale instead of competing with
 * feature-owned z-index constants.
 */
:root {
    --moroc-layer-page-dock: 100000;
    --moroc-layer-owner-dock-backdrop: 100010;
    --moroc-layer-owner-dock: 100020;
    --moroc-layer-workspace: 101000;
    --moroc-layer-modal: 102000;
    --moroc-layer-feedback: 103000;
    --moroc-layer-fullscreen: 104000;
    --moroc-layer-topmost: 105000;
}

[data-owner-dock-mobile-entry] {
    z-index: var(--moroc-layer-page-dock) !important;
}

[data-owner-dock-mobile-backdrop] {
    z-index: var(--moroc-layer-owner-dock-backdrop) !important;
}

[data-owner-dock-panel],
[data-owner-dock] {
    z-index: var(--moroc-layer-owner-dock) !important;
}

[data-owner-workspace-root] {
    z-index: var(--moroc-layer-workspace) !important;
}

[data-moroc-toasts="true"] {
    z-index: var(--moroc-layer-feedback) !important;
}

[data-slot="sheet-portal"][data-ui-sheet-layer="modal"] {
    z-index: var(--moroc-layer-modal) !important;
}

[data-slot="sheet-portal"][data-ui-sheet-layer="topmost"],
[data-reorder-ghost="true"] {
    z-index: var(--moroc-layer-topmost) !important;
}

.dark {
    color-scheme: dark;
}

/* Empty */
.dark [data-ui-component="empty"] {
    background-color: oklch(0.269 0 0 / 50%) !important;
}

.dark [data-ui-component="item"][data-variant="muted"] {
    background-color: oklch(0.269 0 0 / 50%) !important;
    border-color: transparent !important;
}

.dark [data-ui-component="empty"] [data-ui-slot="media"][data-variant="icon"] {
    background-color: oklch(0.269 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="empty"] [data-ui-slot="description"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="empty"] [data-ui-slot="description"] > a:hover {
    color: oklch(0.922 0 0) !important;
}

/* Card */
.dark [data-ui-component="card"] {
    background-color: oklch(1 0 0 / 4.5%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-slot="card-description"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="card"] [data-slot="card-footer"] {
    background-color: oklch(1 0 0 / 2.5%) !important;
    border-color: oklch(1 0 0 / 10%) !important;
}

.dark [data-ui-component="card"][data-ui-card-surface="transparent"] {
    background-color: transparent !important;
}

.dark [data-ui-component="card"][data-ui-card-surface="transparent"] [data-slot="card-footer"] {
    background-color: transparent !important;
    border-color: oklch(1 0 0 / 10%) !important;
}

/* Onboarding Feed
 *
 * The feed is a full-page Moroc application surface. Keep its local `.dark`
 * owner deterministic even when the browser or operating system prefers a
 * light colour scheme, matching the rest of Base Nova's scoped surfaces.
 */
.dark [data-ui-component="onboarding-feed"] {
    background-color: oklch(0.269 0 0 / 78%) !important;
    color: oklch(0.985 0 0) !important;
    --tw-ring-color: oklch(1 0 0 / 15%) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.dark [data-ui-component="onboarding-feed"] [data-ui-slot="body"] {
    background-color: oklch(0.205 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="onboarding-feed"] [data-ui-slot="description"],
.dark [data-ui-component="onboarding-feed"] [data-onboarding-save-status] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="onboarding-feed"] [data-ui-slot="step"] {
    background-color: oklch(0.708 0 0 / 30%) !important;
}

.dark [data-ui-component="onboarding-feed"] [data-ui-slot="step"][aria-current="step"] {
    background-color: oklch(0.922 0 0) !important;
}

.dark [data-ui-component="onboarding-feed"] :is(
    [data-onboarding-identity-name],
    [data-onboarding-identity-organisation],
    [data-onboarding-identity-office],
    [data-onboarding-identity-address]
) {
    color: oklch(0.985 0 0) !important;
}

/* The final onboarding action carries the standard Moroc ribbon palette into
 * the completion affordance without changing the shared Button recipe. */
[data-onboarding-final-action] {
    background-image: linear-gradient(
        105deg,
        rgb(36 122 255),
        rgb(219 235 250),
        rgb(252 232 163),
        rgb(255 163 41),
        rgb(36 122 255)
    ) !important;
    background-position: 0% 50%;
    background-size: 240% 100% !important;
    color: oklch(0.145 0 0) !important;
    animation: moroc-onboarding-final-action-ribbon 6s ease-in-out infinite alternate;
}

[data-onboarding-final-action]:hover {
    filter: brightness(1.04);
}

[data-onboarding-final-action]:focus-visible {
    --tw-ring-color: rgb(36 122 255 / 55%) !important;
}

@keyframes moroc-onboarding-final-action-ribbon {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-onboarding-final-action] {
        animation: none;
        background-position: 50% 50%;
    }
}

/* Dialog */
[data-ui-slot="portal"] > [data-slot="dialog-overlay"] {
    z-index: calc(var(--moroc-layer-modal) + var(--moroc-dialog-overlay-offset, 0)) !important;
}

[data-ui-slot="portal"] > [data-slot="dialog-content"] {
    z-index: calc(var(--moroc-layer-modal) + var(--moroc-dialog-content-offset, 1)) !important;
}

[data-ui-slot="portal"][data-ui-dialog-depth] > [data-slot="dialog-overlay"] {
    z-index: calc(var(--moroc-layer-modal) + var(--moroc-dialog-overlay-offset)) !important;
}

[data-ui-slot="portal"][data-ui-dialog-depth] > [data-slot="dialog-content"] {
    z-index: calc(var(--moroc-layer-modal) + var(--moroc-dialog-content-offset)) !important;
}

[data-ui-slot="portal"][data-ui-dialog-server-open] > [data-slot="dialog-overlay"][data-open],
[data-ui-slot="portal"][data-ui-dialog-server-open] > [data-slot="dialog-content"][data-open] {
    animation: none;
}

[data-slot="dialog-overlay"][data-open] {
    animation: moroc-dialog-overlay-in 100ms ease-out both;
}

[data-slot="dialog-overlay"][data-closed] {
    animation: moroc-dialog-overlay-out 90ms ease-in both;
}

[data-slot="dialog-content"][data-open] {
    animation: moroc-dialog-content-in 100ms cubic-bezier(.2, .8, .2, 1) both;
}

[data-slot="dialog-content"][data-closed] {
    animation: moroc-dialog-content-out 90ms ease-in both;
}

@keyframes moroc-dialog-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes moroc-dialog-overlay-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes moroc-dialog-content-in {
    from {
        opacity: 0;
        transform: scale(.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes moroc-dialog-content-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(.95);
    }
}

.dark [data-slot="dialog-content"] {
    background-color: oklch(0.205 0 0) !important;
    color: oklch(0.985 0 0) !important;
    --tw-ring-color: oklch(0.985 0 0 / 10%) !important;
}

.dark [data-slot="dialog-description"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-slot="dialog-description"] a:hover {
    color: oklch(0.985 0 0) !important;
}

[data-slot="dialog-content"][data-header-presentation="visually-hidden"] > [data-slot="dialog-header"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dark [data-slot="dialog-footer"] {
    background-color: oklch(0.269 0 0 / 50%) !important;
    border-color: oklch(1 0 0 / 15%) !important;
}

/* Mobile Dialog footers own the touch target for every shared action Button. */
@media (max-width: 47.999rem) {
    [data-slot="dialog-footer"] [data-ui-component="button"] {
        min-height: 2.75rem !important;
    }
}

/* Keep Dialog and Autocomplete scroll tracks quiet and compact. */
[data-slot="dialog-content"] [data-ui-slot="body"],
[data-ui-slot="autocomplete-list"] {
    scrollbar-width: thin;
    scrollbar-color: oklch(0.145 0 0 / 16%) transparent;
}

.dark [data-slot="dialog-content"] [data-ui-slot="body"],
.dark [data-ui-slot="autocomplete-list"] {
    scrollbar-color: oklch(1 0 0 / 16%) transparent;
}

[data-slot="dialog-content"] [data-ui-slot="body"]::-webkit-scrollbar,
[data-ui-slot="autocomplete-list"]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-slot="dialog-content"] [data-ui-slot="body"]::-webkit-scrollbar-track,
[data-ui-slot="autocomplete-list"]::-webkit-scrollbar-track {
    background: transparent;
}

[data-slot="dialog-content"] [data-ui-slot="body"]::-webkit-scrollbar-thumb,
[data-ui-slot="autocomplete-list"]::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: oklch(0.145 0 0 / 16%);
}

[data-slot="dialog-content"] [data-ui-slot="body"]::-webkit-scrollbar-thumb:hover,
[data-ui-slot="autocomplete-list"]::-webkit-scrollbar-thumb:hover {
    background: oklch(0.145 0 0 / 26%);
}

.dark [data-slot="dialog-content"] [data-ui-slot="body"]::-webkit-scrollbar-thumb,
.dark [data-ui-slot="autocomplete-list"]::-webkit-scrollbar-thumb {
    background: oklch(1 0 0 / 16%);
}

.dark [data-slot="dialog-content"] [data-ui-slot="body"]::-webkit-scrollbar-thumb:hover,
.dark [data-ui-slot="autocomplete-list"]::-webkit-scrollbar-thumb:hover {
    background: oklch(1 0 0 / 26%);
}

/* Autocomplete popups share Dialog geometry but need stronger contrast. */
[data-ui-slot="autocomplete-list"] {
    scrollbar-color: oklch(1 0 0 / 32%) transparent;
}

[data-ui-slot="autocomplete-list"]::-webkit-scrollbar-thumb {
    background: oklch(1 0 0 / 32%);
}

[data-ui-slot="autocomplete-list"]::-webkit-scrollbar-thumb:hover {
    background: oklch(1 0 0 / 52%);
}

/* Give Signup's imported-agent portraits a little more presence. */
[data-signup-agent-profile-autocomplete] [data-ui-slot="autocomplete-option-leading"] {
    width: 2.5rem;
    height: 2.5rem;
}

/* Sheet
 *
 * Sheet portals also travel to document.body. Their local `.dark` owner must
 * therefore paint the complete surface without depending on the operating
 * system's colour preference.
 */
.dark [data-slot="sheet-content"] {
    background-color: oklch(0.205 0 0) !important;
    border-color: oklch(1 0 0 / 15%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-slot="sheet-title"] {
    color: oklch(0.985 0 0) !important;
}

.dark [data-slot="sheet-description"] {
    color: oklch(0.708 0 0) !important;
}

/* Dialog Flow
 *
 * The Dialog portal moves to document.body while open, so transition state is
 * attached to the travelling Dialog surface rather than its original root.
 * Durations are supplied from dialog_flow.definition.php as CSS variables.
 */
[data-flow-transition-surface="fade-through"] [data-ui-slot="body"][data-flow-transition-role="outgoing"] {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    animation: moroc-dialog-flow-fade-out var(--moroc-dialog-flow-exit-duration, 80ms) ease-in both;
}

[data-flow-transition-surface="fade-through"] [data-ui-slot="body"][data-flow-transition-role="pending"] {
    opacity: 0;
}

[data-flow-transition-surface="fade-through"] [data-ui-slot="body"][data-flow-transition-role="incoming"] {
    animation: moroc-dialog-flow-fade-in var(--moroc-dialog-flow-enter-duration, 110ms) ease-out both;
}

[data-flow-transition-surface="fade-through"] [data-ui-slot="body"][data-flow-resizing] {
    overflow: hidden;
    transition: height var(--moroc-dialog-flow-resize-duration, 170ms) cubic-bezier(.2, .8, .2, 1);
    will-change: height, opacity, transform;
}

@keyframes moroc-dialog-flow-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(.99);
    }
}

@keyframes moroc-dialog-flow-fade-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button */
.dark [data-ui-button]:focus-visible {
    border-color: oklch(0.556 0 0) !important;
    --tw-ring-color: oklch(0.556 0 0 / 50%) !important;
}

.dark [data-ui-button][aria-invalid="true"] {
    border-color: oklch(0.704 0.191 22.216 / 50%) !important;
    --tw-ring-color: oklch(0.704 0.191 22.216 / 40%) !important;
}

.dark [data-ui-button][data-ui-variant="default"] {
    background-color: oklch(0.922 0 0) !important;
    color: oklch(0.205 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="default"]:hover {
    background-color: oklch(0.922 0 0 / 80%) !important;
}

.dark [data-ui-button][data-ui-variant="outline"] {
    background-color: oklch(1 0 0 / 4.5%) !important;
    border-color: oklch(1 0 0 / 15%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="outline"]:hover {
    background-color: oklch(1 0 0 / 7.5%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="outline"][aria-expanded="true"] {
    background-color: oklch(0.269 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="secondary"] {
    background-color: oklch(0.269 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="secondary"]:hover {
    background-color: color-mix(in oklch, oklch(0.269 0 0), oklch(0.985 0 0) 5%) !important;
}

.dark [data-ui-button][data-ui-variant="secondary"][aria-expanded="true"] {
    background-color: oklch(0.269 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="ghost"] {
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="ghost"]:hover {
    background-color: oklch(0.269 0 0 / 50%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="ghost"][aria-expanded="true"] {
    background-color: oklch(0.269 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

[data-ui-button][data-ui-variant="ghost-muted"] {
    color: var(--moroc-subtle, oklch(0.556 0 0)) !important;
}

[data-ui-button][data-ui-variant="ghost-muted"]:hover {
    background-color: oklch(0.97 0 0) !important;
    color: oklch(0.145 0 0) !important;
}

[data-ui-button][data-ui-variant="ghost-muted"][aria-checked="true"],
[data-ui-button][data-ui-variant="ghost-muted"][aria-expanded="true"] {
    background-color: oklch(0.97 0 0) !important;
    color: oklch(0.145 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="ghost-muted"] {
    color: var(--moroc-subtle, oklch(0.66 0 0)) !important;
}

.dark [data-ui-button][data-ui-variant="ghost-muted"]:hover {
    background-color: oklch(0.269 0 0 / 50%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="ghost-muted"][aria-checked="true"],
.dark [data-ui-button][data-ui-variant="ghost-muted"][aria-expanded="true"] {
    background-color: oklch(0.269 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-button][data-ui-variant="destructive"] {
    background-color: oklch(0.704 0.191 22.216 / 20%) !important;
    color: oklch(0.704 0.191 22.216) !important;
}

.dark [data-ui-button][data-ui-variant="destructive"]:hover {
    background-color: oklch(0.704 0.191 22.216 / 30%) !important;
}

.dark [data-ui-button][data-ui-variant="destructive"]:focus-visible {
    border-color: oklch(0.704 0.191 22.216 / 40%) !important;
    --tw-ring-color: oklch(0.704 0.191 22.216 / 40%) !important;
}

.dark [data-ui-button][data-ui-variant="link"] {
    color: oklch(0.922 0 0) !important;
}

/* FieldGroup responsive composition
 *
 * The production shell can mount PHP-authored templates after Tailwind's
 * browser compiler has scanned the document. Keep the data-driven column and
 * span contract in this registered asset so Workspace pages and Dialogs share
 * deterministic container behavior without a Tailwind rebuild.
 */
[data-ui-field-group] {
    container: field-group / inline-size;
}

[data-ui-field-group][data-layout="grid"] > [data-ui-slot="items"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

[data-ui-field-group][data-layout="grid"] > [data-ui-slot="items"] > [data-ui-field][data-span="full"],
[data-ui-field-group][data-layout="grid"] > [data-ui-slot="items"] > [data-ui-field-separator] {
    grid-column: 1 / -1 !important;
}

/* Keep two-up form fields out of phone-width containers. At 40rem each
 * control retains enough horizontal room for labels, values, and errors. */
@container field-group (min-width: 40rem) {
    [data-ui-field-group][data-layout="grid"]:is([data-columns="2"], [data-columns="3"], [data-columns="4"]) > [data-ui-slot="items"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    [data-ui-field-group][data-layout="grid"]:is([data-columns="2"], [data-columns="3"], [data-columns="4"]) > [data-ui-slot="items"] > [data-ui-field]:is([data-span="2"], [data-span="3"], [data-span="4"]) {
        grid-column: span 2 / span 2 !important;
    }
}

@container field-group (min-width: 48rem) {
    [data-ui-field-group][data-layout="grid"]:is([data-columns="3"], [data-columns="4"]) > [data-ui-slot="items"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    [data-ui-field-group][data-layout="grid"]:is([data-columns="3"], [data-columns="4"]) > [data-ui-slot="items"] > [data-ui-field]:is([data-span="3"], [data-span="4"]) {
        grid-column: span 3 / span 3 !important;
    }
}

@container field-group (min-width: 64rem) {
    [data-ui-field-group][data-layout="grid"][data-columns="4"] > [data-ui-slot="items"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    [data-ui-field-group][data-layout="grid"][data-columns="4"] > [data-ui-slot="items"] > [data-ui-field][data-span="4"] {
        grid-column: span 4 / span 4 !important;
    }
}

/* Badge */
.dark [data-ui-component="badge"][data-ui-variant="default"] {
    background-color: oklch(0.922 0 0) !important;
    color: oklch(0.205 0 0) !important;
}

.dark [data-ui-component="badge"][data-ui-variant="secondary"] {
    background-color: oklch(0.269 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="badge"][data-ui-variant="destructive"] {
    background-color: oklch(0.704 0.191 22.216 / 20%) !important;
    color: oklch(0.704 0.191 22.216) !important;
}

.dark [data-ui-component="badge"][data-ui-variant="outline"] {
    border-color: oklch(1 0 0 / 10%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="badge"][data-ui-variant="ghost"] {
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="badge"][data-ui-variant="ghost"]:hover {
    background-color: oklch(0.269 0 0 / 50%) !important;
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="badge"][data-ui-variant="link"] {
    color: oklch(0.922 0 0) !important;
}

/* Field copy and native text controls */
.dark [data-ui-component="field"][data-invalid="true"] {
    color: oklch(0.704 0.191 22.216) !important;
}

.dark [data-ui-component="field"] [data-slot="field-description"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="field"] [data-slot="field-description"] a:hover {
    color: oklch(0.922 0 0) !important;
}

.dark [data-ui-component="field"] [data-slot="field-error"] {
    color: oklch(0.704 0.191 22.216) !important;
}

/*
 * Keep browser autofill from replacing Base Nova control surfaces and text.
 * Chromium/WebKit mark their autofill background !important, so the transition
 * alone is not a reliable mask. Clip that browser background to the glyphs and
 * repaint the component-owned surface with an inset shadow. Input Group
 * controls stay transparent so their shared wrapper remains the one surface.
 */
:is(
    [data-ui-component="input"],
    [data-ui-component="textarea"]
) {
    --moroc-ui-autofill-background: transparent;
}

.dark :is(
    [data-ui-component="input"],
    [data-ui-component="textarea"]
) {
    --moroc-ui-autofill-background: oklch(1 0 0 / 4.5%);
}

.dark :is(
    [data-ui-component="input"],
    [data-ui-component="textarea"]
):is(:disabled, [readonly]) {
    --moroc-ui-autofill-background: oklch(1 0 0 / 12%);
}

:is(
    [data-ui-component="input"],
    [data-slot="input-group-control"]
)[data-presentation="floating-pill"] {
    --moroc-ui-autofill-background: var(--moroc-floating-pill-background, oklch(0.145 0 0));
}

[data-ui-component="input-group"] > [data-slot="input-group-control"] {
    --moroc-ui-autofill-background: transparent;
}

:is(
    [data-ui-component="input"],
    [data-ui-component="textarea"],
    [data-slot="input-group-control"]
):is(:autofill, :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) {
    color: var(--moroc-ui-autofill-text, oklch(0.985 0 0)) !important;
    -webkit-text-fill-color: var(--moroc-ui-autofill-text, oklch(0.985 0 0)) !important;
    caret-color: var(--moroc-ui-autofill-text, oklch(0.985 0 0));
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-box-shadow:
        var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000),
        inset 0 0 0 1000px var(--moroc-ui-autofill-background, transparent) !important;
    box-shadow:
        var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000),
        inset 0 0 0 1000px var(--moroc-ui-autofill-background, transparent) !important;
    transition: background-color 99999s ease-in-out 0s;
    filter: none !important;
}

.dark [data-ui-component="input"],
.dark [data-ui-component="textarea"] {
    background-color: oklch(1 0 0 / 4.5%) !important;
    border-color: oklch(1 0 0 / 15%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="input-group"] {
    background-color: oklch(1 0 0 / 4.5%) !important;
    border-color: oklch(1 0 0 / 15%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="input-group"] [data-slot="input-group-control"] {
    background-color: transparent !important;
    color: oklch(0.985 0 0) !important;
}

.dark :is(
    [data-ui-component="input"],
    [data-ui-component="textarea"]
)[readonly],
.dark [data-ui-component="input-group"]:has(> [data-slot="input-group-control"][readonly]) {
    cursor: not-allowed;
    opacity: 0.5;
}

.dark [data-ui-component="input-group"]:has(> [data-slot="input-group-control"][readonly]) [data-slot="input-group-control"] {
    cursor: not-allowed;
}

.dark [data-ui-component="input-group-button"][data-variant="ghost"] {
    background-color: transparent !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="input-group-button"][data-variant="ghost"]:hover {
    background-color: oklch(1 0 0 / 7.5%) !important;
    color: oklch(0.985 0 0) !important;
}

[data-ui-component="autocomplete"][data-locked="true"] [data-ui-autocomplete-input] {
    color: oklch(0.708 0 0) !important;
    cursor: default;
}

[data-ui-component="autocomplete"] [data-slot="input-group-addon"] {
    background-color: transparent !important;
}

[data-ui-component="autocomplete"] [data-slot="input-group-button"] {
    background-color: transparent !important;
    color: oklch(0.708 0 0) !important;
}

[data-ui-component="autocomplete"] [data-slot="input-group-button"]:hover {
    background-color: transparent !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="location-field"] [data-ui-location-input]:read-only {
    color: oklch(0.708 0 0) !important;
    cursor: default;
}

.dark [data-ui-component="input"]::placeholder,
.dark [data-ui-component="textarea"]::placeholder {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="input"]:focus-visible,
.dark [data-ui-component="textarea"]:focus-visible {
    border-color: oklch(0.556 0 0) !important;
    --tw-ring-color: oklch(0.556 0 0 / 50%) !important;
}

.dark [data-ui-component="input"]:disabled,
.dark [data-ui-component="textarea"]:disabled {
    background-color: oklch(1 0 0 / 12%) !important;
}

.dark [data-ui-component="input"][aria-invalid="true"],
.dark [data-ui-component="textarea"][aria-invalid="true"] {
    border-color: oklch(0.704 0.191 22.216 / 50%) !important;
    --tw-ring-color: oklch(0.704 0.191 22.216 / 40%) !important;
}

/* Select */
.dark [data-ui-component="select"] [data-ui-slot="trigger"] {
    background-color: oklch(1 0 0 / 4.5%) !important;
    border-color: oklch(1 0 0 / 15%) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="trigger"]:hover {
    background-color: oklch(1 0 0 / 7.5%) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="trigger"]:focus-visible {
    border-color: oklch(0.556 0 0) !important;
    --tw-ring-color: oklch(0.556 0 0 / 50%) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="trigger"][aria-invalid="true"] {
    border-color: oklch(0.704 0.191 22.216 / 50%) !important;
    --tw-ring-color: oklch(0.704 0.191 22.216 / 40%) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="trigger"][data-placeholder] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="icon"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="content"] {
    background-color: oklch(0.205 0 0) !important;
    color: oklch(0.985 0 0) !important;
    --tw-ring-color: oklch(0.985 0 0 / 10%) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="scroll-up"],
.dark [data-ui-component="select"] [data-ui-slot="scroll-down"] {
    background-color: oklch(0.205 0 0) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="group-label"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="item"]:focus,
.dark [data-ui-component="select"] [data-ui-slot="item"][data-active="true"] {
    background-color: oklch(0.371 0 0) !important;
    color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="select"] [data-ui-slot="separator"] {
    background-color: oklch(1 0 0 / 10%) !important;
}

/* Integrated manager-filter triggers open a sharp drawer flush with the toolbar. */
.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="trigger"] {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="trigger"]:hover {
    background-color: color-mix(in srgb, var(--moroc-fg, #fff) 3.5%, transparent) !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="trigger"][aria-expanded="true"] {
    background-color: color-mix(in srgb, var(--moroc-fg, #fff) 5.5%, transparent) !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="trigger"]:focus-visible {
    border-color: transparent !important;
    --tw-ring-color: transparent !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="content"] {
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    background-color: color-mix(in srgb, #0a0a0a 95%, var(--moroc-fg, #fff)) !important;
    border: 1px solid var(--moroc-divider, color-mix(in srgb, var(--moroc-surface-border, rgb(255 255 255 / 8%)) 70%, transparent)) !important;
    border-top-width: 0.5px !important;
    border-top-color: color-mix(in srgb, var(--moroc-fg, #fff) 12%, transparent) !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 28px -18px rgb(0 0 0 / 0.85) !important;
    --tw-ring-color: transparent !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="group"] {
    padding: 0.375rem 0 !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="separator"] {
    margin: 0.25rem 0 !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="scroll-up"],
.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="scroll-down"] {
    background-color: color-mix(in srgb, #0a0a0a 95%, var(--moroc-fg, #fff)) !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="item"] {
    border-radius: 0 !important;
    padding: 0.5rem 2.25rem 0.5rem 1rem !important;
}

.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="item"]:focus,
.dark [data-manager-filter-toolbar-presentation="integrated"] [data-ui-component="select"] [data-ui-slot="item"][data-active="true"] {
    background-color: color-mix(in srgb, var(--moroc-fg, #fff) 7%, transparent) !important;
}

/* Checkbox and radio controls used by compact Dialog forms. */
.dark [data-ui-component="checkbox"],
.dark [data-ui-component="radio-group"] [data-slot="radio-group-item"] {
    background-color: oklch(1 0 0 / 4.5%) !important;
    border-color: oklch(1 0 0 / 15%) !important;
}

.dark [data-ui-component="checkbox"][data-checked],
.dark [data-ui-component="checkbox"][data-indeterminate="true"],
.dark [data-ui-component="radio-group"] [data-slot="radio-group-item"]:checked {
    background-color: oklch(0.922 0 0) !important;
    border-color: oklch(0.922 0 0) !important;
    color: oklch(0.205 0 0) !important;
}

.dark [data-ui-component="checkbox"][data-checked] + [data-slot="checkbox-indicator"],
.dark [data-ui-component="checkbox"][data-indeterminate="true"] + [data-slot="checkbox-indicator"] {
    color: oklch(0.205 0 0) !important;
}

.dark [data-ui-component="checkbox"]:focus-visible,
.dark [data-ui-component="radio-group"] [data-slot="radio-group-item"]:focus-visible {
    border-color: oklch(0.556 0 0) !important;
    --tw-ring-color: oklch(0.556 0 0 / 50%) !important;
}

.dark [data-ui-checkbox-root][data-presentation="card"],
.dark [data-ui-component="radio-group"] [data-ui-slot="item"][data-presentation="card"] {
    border-color: oklch(1 0 0 / 10%) !important;
}

.dark [data-ui-checkbox-root][data-presentation="card"]:has([data-ui-component="checkbox"][data-checked]),
.dark [data-ui-component="radio-group"] [data-ui-slot="item"][data-presentation="card"]:has([data-slot="radio-group-item"]:checked) {
    background-color: oklch(0.922 0 0 / 10%) !important;
    border-color: oklch(0.922 0 0 / 20%) !important;
}

.dark [data-ui-checkbox-root] [data-ui-slot="description"],
.dark [data-ui-component="radio-group"] [data-ui-slot="description"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-component="radio-group"] [data-slot="radio-group-indicator"] {
    background-color: oklch(0.205 0 0) !important;
}

/* Switch */
.dark [data-ui-component="switch"] {
    background-color: oklch(1 0 0 / 12%) !important;
}

.dark [data-ui-component="switch"][data-checked] {
    background-color: oklch(0.922 0 0) !important;
}

.dark [data-ui-component="switch"] + [data-slot="switch-thumb"] {
    background-color: oklch(0.985 0 0) !important;
}

.dark [data-ui-component="switch"][data-checked] + [data-slot="switch-thumb"] {
    background-color: oklch(0.205 0 0) !important;
}

.dark [data-ui-component="switch"]:focus-visible {
    border-color: oklch(0.556 0 0) !important;
    --tw-ring-color: oklch(0.556 0 0 / 50%) !important;
}

.dark [data-ui-slot="item"]:has([data-ui-component="switch"]) [data-ui-slot="description"] {
    color: oklch(0.708 0 0) !important;
}

.dark [data-ui-slot="item"][data-presentation="card"]:has([data-ui-component="switch"]) {
    border-color: oklch(1 0 0 / 10%) !important;
}

.dark [data-ui-slot="item"][data-presentation="card"]:has([data-ui-component="switch"][data-checked]) {
    background-color: oklch(0.922 0 0 / 10%) !important;
    border-color: oklch(0.922 0 0 / 20%) !important;
}