/*
 * "GameServerHosting" theme overrides for the entire logged-in panel
 * (dashboard, servers, store, cart, login/registration, and the
 * EasyAdmin-based admin CRUD screens). Matches the public landing page's
 * design system: a single neon-green accent (#39FF9D, replacing the
 * earlier orange/blue "Electric Xtra" gradient), Chakra Petch + Space
 * Grotesk fonts, pill buttons, dark translucent cards, and a calm
 * grid + glow ambient background.
 *
 * "Info" contexts (alerts, icons, category placeholders) intentionally
 * keep a distinct blue accent rather than becoming green too — the
 * landing mockup never had to solve for 4-5 distinguishable semantic
 * colors (primary/success/danger/warning/info) the way an admin panel
 * does, so collapsing info into the same green as primary/success would
 * hurt usability without following from anything in the mockup itself.
 *
 * panel.css already ships a full light/dark design-token system
 * (--stripe-*, --bs-*, --primary-color/--secondary-color) split between
 * `:root` (light) and `.ea-dark-scheme` (dark). We redefine the same
 * tokens identically at both scopes so the panel always renders the one
 * dark theme regardless of a visitor's cached light/dark preference.
 * Anything panel.css hardcodes outside that token system (cards, login
 * split-screen, permission cards, payment gateway cards, etc.) gets an
 * explicit override alongside it, duplicating panel.css's own
 * `.ea-dark-scheme` treatment onto the plain selector wherever one
 * already exists.
 *
 * Deliberately NOT touched: the xterm terminal's ANSI text colors
 * (`terminal.colors` in server/tabs/console/console.html.twig) — those are
 * JS-driven and changing them risks making command output harder to read.
 * Only the terminal's surrounding chrome is restyled here.
 */

:root,
.ea-dark-scheme {
    --primary-color: #39FF9D;
    --primary-hover: #2de88d;
    --secondary-color: #39FF9D;
    --info-color: #00B2FF;
    --link-color: #39FF9D;
    --link-hover-color: #2de88d;

    --background-color: #0a0a10;
    --body-bg: #0a0a10;
    --content-bg: #0d0d14;

    --stripe-gray-50: rgba(255, 255, 255, 0.04);
    --stripe-gray-100: rgba(255, 255, 255, 0.06);
    --stripe-gray-200: rgba(255, 255, 255, 0.1);
    --stripe-gray-300: rgba(57, 255, 157, 0.28);
    --stripe-gray-400: rgba(57, 255, 157, 0.45);
    --stripe-gray-500: rgba(255, 255, 255, 0.6);
    --stripe-gray-600: rgba(255, 255, 255, 0.7);
    --stripe-gray-700: rgba(255, 255, 255, 0.85);
    --stripe-gray-800: rgba(255, 255, 255, 0.92);
    --stripe-gray-900: #ffffff;

    --stripe-blue-50: rgba(0, 178, 255, 0.08);
    --stripe-blue-100: rgba(0, 178, 255, 0.16);
    --stripe-blue-500: #00B2FF;
    --stripe-blue-600: #00B2FF;

    --stripe-green-50: rgba(46, 204, 113, 0.08);
    --stripe-green-100: rgba(46, 204, 113, 0.16);
    --stripe-green-500: #3ddc84;
    --stripe-green-600: #2ecc71;

    --stripe-shadow-sm: 0 0 0 1px rgba(57, 255, 157, 0.08);
    --stripe-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --stripe-shadow-md: 0 8px 28px rgba(57, 255, 157, 0.18);
    --stripe-shadow-lg: 0 12px 40px rgba(57, 255, 157, 0.25);

    --bs-border-color: rgba(57, 255, 157, 0.25);
    --bs-body-bg: #0a0a10;
    --bs-body-color: #f1f1f1;
    --bs-card-bg: rgba(255, 255, 255, 0.04);
    --bs-card-cap-bg: rgba(255, 255, 255, 0.05);
    --bs-heading-color: #ffffff;
    --bs-secondary-color: rgba(255, 255, 255, 0.6);

    --text-muted: rgba(255, 255, 255, 0.6);
    --text-color: #ffffff;
}

