html {
    color-scheme: dark;
    background: var(--dadox-page-bg);
}

html[data-theme="dadox-light"],
html[data-theme="warm"],
html[data-theme="neutral"] {
    color-scheme: light;
}

html[data-theme="contrast"],
html[data-theme="custom"] {
    color-scheme: dark;
}

body {
    font-family: "Manrope", "Aptos", "Segoe UI Variable Display", "Segoe UI", sans-serif;
    margin: 0;
    color: var(--dadox-text);
    background: var(--dadox-page-bg);
    overflow-x: hidden;
}

/* Page eyebrow (brand line above titles) */
[class$="-eyebrow"] {
    color: var(--dadox-page-highlight) !important;
}

/* Global: slightly brighten "box" surfaces for better contrast on mobile. */
[class$="-card"],
[class$="-tile"],
.shop-item,
.detail-media,
.detail-info,
.edit-block,
.image-tile {
    position: relative;
}

[class$="-card"]::before,
[class$="-tile"]::before,
.shop-item::before,
.detail-media::before,
.detail-info::before,
.edit-block::before,
.image-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: var(--dadox-surface-sheen);
    box-shadow: var(--dadox-surface-inset);
}

:root {
    /* Brand colors */
    --dadox-orange: #F19300;
    --dadox-magenta: #BC007B;
    --dadox-green: #006A6B;
    --dadox-black: #1A171B;

    --dadox-orange-rgb: 241, 147, 0;
    --dadox-magenta-rgb: 188, 0, 123;
    --dadox-green-rgb: 0, 106, 107;

    /* Shared brand gradients */
    --dadox-brand-gradient: linear-gradient(90deg, var(--dadox-magenta), var(--dadox-orange), var(--dadox-green));
    --dadox-shimmer-gradient: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(var(--dadox-magenta-rgb), 0.18) 16%,
        rgba(var(--dadox-orange-rgb), 0.95) 46%,
        rgba(255, 255, 255, 1) 50%,
        rgba(var(--dadox-green-rgb), 0.95) 54%,
        rgba(var(--dadox-orange-rgb), 0.18) 84%,
        rgba(255, 255, 255, 0) 100%
    );

    /* Responsive layout tokens */
    --dadox-max-width: 72rem;
    --dadox-pad-x: 1rem;
    --dadox-page-pad-top: 2rem;
    --dadox-page-pad-bottom: 3rem;

    /* Dark default */
    --dadox-accent: var(--dadox-orange);
    --dadox-accent-strong: var(--dadox-orange);
    --dadox-page-bg: #0a0d12;
    --dadox-page-bg-gradient:
        radial-gradient(circle at 15% 12%, rgba(242, 161, 31, 0.22), transparent 18rem),
        radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.08), transparent 22rem),
        linear-gradient(180deg, #0d1118 0%, #0b0f15 48%, #090b10 100%);
    --dadox-text: #f5f1e8;
    --dadox-text-muted: #c1baa9;
    --dadox-heading: #f6efe4;
    --dadox-page-highlight: rgba(241, 207, 113, 0.9);
    --dadox-border: rgba(255, 255, 255, 0.14);
    --dadox-border-soft: rgba(255, 255, 255, 0.08);
    --dadox-panel-border: rgba(214, 178, 74, 0.16);
    --dadox-panel-bg:
        linear-gradient(180deg, rgba(25, 22, 16, 0.66), rgba(15, 16, 18, 0.88)),
        rgba(16, 18, 22, 0.88);
    --dadox-panel-shadow:
        inset 0 1px 0 rgba(255, 231, 185, 0.04),
        0 18px 40px rgba(0, 0, 0, 0.2);
    --dadox-subtle-panel-bg: rgba(255, 255, 255, 0.03);
    --dadox-subtle-panel-border: rgba(255, 255, 255, 0.08);
    --dadox-subtle-panel-shadow: inset 0 1px 0 rgba(255, 231, 185, 0.03);
    --dadox-surface-sheen: rgba(255, 255, 255, 0.055);
    --dadox-surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --dadox-input-bg: rgba(7, 9, 13, 0.72);
    --dadox-input-border: rgba(255, 255, 255, 0.1);
    --dadox-footer-border: rgba(255, 255, 255, 0.08);
    --dadox-nav-link: #9e9aa8;
    --dadox-nav-link-active: #ffffff;
    --dadox-overlay: rgba(0, 0, 0, 0.55);

    --dadox-status-success-border: rgba(106, 207, 141, 0.24);
    --dadox-status-success-bg: rgba(18, 67, 37, 0.24);
    --dadox-status-success-text: #dcffe6;
    --dadox-status-error-border: rgba(255, 119, 119, 0.22);
    --dadox-status-error-bg: rgba(80, 24, 24, 0.28);
    --dadox-status-error-text: #ffd8d8;

    --dadox-btn-border: rgba(230, 193, 88, 0.24);
    --dadox-btn-bg: radial-gradient(circle at 15% 50%, rgba(255, 228, 140, 0.15), transparent 35%),
        linear-gradient(180deg, rgba(26, 23, 13, 0.98), rgba(12, 13, 11, 0.98));
    --dadox-btn-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.04),
        0 0 0 1px rgba(205, 164, 54, 0.06),
        0 0 30px rgba(225, 192, 93, 0.14);
    --dadox-btn-color: #f4dd8a;
}

