:root {
    --casino-bg: #0f0f1a;
    --casino-surface: #1a1a2e;
    --casino-surface-light: #232340;
    --casino-accent: #e6c84c;
    --casino-accent-hover: #f0d96b;
    --casino-text: #e8e8f0;
    --casino-text-muted: #8888a0;
    --casino-success: #4caf50;
    --casino-danger: #f44336;
}

html, body {
    font-family: 'Inter', 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: var(--casino-bg);
    color: var(--casino-text);
}

/* Header */
.rz-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border-bottom: 1px solid rgba(230, 200, 76, 0.2) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

.rz-header .rz-text-h6 {
    color: var(--casino-accent) !important;
    letter-spacing: 1px;
}

/* Sidebar */
.rz-sidebar {
    background: var(--casino-surface) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.rz-panel-menu .rz-navigation-item-text {
    color: var(--casino-text) !important;
    font-weight: 500;
}

.rz-panel-menu .rz-navigation-item-icon {
    color: var(--casino-accent) !important;
}

.rz-panel-menu .rz-navigation-item:hover {
    background: var(--casino-surface-light) !important;
}

.rz-panel-menu .rz-navigation-item-active,
.rz-panel-menu .rz-navigation-item.rz-state-active {
    background: rgba(230, 200, 76, 0.12) !important;
    border-left: 3px solid var(--casino-accent) !important;
}

/* Body */
.rz-body {
    background: var(--casino-bg) !important;
}

/* Cards */
.rz-card {
    background: var(--casino-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Buttons */
.rz-button.rz-primary {
    background: var(--casino-accent) !important;
    color: #111 !important;
    font-weight: 600;
    border: none !important;
}

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

.rz-button.rz-light {
    background: var(--casino-surface-light) !important;
    color: var(--casino-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* DataGrid */
.rz-datatable {
    background: var(--casino-surface) !important;
}

.rz-datatable .rz-datatable-thead > tr > th {
    background: var(--casino-surface-light) !important;
    color: var(--casino-accent) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-weight: 600;
}

.rz-datatable .rz-datatable-tbody > tr > td {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td {
    background: var(--casino-surface-light) !important;
}

/* Forms */
.rz-textbox, .rz-dropdown, .rz-spinner, .rz-password {
    background: var(--casino-surface-light) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--casino-text) !important;
}

.rz-form-field label, .rz-form-field .rz-form-field-label {
    color: var(--casino-text-muted) !important;
}

/* Badge */
.rz-badge.rz-success {
    background: var(--casino-success) !important;
}

.rz-badge.rz-warning {
    background: var(--casino-accent) !important;
    color: #111 !important;
}

/* Sidebar toggle button */
button.rz-sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--casino-text);
    display: flex;
    align-items: center;
}
button.rz-sidebar-toggle:hover {
    color: var(--casino-accent);
}

/* Sidebar transition */
.rz-sidebar {
    transition: width 0.2s ease, min-width 0.2s ease;
}

/* Alert */
.rz-alert {
    border-radius: 8px !important;
}

/* Progress */
.rz-progressbar-circular-value {
    color: var(--casino-accent) !important;
}

/* ── Mobile responsive ── */

@media (max-width: 768px) {
    /* Sidebar: overlay mode instead of push */
    .rz-sidebar {
        position: fixed !important;
        top: 52px !important;
        left: 0;
        bottom: 0;
        z-index: 1000;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
    }

    /* Body takes full width when sidebar is overlay */
    .rz-body {
        margin-left: 0 !important;
    }

    /* Hide title text on small screens */
    .casino-title {
        display: none;
    }

    /* Tighter padding on mobile */
    .rz-body > .rz-p-4 {
        padding: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .rz-header .rz-stack {
        gap: 4px;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--casino-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--casino-surface-light);
    border-radius: 4px;
}