/* Shared light visual language for every backend page. */
:root {
    --theme-ink: #354840;
    --theme-muted: #8d9c93;
    --theme-bg: #f8fbf9;
    --theme-surface: #ffffff;
    --theme-soft: #f3faf4;
    --theme-line: #e7efe9;
    --theme-primary: #82b697;
    --theme-primary-dark: #6d9f82;
    --theme-warning: #e9b84d;
    --theme-danger: #e29a87;
    --theme-shadow: 0 8px 24px rgba(54, 82, 64, .055);
}

html,
body,
.wrapper,
.content-wrapper,
.right-side {
    background: var(--theme-bg) !important;
    color: var(--theme-ink);
}

body {
    font-family: "Lato", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--theme-primary-dark);
}

a:hover,
a:focus {
    color: var(--theme-ink);
}

.main-header,
.main-header .navbar,
.main-header .logo {
    background: var(--theme-surface) !important;
    color: var(--theme-ink) !important;
}

.main-header {
    border-bottom: 1px solid var(--theme-line);
    box-shadow: 0 2px 12px rgba(54, 82, 64, .045);
}

.main-header .logo {
    border-right: 1px solid var(--theme-line);
    font-weight: 700;
    letter-spacing: -.02em;
}

.main-header .logo:hover {
    background: var(--theme-soft) !important;
}

#firstnav .sidebar-toggle,
#firstnav .navbar-custom-menu > .nav > li > a,
#firstnav .nav-tabs > li > a {
    color: var(--theme-ink) !important;
    border-color: transparent !important;
    transition: color .2s ease, background-color .2s ease;
}

#firstnav .sidebar-toggle:hover,
#firstnav .navbar-custom-menu > .nav > li > a:hover,
#firstnav .nav-tabs > li > a:hover,
#firstnav .nav-tabs > li.active > a {
    color: var(--theme-primary-dark) !important;
    background: var(--theme-soft) !important;
}

#firstnav .nav-tabs > li.active > a {
    border-bottom-color: var(--theme-primary) !important;
}

.main-header .navbar-custom-menu .dropdown-menu,
.main-header .user-menu .dropdown-menu,
.dropdown-menu {
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    background: var(--theme-surface);
    box-shadow: 0 14px 30px rgba(54, 82, 64, .1);
}

.main-header .user-menu .user-header {
    background: var(--theme-soft) !important;
    color: var(--theme-ink) !important;
}

.main-header .user-menu .user-header p,
.main-header .user-menu .user-header small {
    color: var(--theme-ink) !important;
}

.main-header .user-menu .user-footer {
    border-top: 1px solid var(--theme-line);
    background: #fbfdfb;
}

@media (min-width: 768px) {
    .main-header .user-menu .user-body {
        display: none;
    }
}

.main-sidebar,
.left-side {
    background: #fbfdfb !important;
    border-right: 1px solid var(--theme-line);
    box-shadow: 3px 0 14px rgba(54, 82, 64, .025);
}

.sidebar,
.user-panel {
    background: transparent !important;
}

.user-panel {
    margin: 0 12px;
    padding: 17px 5px 16px;
    border-bottom: 1px solid var(--theme-line);
}

.user-panel > .info,
.user-panel > .info > p {
    color: var(--theme-ink) !important;
}

.user-panel > .info > .text-success {
    color: var(--theme-primary) !important;
}

.sidebar-form {
    margin: 14px 12px;
}

.sidebar-form .form-control,
.sidebar-form .btn {
    border-color: var(--theme-line) !important;
    background: var(--theme-surface) !important;
    color: var(--theme-ink) !important;
}

.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
    color: #6f8076 !important;
    border-left: 3px solid transparent;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.sidebar-menu > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a,
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
    color: var(--theme-ink) !important;
    background: var(--theme-soft) !important;
    border-left-color: var(--theme-primary);
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.menu-open > a > .fa,
.sidebar-menu .treeview-menu > li.active > a > .fa {
    color: var(--theme-primary-dark) !important;
}