html[data-theme="dadox-light"] {
    --dadox-page-bg: #f4ecdf;
    --dadox-page-bg-gradient:
        radial-gradient(circle at 14% 12%, rgba(var(--dadox-orange-rgb), 0.16), transparent 18rem),
        radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.72), transparent 24rem),
        linear-gradient(180deg, #fbf6ec 0%, #f4ecdf 48%, #ebe0cf 100%);
    --dadox-text: #2f251c;
    --dadox-text-muted: #6b6056;
    --dadox-heading: #211915;
    --dadox-page-highlight: rgba(147, 89, 6, 0.88);
    --dadox-border: rgba(69, 50, 33, 0.18);
    --dadox-border-soft: rgba(69, 50, 33, 0.1);
    --dadox-panel-border: rgba(188, 140, 46, 0.2);
    --dadox-panel-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 239, 226, 0.96)),
        rgba(255, 255, 255, 0.9);
    --dadox-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 18px 40px rgba(104, 77, 41, 0.12);
    --dadox-subtle-panel-bg: rgba(255, 255, 255, 0.64);
    --dadox-subtle-panel-border: rgba(90, 66, 43, 0.12);
    --dadox-subtle-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --dadox-surface-sheen: rgba(255, 255, 255, 0.28);
    --dadox-surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    --dadox-input-bg: rgba(255, 255, 255, 0.88);
    --dadox-input-border: rgba(92, 71, 49, 0.18);
    --dadox-footer-border: rgba(69, 50, 33, 0.12);
    --dadox-nav-link: #705f50;
    --dadox-nav-link-active: #201915;
    --dadox-overlay: rgba(66, 50, 36, 0.16);
    --dadox-status-success-border: rgba(49, 126, 69, 0.26);
    --dadox-status-success-bg: rgba(128, 210, 154, 0.18);
    --dadox-status-success-text: #1f5b30;
    --dadox-status-error-border: rgba(181, 82, 82, 0.28);
    --dadox-status-error-bg: rgba(255, 210, 210, 0.38);
    --dadox-status-error-text: #7a2323;
    --dadox-btn-border: rgba(205, 157, 58, 0.28);
    --dadox-btn-bg: radial-gradient(circle at 15% 50%, rgba(var(--dadox-orange-rgb), 0.12), transparent 35%),
        linear-gradient(180deg, rgba(255, 248, 233, 0.98), rgba(247, 230, 195, 0.98));
    --dadox-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 0 0 1px rgba(205, 164, 54, 0.08),
        0 12px 26px rgba(120, 89, 39, 0.1);
    --dadox-btn-color: #684300;
}

