/* =========================================================
   LEFT METAL THEME
   Industrial steel / graphite / yellow
   ========================================================= */

:root {
    color-scheme: dark;

    --primary: #f5c518 !important;
    --primary-color: #f5c518 !important;
    --primary-dark: #c99700 !important;
    --primary-light: #ffdf52 !important;

    --secondary: #727982 !important;
    --secondary-color: #727982 !important;

    --accent: #ffd83d !important;
    --accent-color: #ffd83d !important;

    --background: #0a0c0f !important;
    --background-color: #0a0c0f !important;
    --bg: #0a0c0f !important;
    --bg-dark: #07090b !important;
    --bg-light: #171b20 !important;

    --surface: #161a1f !important;
    --surface-color: #161a1f !important;
    --surface-light: #20252b !important;
    --surface-hover: #282e35 !important;

    --card-bg: #171b20 !important;
    --card-background: #171b20 !important;

    --border: #444b54 !important;
    --border-color: #444b54 !important;
    --border-light: #626a74 !important;

    --text: #f3f5f7 !important;
    --text-color: #f3f5f7 !important;
    --text-light: #ffffff !important;
    --text-muted: #a2a9b1 !important;
    --muted: #a2a9b1 !important;

    --success: #38d97b !important;
    --danger: #ff5c5c !important;
    --warning: #f5c518 !important;
    --info: #9aa3ad !important;

    --shadow: 0 12px 35px rgba(0, 0, 0, 0.48) !important;
    --metal-shadow:
        0 16px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

    --radius: 12px !important;
    --radius-btn: 9px !important;
    --transition: all 0.2s ease !important;
}

/* Base */
html {
    background: #080a0c !important;
    color-scheme: dark !important;
}

body {
    min-height: 100vh !important;
    margin: 0;
    color: var(--text) !important;
    background-color: #0a0c0f !important;
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.018) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.018) 50%,
            rgba(255, 255, 255, 0.018) 75%,
            transparent 75%,
            transparent
        ),
        radial-gradient(
            circle at top right,
            rgba(245, 197, 24, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #11151a 0%,
            #090b0e 48%,
            #050607 100%
        ) !important;
    background-size: 16px 16px, auto, auto !important;
    background-attachment: fixed !important;
    font-family:
        Inter,
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif !important;
}

/* Selection */
::selection {
    color: #080a0c !important;
    background: #f5c518 !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #f7f8fa !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

p,
span,
label,
small,
li,
td,
th {
    border-color: var(--border-color);
}

a {
    color: #f5c518 !important;
    text-decoration-color: rgba(245, 197, 24, 0.45) !important;
}

a:hover {
    color: #ffdf52 !important;
}

/* Header / navigation */
header,
nav,
.navbar,
.topbar,
.top-bar,
.main-header,
.site-header,
.admin-header,
.sidebar,
.side-bar,
.admin-sidebar,
.bottom-nav,
.mobile-nav {
    color: var(--text) !important;
    background:
        linear-gradient(
            180deg,
            rgba(42, 47, 54, 0.98),
            rgba(14, 17, 21, 0.98)
        ) !important;
    border-color: #555d66 !important;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.50),
        inset 0 -1px 0 rgba(245, 197, 24, 0.22) !important;
    backdrop-filter: blur(18px);
}

nav a,
.navbar a,
.sidebar a,
.bottom-nav a,
.mobile-nav a {
    color: #d7dbe0 !important;
}

nav a:hover,
.navbar a:hover,
.sidebar a:hover,
.bottom-nav a:hover,
.mobile-nav a:hover,
nav a.active,
.navbar a.active,
.sidebar a.active,
.bottom-nav a.active,
.mobile-nav a.active {
    color: #f5c518 !important;
    background: rgba(245, 197, 24, 0.09) !important;
    border-color: rgba(245, 197, 24, 0.45) !important;
}

/* Main surfaces */
.card,
.product-card,
.game-card,
.category-card,
.wallet-card,
.order-card,
.stat-card,
.stats-card,
.dashboard-card,
.auth-card,
.login-card,
.register-card,
.form-card,
.content-card,
.info-card,
.setting-card,
.settings-card,
.section,
.panel,
.box,
.widget,
.table-container,
.form-container,
.details-box,
.balance-card {
    color: var(--text) !important;
    background:
        linear-gradient(
            145deg,
            rgba(41, 46, 53, 0.96),
            rgba(17, 20, 24, 0.98) 55%,
            rgba(10, 12, 15, 0.98)
        ) !important;
    border: 1px solid #474f58 !important;
    border-radius: 12px !important;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.8) !important;
}