.sidebar-menu .treeview-menu {
    background: #f8fcf8 !important;
}

.sidebar-menu > li .badge {
    border-radius: 999px;
    background: #c9e5d0 !important;
    color: #4f7b5d !important;
}

.content-wrapper,
.right-side {
    min-height: calc(100vh - 50px);
}

#ribbon {
    border-bottom: 1px solid var(--theme-line);
    background: rgba(255, 255, 255, .58) !important;
}

#ribbon a,
#ribbon .breadcrumb > li + li:before {
    color: var(--theme-muted) !important;
}

.content {
    color: var(--theme-ink);
}

.panel,
.panel-default,
.panel-intro,
.card,
.box,
.ibox {
    border: 1px solid var(--theme-line) !important;
    border-radius: 16px !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow) !important;
}

.panel-heading,
.panel-default > .panel-heading,
.panel-footer,
.box-header,
.ibox-title {
    border-color: var(--theme-line) !important;
    background: #fdfefd !important;
    color: var(--theme-ink) !important;
}

.panel-heading,
.panel-default > .panel-heading {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.panel-body,
.box-body,
.ibox-content {
    color: var(--theme-ink);
}

.toolbar,
.fixed-table-toolbar {
    padding-top: 3px;
    padding-bottom: 12px;
}

.btn {
    border-radius: 8px;
    border-color: var(--theme-line);
    box-shadow: none !important;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
}

.btn-primary,
.btn-success {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    border-color: var(--theme-primary-dark) !important;
    background: var(--theme-primary-dark) !important;
}

.btn-info {
    border-color: #cde6d5 !important;
    background: #e8f5eb !important;
    color: #5d8669 !important;
}

.btn-warning {
    border-color: #e8ca82 !important;
    background: #f8e9b8 !important;
    color: #7b6225 !important;
}

.btn-danger {
    border-color: var(--theme-danger) !important;
    background: #f1c9be !important;
    color: #895848 !important;
}

.btn-default,
.btn-light {
    border-color: var(--theme-line) !important;
    background: #f8fbf8 !important;
    color: var(--theme-ink) !important;
}

.form-control,
.input-group-addon,
.bootstrap-select .btn,
.selectpage {
    border-color: var(--theme-line) !important;
    border-radius: 8px;
    background: #fff !important;
    color: var(--theme-ink) !important;
    box-shadow: none !important;
}

.form-control:focus,
.selectpage:focus {
    border-color: #b5d8bf !important;
    box-shadow: 0 0 0 3px rgba(130, 182, 151, .14) !important;
}

.table,
.bootstrap-table .table {
    color: var(--theme-ink);
}

.table > thead > tr > th,
.bootstrap-table .table > thead > tr > th {
    border-color: var(--theme-line) !important;
    background: #f5faf5 !important;
    color: #66806d !important;
    font-weight: 700;
}

.table > tbody > tr > td,
.bootstrap-table .table > tbody > tr > td {
    border-color: #edf2ed !important;
    background: #fff !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.bootstrap-table .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: #fbfdfb !important;
}

.table-hover > tbody > tr:hover > td,
.bootstrap-table .table-hover > tbody > tr:hover > td {
    background: #f8fcf8 !important;
}

.bootstrap-table .fixed-table-toolbar .search input,
.bootstrap-table .form-commonsearch input,
.bootstrap-table .form-commonsearch select {
    border-color: var(--theme-line) !important;
    border-radius: 8px !important;
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--theme-line) !important;
    color: var(--theme-primary-dark) !important;
    background: #fff !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    color: #fff !important;
}

.label-primary,
.label-success {
    background: #d9efde !important;
    color: #5c8667 !important;
}

.label-warning {
    background: #f8e9b8 !important;
    color: #7b6225 !important;
}

.label-danger {
    background: #f1c9be !important;
    color: #895848 !important;
}

.text-success,
.text-primary {
    color: var(--theme-primary-dark) !important;
}

.text-warning {
    color: #a67b20 !important;
}