/* ---------------------------------------------------------------- */
/* Fonts                                                               */
/* ---------------------------------------------------------------- */
body,
.form-control, .form-select, .dropdown-item, .table, input, textarea, select, button, p {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.btn,
.main-header #header-logo .logo-custom,
.login-brand-title,
.card-header h5,
.dashboard-header h4 {
    font-family: 'Chakra Petch', 'Space Grotesk', sans-serif;
}

#main-menu .menu .menu-item-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}

/* ---------------------------------------------------------------- */
/* Ambient background                                                  */
/* ---------------------------------------------------------------- */
body {
    background-color: var(--body-bg) !important;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.6;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 12% 8%, rgba(57, 255, 157, 0.08) 0%, transparent 40%);
}

/* ---------------------------------------------------------------- */
/* Sidebar / main menu                                                 */
/* ---------------------------------------------------------------- */
.sidebar,
.ea-dark-scheme .sidebar {
    background: linear-gradient(180deg, #0a0a10 0%, #0d0d14 100%) !important;
    border-right: 1px solid var(--bs-border-color);
    box-shadow: none;
}

.main-header,
.ea-dark-scheme .main-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.main-header #header-logo .logo-custom,
.ea-dark-scheme .main-header #header-logo .logo-custom {
    color: #ffffff !important;
    text-shadow: 0 0 16px rgba(57, 255, 157, 0.4);
}

#main-menu .menu .menu-item-label,
#main-menu .menu .menu-icon,
.ea-dark-scheme #main-menu .menu .menu-item-label,
.ea-dark-scheme #main-menu .menu .menu-icon {
    color: rgba(255, 255, 255, 0.65) !important;
}

#main-menu .menu .menu-item:hover,
.ea-dark-scheme #main-menu .menu .menu-item:hover {
    background: rgba(57, 255, 157, 0.1) !important;
}

#main-menu .menu .menu-item:hover .menu-item-label,
#main-menu .menu .menu-item:hover .menu-icon,
.ea-dark-scheme #main-menu .menu .menu-item:hover .menu-item-label,
.ea-dark-scheme #main-menu .menu .menu-item:hover .menu-icon {
    color: #ffffff !important;
}

#main-menu .menu .menu-item.active,
.ea-dark-scheme #main-menu .menu .menu-item.active {
    background: rgba(57, 255, 157, 0.16) !important;
    border-left: 3px solid var(--primary-color);
    box-shadow: 0 0 16px rgba(57, 255, 157, 0.2);
}

#main-menu .menu .menu-item.active .menu-item-label,
#main-menu .menu .menu-item.active:not(.expanded) .menu-icon,
#main-menu .menu .menu-item.active:not(.expanded) a,
.ea-dark-scheme #main-menu .menu .menu-item.active .menu-item-label,
.ea-dark-scheme #main-menu .menu .menu-item.active:not(.expanded) .menu-icon {
    color: #ffffff !important;
}

.menu-item .icon.submenu-toggle-icon {
    color: rgba(255, 255, 255, 0.5) !important;
}

#main-menu .menu .menu-item.active .submenu-toggle-icon {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------- */
/* Topbar / search / footer                                           */
/* ---------------------------------------------------------------- */
.content-top,
.ea-dark-scheme .content-top {
    background: var(--body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.content-search-label input[type="search"],
.ea-dark-scheme .content-search-label input[type="search"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--bs-border-color) !important;
    color: #fff !important;
}

.content-search-label input[type="search"]:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(57, 255, 157, 0.18) !important;
}

.user-balance a,
.ea-dark-scheme .user-balance a {
    color: rgba(255, 255, 255, 0.75);
}

.user-balance a:hover,
.ea-dark-scheme .user-balance a:hover {
    color: #ffffff;
}

.global-footer,
.ea-dark-scheme .global-footer {
    background: var(--body-bg);
    border-top: 1px solid var(--bs-border-color);
}

.global-footer p,
.global-footer a {
    color: rgba(255, 255, 255, 0.55) !important;
}

