/* ============================================
   OLDERFALL BACKOFFICE - THEME SYSTEM
   Gold/Amber Theme (shop.olderfall.com style)
   ============================================ */

/* --- Light Theme --- */
:root {
    /* Option A - Vibrant Gold/Amber */
    --accent-primary: hsl(47, 65%, 45%);
    /* Bright gold */
    --accent-primary-hover: hsl(47, 70%, 52%);
    /* Brighter on hover */
    --accent-secondary: hsl(47, 60%, 55%);
    /* Light gold */
    --accent-secondary-hover: hsl(47, 65%, 62%);
    /* Lighter on hover */

    --ring-color: hsl(47, 80%, 50%);

    /* Info Button - Sky blue */
    --info: hsl(200, 70%, 50%);

    /* Background Colors */
    --bg-page: hsl(47, 15%, 96%);
    /* #f7f6f2 */
    --bg-card: #ffffff;
    --bg-card-hover: hsl(47, 20%, 97%);
    /* #faf9f5 */
    --bg-header: #ffffff;
    --bg-input: hsl(47, 20%, 98%);

    /* Text Colors */
    --text-primary: hsl(47, 15%, 20%);
    /* #383526 */
    --text-secondary: hsl(47, 10%, 40%);
    /* #6b6658 */
    --text-muted: hsl(47, 8%, 55%);
    /* #918c7f */
    --text-title: hsl(47, 20%, 15%);
    /* #2e2a1c */

    /* Border Colors */
    --border-color: hsl(47, 15%, 85%);
    /* #ddd9cc */
    --border-color-hover: hsl(47, 30%, 60%);
    /* #a99a66 */

    /* Shadows */
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* Top Bar */
    --topbar-bg: #ffffff;
    --topbar-border: hsl(47, 15%, 88%);
    --topbar-text: hsl(47, 15%, 25%);

    /* Cards */
    --card-gradient: linear-gradient(145deg, #ffffff 0%, hsl(47, 20%, 97%) 100%);
    --priority-card-gradient: linear-gradient(145deg, hsla(47, 40%, 50%, 0.08) 0%, #ffffff 100%);

    /* Status Colors */
    --success: hsl(120, 45%, 40%);
    --warning: hsl(47, 80%, 50%);
    --danger: hsl(0, 65%, 50%);

    /* Border Subtle */
    --border-subtle: hsl(47, 15%, 88%);

    /* Theme Toggle */
    --theme-mode: light;
}

/* --- Dark Theme --- */
[data-theme="dark"] {
    /* Primary Colors - Gold/Amber (hue 47°) - BRIGHTER */
    --accent-primary: hsl(47, 50%, 50%);
    /* Brighter gold */
    --accent-primary-hover: hsl(47, 55%, 58%);
    /* Even brighter */
    --accent-secondary: hsl(47, 55%, 62%);
    /* Light gold */
    --accent-secondary-hover: hsl(47, 60%, 70%);
    /* Very bright */

    /* Focus Ring */
    --ring-color: hsl(47, 100%, 65%);
    /* Bright focus */

    /* Background Colors */
    --bg-page: hsl(47, 8%, 6%);
    /* #0f0e0c - Almost black with warm tint */
    --bg-card: hsl(47, 5%, 11%);
    /* #1d1c19 - Card background */
    --bg-card-hover: hsl(47, 5%, 15%);
    /* #282621 */
    --bg-header: hsl(47, 6%, 8%);
    /* #151411 */
    --bg-input: hsl(47, 4%, 14%);
    /* #252320 */

    /* Text Colors */
    --text-primary: hsl(47, 10%, 90%);
    /* #e8e6e0 */
    --text-secondary: hsl(47, 5%, 55%);
    /* #908d84 */
    --text-muted: hsl(47, 3%, 45%);
    /* #757269 */
    --text-title: hsl(47, 15%, 95%);
    /* #f5f3ed */

    /* Border Colors */
    --border-color: hsl(47, 10%, 20%);
    /* #363327 */
    --border-color-hover: hsl(47, 30%, 40%);
    /* #857346 */

    /* Shadows */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 12px 40px rgba(139, 122, 61, 0.2);

    /* Top Bar */
    --topbar-bg: hsl(47, 5%, 11%);
    --topbar-border: hsl(47, 10%, 18%);
    --topbar-text: hsl(47, 10%, 88%);

    /* Cards */
    --card-gradient: linear-gradient(145deg, hsl(47, 5%, 12%) 0%, hsl(47, 6%, 7%) 100%);
    --priority-card-gradient: linear-gradient(145deg, hsla(47, 35%, 40%, 0.1) 0%, hsl(47, 5%, 9%) 100%);

    /* Status Colors */
    --success: hsl(120, 45%, 40%);
    --warning: hsl(47, 80%, 50%);
    --danger: hsl(0, 65%, 50%);
    /* Red */
    --info: hsl(200, 60%, 50%);

    /* Border Subtle */
    --border-subtle: hsl(47, 10%, 20%);

    /* Theme Toggle */
    --theme-mode: dark;
}

/* --- Base Styles --- */
html,
body {
    font-family: Roboto, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

button {
    text-transform: none !important;
}

a,
.btn-link {
    color: var(--accent-primary);
}

a:hover,
.btn-link:hover {
    color: var(--accent-primary-hover);
}

.btn-primary {
    color: #fff;
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.btn-primary:hover {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg-page), 0 0 0 0.25rem var(--ring-color);
}

.content {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: var(--text-muted);
}

/* --- Navigation Scrollable --- */
.nav-scrollable {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) rgba(0, 0, 0, 0.2);
}

.nav-scrollable::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.nav-scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%);
    border-radius: 3px;
}