.card:hover,
.product-card:hover,
.game-card:hover,
.category-card:hover,
.order-card:hover,
.dashboard-card:hover {
    border-color: rgba(245, 197, 24, 0.78) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(245, 197, 24, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Section headings */
.section-title,
.page-title,
.card-title,
.modal-title,
h1,
h2 {
    position: relative;
}

.section-title::after,
.page-title::after {
    content: "";
    display: block;
    width: 58px;
    height: 3px;
    margin-top: 8px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            #f5c518,
            #ffdf52,
            transparent
        ) !important;
}

.section-title i,
.page-title i,
.card-title i,
h1 i,
h2 i,
h3 i {
    color: #f5c518 !important;
}

/* Buttons */
button,
.btn,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    color: #eef1f4 !important;
    background:
        linear-gradient(
            180deg,
            #343a42,
            #1a1e23
        ) !important;
    border: 1px solid #59616b !important;
    border-radius: var(--radius-btn) !important;
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    font-weight: 750 !important;
    transition: var(--transition) !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    color: #0a0c0f !important;
    background:
        linear-gradient(
            180deg,
            #ffdf52,
            #e8b700
        ) !important;
    border-color: #ffe36c !important;
    transform: translateY(-1px);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.48),
        0 0 18px rgba(245, 197, 24, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

.btn-primary,
.button-primary,
.primary-btn,
.primary-button,
button.primary,
input[type="submit"] {
    color: #090b0d !important;
    background:
        linear-gradient(
            180deg,
            #ffdf52,
            #f5c518 50%,
            #c99700
        ) !important;
    border-color: #ffe476 !important;
    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(245, 197, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary-btn:hover,
.primary-button:hover,
button.primary:hover {
    color: #000000 !important;
    background:
        linear-gradient(
            180deg,
            #fff08c,
            #ffd229
        ) !important;
}

.btn-danger,
.danger-btn,
.delete-btn {
    color: #ffffff !important;
    background:
        linear-gradient(
            180deg,
            #9d3434,
            #5e1818
        ) !important;
    border-color: #d75c5c !important;
}

/* Inputs */
input,
select,
textarea {
    color: #f3f5f7 !important;
    background:
        linear-gradient(
            180deg,
            #14181d,
            #0d1013
        ) !important;
    border: 1px solid #535b65 !important;
    border-radius: 9px !important;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.54),
        0 1px 0 rgba(255, 255, 255, 0.04) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #777f88 !important;
    opacity: 1 !important;
}

input:focus,
select:focus,
textarea:focus {
    color: #ffffff !important;
    border-color: #f5c518 !important;
    box-shadow:
        0 0 0 3px rgba(245, 197, 24, 0.12),
        inset 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #f5c518 !important;
}

option {
    color: #ffffff !important;
    background: #171b20 !important;
}

/* Tables */
table {
    color: var(--text) !important;
    background: #111419 !important;
    border-color: #454c55 !important;
}

thead,
thead tr,
table th {
    color: #0a0c0f !important;
    background:
        linear-gradient(
            180deg,
            #ffdf52,
            #d8a900
        ) !important;
    border-color: #7e680e !important;
    font-weight: 850 !important;
}

tbody tr,
table td {
    color: #e3e6ea !important;
    background: rgba(23, 27, 32, 0.94) !important;
    border-color: #373e46 !important;
}

tbody tr:nth-child(even) td {
    background: rgba(31, 36, 42, 0.94) !important;
}

tbody tr:hover td {
    background: rgba(245, 197, 24, 0.08) !important;
}

/* Modal */
.modal-overlay,
.overlay,
.dialog-overlay {
    background: rgba(0, 0, 0, 0.84) !important;
    backdrop-filter: blur(7px) !important;
}

.modal,
.modal-content,
.dialog,
.popup,
.popup-content {
    color: var(--text) !important;
    background:
        linear-gradient(
            145deg,
            #2b3037,
            #14181d 50%,
            #090b0e
        ) !important;
    border: 1px solid #636b75 !important;
    border-top: 3px solid #f5c518 !important;
    border-radius: 13px !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Notifications */
.alert,
.notice,
.notification,
.message,
.info-box,
.warning-box,
.error-box,
.success-box {
    color: #edf0f3 !important;
    background:
        linear-gradient(
            135deg,
            rgba(54, 60, 68, 0.96),
            rgba(19, 22, 27, 0.98)
        ) !important;
    border: 1px solid #59616a !important;
    border-inline-start: 4px solid #f5c518 !important;
    border-radius: 9px !important;
}

.alert-success,
.success,
.status-completed,
.status-success,
.completed {
    color: #7bf0a7 !important;
    border-color: rgba(56, 217, 123, 0.55) !important;
}

.alert-danger,
.alert-error,
.error,
.danger,
.status-failed,
.status-rejected,
.failed {
    color: #ff8585 !important;
    border-color: rgba(255, 92, 92, 0.58) !important;
}

.alert-warning,
.warning,
.status-pending,
.status-processing,
.status-waiting,
.pending,
.processing {
    color: #ffe06a !important;
    border-color: rgba(245, 197, 24, 0.60) !important;
}

/* Badges */
.badge,
.tag,
.chip,
.status {
    color: #eceff2 !important;
    background:
        linear-gradient(
            180deg,
            #3a4149,
            #21262c
        ) !important;
    border: 1px solid #59616a !important;
    border-radius: 999px !important;
}

.badge-primary,
.tag-primary {
    color: #090b0d !important;
    background: #f5c518 !important;
    border-color: #ffdf52 !important;
}

/* Pagination */
.pagination a,
.pagination button,
.page-link {
    color: #e4e7ea !important;
    background: #1d2228 !important;
    border-color: #505861 !important;
}

.pagination .active,
.page-item.active .page-link {
    color: #090b0d !important;
    background: #f5c518 !important;
    border-color: #ffe36d !important;
}

/* Lists and separators */
hr {
    height: 1px !important;
    border: 0 !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            #59616a,
            rgba(245, 197, 24, 0.62),
            #59616a,
            transparent
        ) !important;
}

.empty-state,
.no-data,
.loading {
    color: #a8afb7 !important;
    background: rgba(18, 21, 25, 0.74) !important;
    border-color: #464d55 !important;
}

/* Footer */
footer,
.footer,
.site-footer {
    color: #999fa7 !important;
    background:
        linear-gradient(
            180deg,
            #15191e,
            #080a0c
        ) !important;
    border-color: #404750 !important;
}

/* Images and logos */
.logo,
.brand,
.brand-name,
.site-name {
    color: #f5c518 !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

/* Progress */
progress {
    accent-color: #f5c518 !important;
}

.progress,
.progress-bar-container {
    background: #0b0e11 !important;
    border-color: #444c55 !important;
}

.progress-bar {
    background:
        linear-gradient(
            90deg,
            #bf9200,
            #f5c518,
            #ffe66e
        ) !important;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #f5c518 #111419;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #101318;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #f5c518,
            #967100
        );
    border: 2px solid #101318;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffdc43;
}

/* Disabled */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.52 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
}

/* Mobile */
@media (max-width: 768px) {
    body {
        background-size: 12px 12px, auto, auto !important;
    }

    .card,
    .product-card,
    .game-card,
    .category-card,
    .order-card,
    .section,
    .panel {
        border-radius: 10px !important;
    }

    button,
    .btn,
    input,
    select,
    textarea {
        min-height: 44px;
    }
}