/* Global sci-fi theme for all app pages */

:root {
    --mx-purple: #bc13fe;
    --mx-purple-dark: #4b0082;
    --mx-purple-mid: #8a2be2;
    --mx-purple-soft: #c77dff;
    --mx-green: #32cd32;
    --mx-bg-dark: rgba(8, 2, 22, 0.96);
    --mx-bg-card: rgba(18, 4, 42, 0.92);
    --mx-border: rgba(188, 19, 254, 0.55);
    --mx-glow: rgba(188, 19, 254, 0.35);
}

/* App shell background */
.app-shell {
    position: relative;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #0a001a url('/assets/images/auth/login-bg.gif') center center / cover no-repeat;
    pointer-events: none;
}

.app-shell__overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(6, 0, 18, 0.45) 0%, rgba(8, 2, 22, 0.62) 50%, rgba(5, 0, 15, 0.78) 100%);
    pointer-events: none;
}

.app-shell__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.cs-body {
    background: transparent !important;
    overflow-x: hidden;
    max-width: 100%;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

/* Standard page wrapper */
.app-shell__page,
.app-shell__page .app-page,
.app-shell__page .container {
    width: 100%;
    max-width: 480px;
}

.app-page {
    position: relative;
    z-index: 1;
}

.app-page .panel {
    background: linear-gradient(180deg, var(--mx-bg-card) 0%, var(--mx-bg-dark) 100%) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: 12px !important;
    box-shadow:
        0 0 20px var(--mx-glow),
        inset 0 0 24px rgba(138, 43, 226, 0.06) !important;
    color: rgba(255, 255, 255, 0.92);
}

.app-page .panel h3,
.app-page .panel h4,
.app-page .panel h5,
.app-page .panel label {
    color: rgba(255, 255, 255, 0.92);
}

.app-page .form-input,
.app-page .form-input-sm,
.app-page .form-select,
.app-page .form-textarea {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid var(--mx-border) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.app-page .form-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.app-page .form-input:focus,
.app-page .form-input-sm:focus {
    border-color: #d946ff !important;
    box-shadow: 0 0 10px rgba(188, 19, 254, 0.25) !important;
}

.app-page .btn-primary,
.app-page .btn-success,
.app-page .btn-info,
.app-page .btn-dark,
.app-page .btn-outline-info {
    border-radius: 8px !important;
}

.app-page .table-hover {
    color: rgba(255, 255, 255, 0.9);
}

.app-page .table-hover thead tr {
    background: rgba(75, 0, 130, 0.45) !important;
    color: #f3e8ff !important;
}

.app-page .table-hover tbody tr {
    border-color: rgba(188, 19, 254, 0.2) !important;
}

.app-page .table-hover tbody tr:hover {
    background: rgba(138, 43, 226, 0.15) !important;
}

.app-page .badge-outline-success,
.app-page .badge-outline-warning,
.app-page .badge-outline-danger,
.app-page .badge-outline-dark {
    border-radius: 6px;
}

/* Breadcrumbs */
.app-page ol.flex.cs-color > li,
.app-page ol.flex.text-primary > li {
    background: rgba(18, 4, 42, 0.8) !important;
}

.app-page ol.flex.cs-color > li a,
.app-page ol.flex.text-primary > li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.app-page ol.flex.cs-color > li a:hover,
.app-page ol.flex.text-primary > li a:hover {
    color: var(--mx-purple-soft) !important;
}

.app-page ol.flex.cs-color > li a::before,
.app-page ol.flex.text-primary > li a::before {
    border-left-color: rgba(18, 4, 42, 0.8) !important;
}

.app-page ol.flex.cs-color > li a.cs-navh::before,
.app-page ol.flex.cs-color > li a.bg-primary::before {
    border-left-color: rgba(75, 0, 130, 0.9) !important;
}

.app-page ol.flex.cs-color .cs-navh,
.app-page ol.flex.text-primary .bg-primary {
    background: linear-gradient(90deg, #4b0082 0%, #8a2be2 55%, #bc13fe 100%) !important;
    color: #fff !important;
}

/* Wallet strips */
.app-page .bg-\[\#7367f0\] {
    background: linear-gradient(90deg, #4b0082 0%, #8a2be2 100%) !important;
}

.app-page .bg-\[\#28c76f\] {
    background: linear-gradient(90deg, #006400 0%, #32cd32 100%) !important;
}

.app-page .bg-\[\#8080808f\] {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid var(--mx-border);
}

.app-page .bg-\[\#008000\] {
    background: linear-gradient(90deg, #006400 0%, #228b22 100%) !important;
}

/* Modals */
.app-modal__panel,
.home-modal__panel,
.app-footer__modal-panel {
    position: relative;
    width: 100%;
    max-width: 32rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(18, 4, 42, 0.96) 0%, rgba(8, 2, 22, 0.98) 100%);
    border: 2px solid rgba(188, 19, 254, 0.75);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(188, 19, 254, 0.35);
    color: #fff;
}

.panel.cs-card-bg.app-modal__panel,
.panel.border-0.app-modal__panel {
    background: linear-gradient(180deg, rgba(18, 4, 42, 0.96) 0%, rgba(8, 2, 22, 0.98) 100%) !important;
    border: 2px solid rgba(188, 19, 254, 0.75) !important;
}

.app-modal__header {
    padding: 0.85rem 3rem 0.85rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e9d5ff;
    border-bottom: 1px solid rgba(188, 19, 254, 0.35);
}

.app-modal__body {
    padding: 1rem 1.25rem 1.25rem;
}

.app-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.app-modal__close:hover {
    color: #fff;
}

.app-modal__field label {
    display: block;
    margin-bottom: 0.4rem;
    color: #fff;
    font-weight: 600;
}

/* Home page inside app shell */
.home-page--embedded .home-page__bg,
.home-page--embedded .home-page__overlay {
    display: none;
}

.home-page--embedded {
    overflow-x: hidden;
}

/* Popper dropdown menus */
.popper ul,
.dropdown ul {
    background: linear-gradient(180deg, rgba(18, 4, 42, 0.98) 0%, rgba(8, 2, 22, 0.99) 100%) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 16px var(--mx-glow) !important;
}

.popper ul li a,
.dropdown ul li a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.popper ul li a:hover,
.dropdown ul li a:hover {
    background: rgba(138, 43, 226, 0.25) !important;
    color: #fff !important;
}

/* Screen loader */
.screen_loader {
    background: rgba(8, 2, 22, 0.95) !important;
}

.screen_loader svg path {
    fill: #d946ff !important;
}

/* Global dialog modals (lotto, list_lotto, etc.) */
.panel.border-0 {
    background: linear-gradient(180deg, rgba(18, 4, 42, 0.96) 0%, rgba(8, 2, 22, 0.98) 100%) !important;
    border: 2px solid rgba(188, 19, 254, 0.75) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 30px rgba(188, 19, 254, 0.35) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.panel.border-0 .bg-\[\#fbfbfb\],
.panel.border-0 .dark\:bg-\[\#121c2c\] {
    background: transparent !important;
    color: #e9d5ff !important;
    border-bottom: 1px solid rgba(188, 19, 254, 0.35);
}

.panel.border-0 .text-\[\#3b3f5c\] {
    color: #e9d5ff !important;
}

.panel.border-0 .border-black,
.panel.border-0 .dark\:border-\[\#1b2e4b\] {
    border-color: rgba(188, 19, 254, 0.35) !important;
}

.panel.border-0 .btn.text-black,
.panel.border-0 .dark\:text-white-dark {
    color: rgba(255, 255, 255, 0.9) !important;
}

.panel.border-0 button.text-gray-400 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.panel.border-0 button.text-gray-400:hover {
    color: #fff !important;
}

.panel.border-0 .table-striped {
    color: rgba(255, 255, 255, 0.9);
}

.panel.border-0 .table-striped thead tr {
    background: rgba(75, 0, 130, 0.45) !important;
    color: #f3e8ff !important;
}

.panel.border-0 .table-striped tbody tr {
    border-color: rgba(188, 19, 254, 0.2) !important;
}

.panel.border-0 .table-striped tbody tr:hover {
    background: rgba(138, 43, 226, 0.15) !important;
}

/* Bank page cards */
.app-page .bg-\[\#ebedf2\],
.app-page .dark\:bg-\[\#1b2e4b\] {
    background: rgba(18, 4, 42, 0.85) !important;
    border: 1px solid rgba(188, 19, 254, 0.35);
}

.app-page .text-\[\#3b3f5c\] {
    color: rgba(255, 255, 255, 0.9) !important;
}

.app-page .border-\[\#e0e6ed\],
.app-page .dark\:border-\[\#17263c\] {
    border-color: rgba(188, 19, 254, 0.35) !important;
}