/* --- Radzen Panel Overrides --- */
.rz-panel .rz-panel-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rz-panel .rz-panel-toggler {
    display: flex;
    align-items: center;
}

/* --- Theme Toggle Button --- */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    color: var(--accent-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
    z-index: 9999;
}

.theme-toggle:hover {
    transform: scale(1.1);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 20px hsla(47, 60%, 50%, 0.3);
}

/* --- Radzen Component Theme Overrides --- */
.rz-card,
.rz-panel {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.rz-datatable {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.rz-datatable .rz-datatable-thead {
    background: var(--bg-header) !important;
}

.rz-datatable .rz-datatable-thead th {
    background: var(--bg-header) !important;
    color: var(--accent-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    font-weight: 600 !important;
}

.rz-datatable .rz-datatable-data tr {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.rz-datatable .rz-datatable-data tr:hover {
    background: var(--bg-card-hover) !important;
}

.rz-datatable .rz-datatable-data td {
    border-color: var(--border-color) !important;
}

.rz-grid {
    background: var(--bg-card) !important;
}

.rz-grid .rz-grid-table thead th {
    background: var(--bg-header) !important;
    color: var(--accent-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

.rz-grid .rz-grid-table tbody tr {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.rz-grid .rz-grid-table tbody tr:hover {
    background: var(--bg-card-hover) !important;
}

.rz-textbox,
.rz-dropdown,
.rz-inputtext {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* --- Radzen Button Overrides --- */
.rz-button.rz-primary {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.rz-button.rz-primary:hover {
    background-color: var(--accent-primary-hover) !important;
    border-color: var(--accent-primary-hover) !important;
}

.rz-button.rz-info {
    background-color: var(--accent-secondary) !important;
    border-color: var(--accent-secondary) !important;
    color: #1a1a1a !important;
}

.rz-button.rz-info:hover {
    background-color: var(--accent-secondary-hover) !important;
    border-color: var(--accent-secondary-hover) !important;
}

.rz-button.rz-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.rz-button.rz-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #1a1a1a !important;
}

.rz-button.rz-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {

    /* DataGrid improvements */
    .rz-datatable {
        font-size: 0.85rem;
    }

    .rz-datatable td,
    .rz-datatable th {
        padding: 8px 6px !important;
    }

    /* Allow horizontal scroll for tables */
    .rz-datatable-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack buttons on mobile */
    .rz-button {
        min-width: auto !important;
    }

    /* Adjust content padding */
    .content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Hide button text on very small screens, show only icon */
    .mobile-icon-only .rz-button-text {
        display: none;
    }
}

@media (max-width: 480px) {
    .rz-datatable {
        font-size: 0.8rem;
    }

    .rz-datatable td,
    .rz-datatable th {
        padding: 6px 4px !important;
    }

    /* Theme toggle smaller on mobile */
    .theme-toggle {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        bottom: 16px;
        right: 16px;
    }
}

/* --- Page Header Action Bar --- */
.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .page-header-actions {
        padding: 10px 12px;
        gap: 8px;
    }
}

/* --- Danger Button Fix - White icon on red background --- */
.rz-button.rz-danger,
.rz-button-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: white !important;
}

.rz-button.rz-danger .rz-button-icon,
.rz-button-danger .rz-button-icon,
.rz-button.rz-danger .rzi,
.rz-button-danger .rzi {
    color: white !important;
}

.rz-button.rz-danger:hover,
.rz-button-danger:hover {
    background-color: hsl(0, 70%, 45%) !important;
    border-color: hsl(0, 70%, 45%) !important;
}

/* Icon button without text - ensure visibility */
.rz-button.rz-danger.rz-button-icon-only,
.rz-button-danger.rz-button-icon-only {
    background-color: var(--danger) !important;
}

/* --- Responsive DataGrid Tables --- */
.responsive-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.responsive-table-wrapper .rz-datatable {
    width: 100%;
}

/* Remove fixed widths on small screens */
@media (max-width: 992px) {
    .rz-datatable-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rz-datatable {
        min-width: 100%;
    }
}

/* --- Light button icon visibility fix --- */
.rz-button.rz-light .rz-button-icon,
.rz-button-light .rz-button-icon,
.rz-button.rz-light .rzi,
.rz-button-light .rzi {
    color: var(--text-primary) !important;
}

/* --- Game Configuration Dialog Change Summary --- */
.change-summary {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.change-item {
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.change-item .change-key,
.change-item .key {
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.change-item .change-values,
.change-item .values {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.change-item .old-value {
    color: var(--danger);
    text-decoration: line-through;
    background: hsla(0, 65%, 50%, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.change-item .arrow {
    color: var(--accent-primary);
    font-size: 1.2rem;
}

.change-item .new-value {
    color: var(--success);
    font-weight: 600;
    background: hsla(120, 45%, 40%, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- Neutral Button Variant (for Import/Export actions) --- */
.btn-neutral,
.rz-button.btn-neutral {
    background-color: hsl(220, 10%, 50%) !important;
    border-color: hsl(220, 10%, 50%) !important;
    color: white !important;
}

.btn-neutral:hover,
.rz-button.btn-neutral:hover {
    background-color: hsl(220, 10%, 40%) !important;
    border-color: hsl(220, 10%, 40%) !important;
}

.btn-neutral .rz-button-icon,
.rz-button.btn-neutral .rz-button-icon,
.btn-neutral .rzi,
.rz-button.btn-neutral .rzi {
    color: white !important;
}

/* --- Responsive Action Buttons Stack --- */
.action-buttons-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 768px) {
    .action-buttons-responsive {
        gap: 6px;
    }

    .action-buttons-responsive .rz-button {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}