html[data-theme="warm"] {
    --dadox-page-bg: #f2e5d4;
    --dadox-page-bg-gradient:
        radial-gradient(circle at 16% 10%, rgba(188, 0, 123, 0.08), transparent 18rem),
        radial-gradient(circle at 84% 18%, rgba(241, 147, 0, 0.12), transparent 20rem),
        linear-gradient(180deg, #fbf3e5 0%, #f2e5d4 52%, #e6d5bf 100%);
    --dadox-text: #38281c;
    --dadox-text-muted: #786555;
    --dadox-heading: #25180f;
    --dadox-page-highlight: rgba(147, 78, 0, 0.9);
    --dadox-border: rgba(82, 53, 28, 0.18);
    --dadox-border-soft: rgba(82, 53, 28, 0.11);
    --dadox-panel-border: rgba(188, 116, 44, 0.22);
    --dadox-panel-bg:
        linear-gradient(180deg, rgba(255, 251, 245, 0.92), rgba(249, 236, 218, 0.96)),
        rgba(255, 247, 236, 0.92);
    --dadox-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 18px 40px rgba(112, 73, 34, 0.12);
    --dadox-subtle-panel-bg: rgba(255, 252, 247, 0.6);
    --dadox-subtle-panel-border: rgba(104, 72, 42, 0.12);
    --dadox-subtle-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    --dadox-surface-sheen: rgba(255, 255, 255, 0.24);
    --dadox-surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --dadox-input-bg: rgba(255, 252, 247, 0.88);
    --dadox-input-border: rgba(92, 63, 37, 0.18);
    --dadox-footer-border: rgba(82, 53, 28, 0.12);
    --dadox-nav-link: #7a6856;
    --dadox-nav-link-active: #25180f;
    --dadox-overlay: rgba(75, 53, 35, 0.18);
    --dadox-btn-border: rgba(188, 116, 44, 0.24);
    --dadox-btn-bg: radial-gradient(circle at 15% 50%, rgba(188, 0, 123, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(244, 220, 188, 0.98));
    --dadox-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 0 0 1px rgba(188, 116, 44, 0.08),
        0 12px 26px rgba(120, 82, 45, 0.1);
    --dadox-btn-color: #6b3400;
}

html[data-theme="neutral"] {
    --dadox-page-bg: #eef1f4;
    --dadox-page-bg-gradient:
        radial-gradient(circle at 15% 12%, rgba(0, 106, 107, 0.12), transparent 18rem),
        radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.7), transparent 24rem),
        linear-gradient(180deg, #f7f9fb 0%, #eef1f4 52%, #e0e5ea 100%);
    --dadox-text: #22303a;
    --dadox-text-muted: #61707b;
    --dadox-heading: #162028;
    --dadox-page-highlight: rgba(0, 90, 91, 0.9);
    --dadox-border: rgba(41, 56, 68, 0.18);
    --dadox-border-soft: rgba(41, 56, 68, 0.1);
    --dadox-panel-border: rgba(0, 106, 107, 0.18);
    --dadox-panel-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 244, 247, 0.96)),
        rgba(255, 255, 255, 0.92);
    --dadox-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 18px 40px rgba(65, 83, 98, 0.1);
    --dadox-subtle-panel-bg: rgba(255, 255, 255, 0.66);
    --dadox-subtle-panel-border: rgba(41, 56, 68, 0.1);
    --dadox-subtle-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --dadox-surface-sheen: rgba(255, 255, 255, 0.22);
    --dadox-surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    --dadox-input-bg: rgba(255, 255, 255, 0.9);
    --dadox-input-border: rgba(51, 68, 80, 0.16);
    --dadox-footer-border: rgba(41, 56, 68, 0.1);
    --dadox-nav-link: #60707c;
    --dadox-nav-link-active: #162028;
    --dadox-overlay: rgba(39, 55, 68, 0.16);
    --dadox-btn-border: rgba(0, 106, 107, 0.24);
    --dadox-btn-bg: radial-gradient(circle at 15% 50%, rgba(0, 106, 107, 0.1), transparent 35%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(227, 238, 240, 0.98));
    --dadox-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 0 0 1px rgba(0, 106, 107, 0.08),
        0 12px 26px rgba(65, 83, 98, 0.08);
    --dadox-btn-color: #0d4e4f;
}