.text-danger {
    color: #a36454 !important;
}

.alert-info,
.alert-primary {
    border: 1px solid #d7ecdc !important;
    background: #edf8ef !important;
    color: #5f886a !important;
}

.alert-warning {
    border: 1px solid #ead89f !important;
    background: #fff7dc !important;
    color: #816a2e !important;
}

.alert-danger {
    border: 1px solid #edc5b9 !important;
    background: #fff0eb !important;
    color: #945f50 !important;
}

.radio label,
.checkbox label,
.control-label {
    color: var(--theme-ink);
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--theme-primary);
}

.layui-layer,
.layui-layer-title,
.layui-layer-content,
.layui-layer-btn {
    border-color: var(--theme-line) !important;
}

.layui-layer {
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(54, 82, 64, .16) !important;
}

.layui-layer-title {
    background: #f5faf5 !important;
    color: var(--theme-ink) !important;
}

/* FastAdmin dialogs use a more specific legacy skin, so keep the same theme here. */
.layui-layer-fast,
.layui-layer-fast.layui-layer-border {
    overflow: hidden;
    border: 1px solid var(--theme-line) !important;
    border-radius: 14px !important;
    background: var(--theme-surface) !important;
    box-shadow: 0 18px 45px rgba(54, 82, 64, .16) !important;
}

.layui-layer-fast .layui-layer-title {
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid var(--theme-line) !important;
    background: #f4faf5 !important;
    color: var(--theme-ink) !important;
    font-weight: 700;
}

.layui-layer-fast .layui-layer-setwin,
.layui-layer-fast .layui-layer-title ~ .layui-layer-setwin {
    top: 0;
    height: 48px;
}

.layui-layer-fast .layui-layer-setwin > a,
.layui-layer-fast .layui-layer-setwin > a:hover,
.layui-layer-fast .layui-layer-setwin > a:focus {
    height: 48px;
    line-height: 48px;
    color: var(--theme-ink) !important;
    opacity: 1 !important;
}

.layui-layer-fast .layui-layer-setwin > a:after {
    color: var(--theme-ink) !important;
    font-weight: 600;
}

.layui-layer-fast .layui-layer-setwin > a:hover:after,
.layui-layer-fast .layui-layer-setwin > a:focus:after {
    color: var(--theme-primary-dark) !important;
}

.layui-layer-fast .layui-layer-content,
.layui-layer-fast .layui-layer-iframe {
    background: var(--theme-surface) !important;
    color: var(--theme-ink);
}

.layui-layer-fast .layui-layer-btn,
.layui-layer-fast .layui-layer-footer {
    min-height: 57px;
    border-top: 1px solid var(--theme-line) !important;
    background: #f8fbf8 !important;
}

.layui-layer-fast .layui-layer-btn {
    padding: 12px 20px !important;
    text-align: right !important;
}

.layui-layer-fast .layui-layer-btn a {
    height: 34px;
    line-height: 34px;
    margin: 0 0 0 8px;
    padding: 0 16px;
    border: 1px solid var(--theme-line) !important;
    border-radius: 8px;
    background: #fff !important;
    color: var(--theme-ink) !important;
}

.layui-layer-fast .layui-layer-btn .layui-layer-btn0 {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    color: #fff !important;
}

.layui-layer-fast .layui-layer-btn a:hover {
    border-color: #c7e2ce !important;
    background: var(--theme-soft) !important;
}

.layui-layer-fast .layui-layer-btn .layui-layer-btn0:hover {
    border-color: var(--theme-primary-dark) !important;
    background: var(--theme-primary-dark) !important;
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--theme-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--theme-shadow) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--theme-line) !important;
    background: #f8fbf8 !important;
}

.modal-header {
    background: #f4faf5 !important;
    color: var(--theme-ink);
}

/* Agent management pages: keep detail views calm, readable and consistent. */
.recharge-context {
    min-height: 36px;
    margin: 0 0 14px;
    padding: 8px 12px;
    border: 1px solid var(--theme-line);
    border-radius: 10px;
    background: #fbfdfb;
    color: var(--theme-muted) !important;
}