.global-footer a:hover {
    color: var(--primary-color) !important;
}

/* ---------------------------------------------------------------- */
/* Cards & headers                                                     */
/* ---------------------------------------------------------------- */
.card,
.ea-dark-scheme .card,
.dashboard-header,
.ea-dark-scheme .dashboard-header {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.card:hover,
.ea-dark-scheme .card:hover {
    box-shadow: var(--stripe-shadow-md);
    border-color: rgba(57, 255, 157, 0.4) !important;
}

.card-header,
.ea-dark-scheme .card-header,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-primary,
.ea-dark-scheme .card-header.bg-success,
.ea-dark-scheme .card-header.bg-info,
.ea-dark-scheme .card-header.bg-primary {
    background: rgba(57, 255, 157, 0.08) !important;
    border-bottom: 1px solid var(--bs-border-color);
    color: #fff;
}

.card-header h5,
.ea-dark-scheme .card-header h5,
.card-header .text-white,
.ea-dark-scheme .card-header .text-white {
    color: #ffffff !important;
}

.card-header i {
    color: rgba(255, 255, 255, 0.8);
}

.dashboard-header h4,
.ea-dark-scheme .dashboard-header h4 {
    color: #ffffff !important;
}

.dashboard-header .text-muted,
.ea-dark-scheme .dashboard-header .text-muted {
    color: var(--text-muted) !important;
}

.text-dark,
.ea-dark-scheme .text-dark {
    color: #f1f1f1 !important;
}

.text-muted,
.ea-dark-scheme .text-muted {
    color: var(--text-muted) !important;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                             */
/* ---------------------------------------------------------------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
}

.btn-primary, .btn.primary,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn.primary:hover, .btn.primary:focus, .btn.primary:active {
    background: var(--primary-color) !important;
    border: none !important;
    color: #08130d !important;
    box-shadow: 0 0 18px rgba(57, 255, 157, 0.4) !important;
}

.btn-primary:hover, .btn.primary:hover {
    background: var(--primary-hover) !important;
    box-shadow: 0 0 26px rgba(57, 255, 157, 0.6) !important;
}

.btn-success, .btn.success,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn.success:hover, .btn.success:focus, .btn.success:active {
    background-color: var(--stripe-green-600) !important;
    border-color: var(--stripe-green-600) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(46, 204, 113, 0.35) !important;
}

.btn-danger, .btn.danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn.danger:hover, .btn.danger:focus, .btn.danger:active {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.35) !important;
}

.btn-warning, .btn.warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #1a1a1a !important;
}

.btn-secondary, .btn.secondary {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--bs-border-color) !important;
    color: #fff !important;
}

.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-secondary,
.ea-dark-scheme .btn-outline-primary, .ea-dark-scheme .btn-outline-success,
.ea-dark-scheme .btn-outline-info, .ea-dark-scheme .btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--bs-border-color) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.btn-outline-primary i, .btn-outline-success i, .btn-outline-info i, .btn-outline-secondary i {
    color: rgba(255, 255, 255, 0.85);
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: rgba(57, 255, 157, 0.12) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
    background-color: rgba(46, 204, 113, 0.12) !important;
    border-color: var(--stripe-green-600) !important;
    color: var(--stripe-green-500) !important;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
    background-color: rgba(0, 178, 255, 0.12) !important;
    border-color: var(--info-color) !important;
    color: var(--info-color) !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

.btn:disabled, .btn.disabled {
    opacity: 0.45;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------- */
/* Forms                                                               */
/* ---------------------------------------------------------------- */
.form-control, .form-select,
.ea-dark-scheme .form-control, .ea-dark-scheme .form-select,
.ea-dark-scheme input[type="text"], .ea-dark-scheme input[type="email"],
.ea-dark-scheme input[type="password"], .ea-dark-scheme textarea {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--bs-border-color) !important;
    color: #f1f1f1 !important;
}

.form-control:focus, .form-select:focus,
.ea-dark-scheme .form-control:focus, .ea-dark-scheme .form-select:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(57, 255, 157, 0.18) !important;
}