html[data-theme="contrast"] {
    --dadox-page-bg: #07090e;
    --dadox-page-bg-gradient:
        radial-gradient(circle at 16% 10%, rgba(241, 147, 0, 0.2), transparent 16rem),
        radial-gradient(circle at 84% 16%, rgba(0, 106, 107, 0.18), transparent 18rem),
        linear-gradient(180deg, #0b1015 0%, #07090e 48%, #040507 100%);
    --dadox-text: #f7f8fb;
    --dadox-text-muted: #c5ccdb;
    --dadox-heading: #ffffff;
    --dadox-page-highlight: rgba(255, 210, 96, 0.94);
    --dadox-border: rgba(255, 255, 255, 0.2);
    --dadox-border-soft: rgba(255, 255, 255, 0.12);
    --dadox-panel-border: rgba(255, 210, 96, 0.22);
    --dadox-panel-bg:
        linear-gradient(180deg, rgba(14, 18, 24, 0.96), rgba(8, 11, 16, 0.98)),
        rgba(9, 12, 17, 0.98);
    --dadox-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 40px rgba(0, 0, 0, 0.28);
    --dadox-subtle-panel-bg: rgba(255, 255, 255, 0.05);
    --dadox-subtle-panel-border: rgba(255, 255, 255, 0.1);
    --dadox-subtle-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --dadox-surface-sheen: rgba(255, 255, 255, 0.065);
    --dadox-surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --dadox-input-bg: rgba(8, 12, 18, 0.92);
    --dadox-input-border: rgba(255, 255, 255, 0.14);
    --dadox-footer-border: rgba(255, 255, 255, 0.12);
    --dadox-nav-link: #d7ddee;
    --dadox-nav-link-active: #ffffff;
    --dadox-overlay: rgba(0, 0, 0, 0.68);
    --dadox-status-success-border: rgba(115, 230, 150, 0.3);
    --dadox-status-success-bg: rgba(24, 88, 47, 0.3);
    --dadox-status-success-text: #e3ffeb;
    --dadox-status-error-border: rgba(255, 140, 140, 0.32);
    --dadox-status-error-bg: rgba(91, 27, 27, 0.34);
    --dadox-status-error-text: #ffe3e3;
}

@media (min-width: 768px) {
    :root {
        --dadox-pad-x: 1.5rem;
        --dadox-page-pad-top: 2.4rem;
        --dadox-page-pad-bottom: 4rem;
    }
}

* {
    box-sizing: border-box;
}

a,
.btn-link {
    color: inherit;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    padding: 0.75rem 3.5rem 0.85rem 1.25rem;
    border-top: 1px solid rgba(181, 82, 82, 0.38);
    background: linear-gradient(180deg, rgba(70, 22, 22, 0.96), rgba(48, 16, 16, 0.98));
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
    color: #fff1f1;
    font-size: 0.95rem;
}

#blazor-error-ui .reload {
    color: #ffd4d4;
    font-weight: 700;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: 0.65rem;
    cursor: pointer;
    color: #ffd4d4;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Site-wide: unify button palette to match /admin (keep layout/padding from per-page CSS). */
:where(
    .admin-button,
    .adminhome-nav-item,
    .adminhome-refresh,
    .adminshop-trash,
    .konto-action,
    .settings-action,
    .settings-nav-item,
    .submit-button,
    .primary-action,
    .primary-button,
    .secondary-button,
    .reset-action-link,
    .verify-action-link,
    .movements-button,
    .movements-button-ghost,
    .shop-button,
    .shop-button-ghost,
    .checkout-action,
    .checkout-action-secondary,
    .cart-button,
    .cart-button-ghost,
    .logout-confirm,
    .forgot-toggle,
    .forgot-button,
    .turn-button,
    .btn.btn-primary,
    .btn.btn-secondary,
    .btn.btn-success,
    .btn.btn-warning,
    .btn.btn-danger
) {
    border-color: var(--dadox-btn-border) !important;
    background: var(--dadox-btn-bg) !important;
    box-shadow: var(--dadox-btn-shadow) !important;
    color: var(--dadox-btn-color) !important;
}

/* Keep explicit danger variants red (admin + any future pages). */
:where(.admin-button-danger, .btn.btn-danger) {
    border-color: rgba(255, 119, 119, 0.22) !important;
    background: linear-gradient(180deg, rgba(64, 18, 18, 0.9), rgba(34, 12, 12, 0.9)),
        rgba(34, 12, 12, 0.9) !important;
    box-shadow: none !important;
    color: #ffd8d8 !important;
}