.recharge-context-label,
.recharge-detail-heading span,
.agent-stat-label {
    color: var(--theme-muted) !important;
}

.recharge-context strong,
.recharge-total-bar strong,
.recharge-detail-heading,
.agent-summary-heading strong {
    color: var(--theme-ink) !important;
}

.recharge-context .btn-link,
.recharge-user-link {
    color: var(--theme-primary-dark) !important;
}

.recharge-filter {
    padding: 12px 14px;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    background: #fbfdfb;
}

.recharge-summary-panel,
.recharge-detail-panel {
    padding: 16px;
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
}

.recharge-total-bar {
    padding: 0 0 14px;
    color: var(--theme-muted) !important;
}

.agent-summary-card {
    border: 1px solid #dfefe2 !important;
    border-left: 4px solid var(--theme-primary) !important;
    border-radius: 12px;
    background: #f6fbf6 !important;
    box-shadow: none;
}

.agent-summary-heading {
    color: var(--theme-muted) !important;
}

.agent-stat-item {
    border: 1px solid var(--theme-line) !important;
    border-radius: 10px;
    background: #fff !important;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.agent-stat-item:hover {
    border-color: #c4dfca !important;
    box-shadow: 0 7px 16px rgba(54, 82, 64, .07);
    transform: translateY(-2px);
}

.agent-stat-item strong {
    color: var(--theme-primary-dark) !important;
}

.recharge-detail-heading {
    padding: 2px 0 12px;
}

.strategy-detail-wrap,
.commission-application-detail {
    padding: 20px !important;
}

.strategy-summary {
    padding: 20px;
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    background: #fbfdfb !important;
    box-shadow: var(--theme-shadow);
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-ink) !important;
}

.summary-title:before {
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--theme-primary);
    content: "";
}

.summary-account {
    color: var(--theme-muted) !important;
}

.strategy-info-table,
.commission-application-detail .table {
    overflow: hidden;
    border: 1px solid var(--theme-line);
    border-radius: 10px;
}

.strategy-info-table th,
.commission-application-detail th {
    border-color: var(--theme-line) !important;
    background: #f3faf4 !important;
    color: var(--theme-ink) !important;
    font-weight: 600;
}

.strategy-info-table td,
.commission-application-detail td {
    border-color: var(--theme-line) !important;
    background: #fff !important;
}

.strategy-summary .section-title {
    margin-top: 24px;
    padding-left: 10px;
    border-left: 3px solid #b9d8c1;
    color: var(--theme-ink);
}

.commission-apply-summary {
    border: 1px solid #d7ecdc !important;
    border-radius: 12px;
    background: #edf8ef !important;
    color: #5f886a !important;
    box-shadow: none;
}

.commission-apply-summary .summary-subtext {
    color: #71927a !important;
}

#apply-form,
#games-form {
    padding-top: 4px;
}

#apply-form .form-group,
#games-form .form-group {
    margin-bottom: 18px;
}

#binding-list {
    gap: 18px !important;
    margin: 0 0 20px;
}

#binding-list .binding-item {
    overflow: hidden;
    border: 1px solid var(--theme-line) !important;
    border-radius: 14px;
    background: #fbfdfb !important;
    box-shadow: var(--theme-shadow);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#binding-list .binding-item:hover {
    border-color: #c4dfca !important;
    box-shadow: 0 12px 25px rgba(54, 82, 64, .09);
    transform: translateY(-2px);
}

#binding-list .binding-item .panel-heading {
    border-bottom: 1px solid var(--theme-line) !important;
    background: #f3faf4 !important;
    color: var(--theme-ink) !important;
}

#binding-list .binding-item .panel-body {
    background: #fff;
}

#binding-list .control-label {
    color: var(--theme-ink) !important;
    font-weight: 600;
}

#binding-list .game-landing-url {
    border-style: dashed;
    background: #f8fbf8 !important;
    color: var(--theme-muted) !important;
}