::placeholder,
.ea-dark-scheme .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.form-check-input:focus {
    border-color: var(--primary-color) !important;
}

/* ---------------------------------------------------------------- */
/* Tables / badges / pagination / dropdowns / modals / alerts         */
/* ---------------------------------------------------------------- */
.table, .ea-dark-scheme .table {
    color: #f1f1f1;
}

.table thead th, .ea-dark-scheme .table thead th {
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid var(--bs-border-color);
}

.table tbody tr, .ea-dark-scheme .table tbody td, .ea-dark-scheme .table tbody th {
    border-color: var(--bs-border-color);
}

.table tbody tr:hover, .ea-dark-scheme .table-hover tbody tr:hover {
    background-color: rgba(57, 255, 157, 0.06) !important;
}

.badge, .ea-dark-scheme .badge {
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
}

.badge.bg-secondary, .ea-dark-scheme .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.dropdown-menu, .ea-dark-scheme .dropdown-menu {
    background-color: #111116 !important;
    border-color: var(--bs-border-color) !important;
    box-shadow: var(--stripe-shadow-lg);
}

.dropdown-item, .ea-dark-scheme .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dropdown-item:hover, .dropdown-item:focus,
.ea-dark-scheme .dropdown-item:hover, .ea-dark-scheme .dropdown-item:focus {
    background-color: rgba(57, 255, 157, 0.15) !important;
    color: #fff !important;
}

.modal-content {
    background-color: #111116;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    box-shadow: var(--stripe-shadow-lg);
}

.modal-header, .modal-footer {
    border-color: var(--bs-border-color);
}

.alert, .ea-dark-scheme .alert {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 12px !important;
}

.alert-info, .ea-dark-scheme .alert-info {
    background-color: rgba(0, 178, 255, 0.1) !important;
    border-color: var(--info-color) !important;
    color: #7fd6ff !important;
}

.alert-success, .ea-dark-scheme .alert-success {
    background-color: rgba(46, 204, 113, 0.1) !important;
    border-color: var(--stripe-green-600) !important;
    color: var(--stripe-green-500) !important;
}

.alert-warning, .ea-dark-scheme .alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

.alert-danger, .ea-dark-scheme .alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}

.pagination .page-link, .page-link {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--bs-border-color);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 999px !important;
}

.pagination .page-link:hover, .page-link:hover {
    background-color: rgba(57, 255, 157, 0.12);
    border-color: var(--primary-color);
    color: #fff;
}

.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #08130d !important;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.75;
}

.btn-close:hover {
    opacity: 1;
}

.bg-opacity-10 {
    background-color: transparent !important;
    opacity: 1 !important;
}

i.text-primary, .ea-dark-scheme i.text-primary { color: var(--primary-color) !important; }
i.text-info, .ea-dark-scheme i.text-info { color: var(--info-color) !important; }
i.text-success, .ea-dark-scheme i.text-success { color: var(--stripe-green-500) !important; }
i.text-warning, .ea-dark-scheme i.text-warning { color: #f59e0b !important; }
i.text-danger, .ea-dark-scheme i.text-danger { color: #ef4444 !important; }
i.text-secondary, .ea-dark-scheme i.text-secondary { color: rgba(255, 255, 255, 0.6) !important; }

a:not(.btn), .ea-dark-scheme a:not(.btn) {
    color: var(--primary-color);
}

a:not(.btn):hover, .ea-dark-scheme a:not(.btn):hover {
    color: var(--primary-hover);
}

/* ---------------------------------------------------------------- */
/* Login / registration / reset-password split screen                 */
/* ---------------------------------------------------------------- */
.page-login-split,
.ea-dark-scheme.page-login-split {
    background: #0a0a10 !important;
}

.login-split-left {
    background: linear-gradient(135deg, #0a0a10 0%, #0a140f 100%);
    position: relative;
    overflow: hidden;
}

.login-split-left::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 30% 30%, rgba(57, 255, 157, 0.22) 0%, transparent 55%);
}

.login-brand-title, .login-brand-subtitle, .login-feature-item {
    color: #ffffff;
}

.login-brand-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.login-feature-item i {
    background: rgba(255, 255, 255, 0.12);
    color: var(--primary-color);
}

.login-split-right,
.ea-dark-scheme.page-login-split .login-split-right {
    background: #0a0a10 !important;
}

.login-form-wrapper,
.ea-dark-scheme.page-login-split .login-form-wrapper {
    background: #0a0a10 !important;
}

.login-form-wrapper h1, .login-form-wrapper h2, .login-form-wrapper h3, .login-form-wrapper h4 {
    color: #ffffff;
    font-family: 'Chakra Petch', 'Space Grotesk', sans-serif;
}

.page-login-split .text-dark,
.ea-dark-scheme.page-login-split .text-dark {
    color: #ffffff !important;
}

.page-login-split .text-muted,
.ea-dark-scheme.page-login-split .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.page-login-split .form-control,
.ea-dark-scheme.page-login-split .form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--bs-border-color) !important;
    color: #f1f1f1 !important;
}

