body {
    background: #f5f5f5;
    font-family: Arial, sans-serif;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    transition: opacity 130ms ease, transform 130ms ease, filter 150ms ease;
}

html.zx-page-booting body {
    opacity: 0;
}

html.zx-page-enter body {
    opacity: 1;
}

html.zx-page-leaving body {
    opacity: 0.92;
    transform: translateY(2px);
}

html.zx-page-leaving.zx-lang-switching body {
    opacity: 0.86;
    transform: translateY(1px);
    filter: blur(1.5px);
}

/* Admin layout: disable vertical leave transform to avoid sidebar "stretch" on route clicks. */
html.zx-admin-layout body {
    transform: none !important;
}

html.zx-admin-layout.zx-page-leaving body,
html.zx-admin-layout.zx-page-leaving.zx-lang-switching body {
    transform: none !important;
    filter: none !important;
}

html.zx-theme-transitioning *,
html.zx-theme-transitioning *::before,
html.zx-theme-transitioning *::after {
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        fill 150ms ease,
        stroke 150ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }

    html.zx-page-leaving body {
        transform: none;
    }

    html.zx-page-leaving.zx-lang-switching body {
        filter: none;
    }

    html.zx-theme-transitioning *,
    html.zx-theme-transitioning *::before,
    html.zx-theme-transitioning *::after {
        transition: none !important;
    }
}

[x-cloak] {
    display: none !important;
}

h1,
h2 {
    color: #333;
}

.error-card {
    max-width: 600px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* Shared form fallback styles (applies when a view does not use dedicated form components). */
:where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ) {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease,
        color 140ms ease;
}

:where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        textarea
    )::placeholder {
    color: #94a3b8;
}

:where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ):focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

:where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ):disabled {
    cursor: not-allowed;
    opacity: 0.65;
    background: #f1f5f9;
}

.dark
    :where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ) {
    border-color: #475569;
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
}

.dark
    :where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        textarea
    )::placeholder {
    color: #64748b;
}

.dark
    :where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ):focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28);
}

.dark
    :where(form)
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ):disabled {
    background: rgba(30, 41, 59, 0.75);
}

/* Admin sidebar width must remain stable across routes/states. */
.zx-admin-sidebar-shell {
    box-sizing: border-box;
    contain: inline-size;
    width: min(17rem, 78vw) !important;
    min-width: min(17rem, 78vw) !important;
    max-width: min(17rem, 78vw) !important;
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .zx-admin-sidebar-shell {
        width: 16rem !important;
        min-width: 16rem !important;
        max-width: 16rem !important;
    }

    .zx-admin-main {
        margin-left: 16rem !important;
    }
}

.zx-admin-sidebar-shell,
.zx-admin-sidebar-inner {
    overflow-x: hidden;
}

.zx-admin-sidebar-inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.zx-admin-sidebar-shell * {
    box-sizing: border-box;
}