#binding-list .status-slider {
    background: #d6e1d8 !important;
    box-shadow: inset 0 0 0 1px rgba(48, 68, 59, .05);
}

#binding-list .status-switch:checked + .status-slider {
    background: var(--theme-primary) !important;
}

#binding-list .status-label {
    color: var(--theme-muted);
}

#binding-list .status-switch:checked ~ .status-label {
    color: var(--theme-primary-dark);
    font-weight: 600;
}

.layer-footer {
    padding-top: 8px;
}

@media (max-width: 767px) {
    .recharge-filter,
    .strategy-summary,
    .strategy-detail-wrap,
    .commission-application-detail {
        padding: 12px !important;
    }

    .recharge-summary-panel,
    .recharge-detail-panel {
        padding: 12px;
    }

    .recharge-context {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px;
    }

    .agent-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .strategy-info-table,
    .commission-application-detail .table {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .content {
        padding: 10px !important;
    }

    .panel,
    .panel-default,
    .panel-intro,
    .card,
    .box,
    .ibox {
        border-radius: 12px !important;
    }
}

/* Toast feedback */
#toast-container.toast-top-right,
#toast-container.toast-top-right-index {
    top: 55px;
    right: 18px;
    width: min(360px, calc(100% - 36px));
}

#toast-container > div,
#toast-container > div:hover {
    position: relative;
    width: 100%;
    min-height: 54px;
    margin: 0 0 10px;
    padding: 15px 44px 15px 56px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background-image: none !important;
    color: #fff;
    opacity: 1;
    box-shadow: 0 14px 30px rgba(34, 57, 63, .16), 0 2px 8px rgba(34, 57, 63, .08);
    transition: transform .22s ease, box-shadow .22s ease;
}

#toast-container > div:hover {
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(34, 57, 63, .2), 0 3px 10px rgba(34, 57, 63, .1);
}

#toast-container > div:before {
    position: absolute;
    top: 50%;
    left: 18px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}

#toast-container > .toast-success {
    background: linear-gradient(135deg, #35cfa9 0%, #18b992 100%) !important;
    background-color: #18b992 !important;
}

#toast-container > .toast-success:hover,
#toast-container > .toast-success:focus {
    background: linear-gradient(135deg, #35cfa9 0%, #18b992 100%) !important;
    background-color: #18b992 !important;
    color: #fff !important;
}

#toast-container > .toast-success:before {
    content: "\2713";
}

#toast-container > .toast-error {
    background: linear-gradient(135deg, #ff8c97 0%, #f56f7c 100%) !important;
}

#toast-container > .toast-error:before,
#toast-container > .toast-warning:before {
    content: "!";
}

#toast-container > .toast-warning {
    background: linear-gradient(135deg, #f7c45e 0%, #eca92c 100%) !important;
}

#toast-container > .toast-info {
    background: linear-gradient(135deg, #62b9ed 0%, #3f99d6 100%) !important;
}

#toast-container > .toast-info:before {
    content: "i";
    font-family: Georgia, serif;
}

#toast-container .toast-message {
    min-height: 24px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .01em;
}

#toast-container .toast-title {
    margin-bottom: 2px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

#toast-container .toast-close-button {
    position: absolute;
    top: 50%;
    right: 14px;
    float: none;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    opacity: .78;
    text-shadow: none;
    transition: opacity .2s ease, transform .2s ease;
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    color: #fff;
    opacity: 1;
    transform: scale(1.12);
}

#toast-container .toast-progress {
    right: 14px;
    bottom: 7px;
    left: 14px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .72);
    opacity: .7;
}

@media (max-width: 767px) {
    #toast-container.toast-top-right,
    #toast-container.toast-top-right-index {
        top: 48px;
        right: 12px;
        width: calc(100% - 24px);
    }

    #toast-container > div,
    #toast-container > div:hover {
        min-height: 50px;
        padding: 13px 40px 13px 52px;
        border-radius: 12px;
    }

    #toast-container > div:before {
        left: 16px;
    }
}