.page-login-split .form-control:focus,
.ea-dark-scheme.page-login-split .form-control:focus {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--primary-color) !important;
    color: #f1f1f1 !important;
}

.page-login-split .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* ---------------------------------------------------------------- */
/* Payment gateway cards (checkout)                                    */
/* ---------------------------------------------------------------- */
.payment-gateway-card,
.ea-dark-scheme .payment-gateway-card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 2px solid var(--bs-border-color) !important;
    border-radius: 14px !important;
}

.payment-gateway-card:hover,
.ea-dark-scheme .payment-gateway-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 18px rgba(57, 255, 157, 0.25);
}

.payment-gateway-input:checked + .payment-gateway-card,
.ea-dark-scheme .payment-gateway-input:checked + .payment-gateway-card {
    border-color: var(--primary-color) !important;
    background-color: rgba(57, 255, 157, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(57, 255, 157, 0.18);
}

.payment-gateway-input:checked + .payment-gateway-card::after {
    color: var(--primary-color);
}

.payment-gateway-card .card-title {
    color: #fff;
}

/* ---------------------------------------------------------------- */
/* Permission summary cards (admin: roles/users)                      */
/* ---------------------------------------------------------------- */
.permission-roles-list .role-card,
.permission-section-card,
.permissions-summary .bg-light {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--bs-border-color) !important;
}

.permission-section-card .section-header {
    background: rgba(57, 255, 157, 0.07) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.permission-section-card .section-header h6,
.permission-name, .permission-name strong,
.permissions-summary h6 {
    color: #ffffff !important;
}

.permission-item {
    border-bottom-color: var(--bs-border-color) !important;
}

.permission-item:hover {
    background-color: rgba(57, 255, 157, 0.06) !important;
}

.permission-meta, .permission-meta .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}

.permission-meta code {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--bs-border-color);
}

/* ---------------------------------------------------------------- */
/* Store placeholders (already token-driven, tuned for contrast)      */
/* Category placeholders keep the distinct info-blue accent for variety */
/* ---------------------------------------------------------------- */
.store-product-placeholder {
    background: linear-gradient(135deg, rgba(57, 255, 157, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.store-category-placeholder {
    background: linear-gradient(135deg, rgba(0, 178, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.store-product-icon {
    color: rgba(255, 255, 255, 0.4);
}

.store-category-icon {
    color: var(--info-color);
}

/* ---------------------------------------------------------------- */
/* Server console chrome (xterm ANSI text colors are left untouched)  */
/* ---------------------------------------------------------------- */
#terminal .xterm-viewport::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

#terminal .xterm-viewport::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 157, 0.3);
}

#terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(57, 255, 157, 0.5);
}

#terminal .xterm-viewport {
    scrollbar-color: rgba(57, 255, 157, 0.3) rgba(255, 255, 255, 0.04);
}

#command {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--bs-border-color) !important;
    color: #f1f1f1 !important;
}

#command:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(57, 255, 157, 0.18) !important;
}