/*
 * BOTIFY dark UI layer.
 * Loaded only by the shared application layout; the bot editor has a separate
 * layout and keeps its original colors.
 */
:root {
    --botify-page-bg: #101820;
    --botify-surface: #172330;
    --botify-surface-2: #1e2b38;
    --botify-surface-3: #243848;
    --botify-border: rgba(177, 190, 204, 0.22);
    --botify-text: #edf3f8;
    --botify-text-muted: #aab7c4;
    --botify-link: #5ad7ff;
    --botify-danger: #fa5c7c;
    --botify-success: #10c469;
    --botify-warning: #ffbc00;
    --botify-info: #39afd1;
}

html,
body {
    background: var(--botify-page-bg) !important;
    color: var(--botify-text) !important;
}

body,
.wrapper,
.content-page,
.content,
.container-fluid,
.main-content,
.page-content,
.app-search,
.leftside-menu,
.side-nav,
.detached-wrapper,
.detached-content,
.detached-left-sidebar,
.detached-nav {
    background-color: var(--botify-page-bg) !important;
    color: var(--botify-text) !important;
}

.navbar-custom,
.topnav-navbar,
.navbar-custom.topnav-navbar,
.topbar-menu,
.logo-topbar,
.leftside-menu,
.side-nav {
    background-color: var(--botify-surface) !important;
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.navbar-custom .topbar-menu .nav-link,
.navbar-custom .button-toggle-menu,
.navbar-custom .navbar-toggle,
.navbar-custom .noti-icon,
.side-nav .side-nav-link,
.side-nav .menuitem-active > a {
    color: var(--botify-text-muted) !important;
}

.navbar-custom .topbar-menu .nav-link:hover,
.navbar-custom .button-toggle-menu:hover,
.navbar-custom .navbar-toggle:hover,
.side-nav .side-nav-link:hover,
.side-nav .menuitem-active > a {
    color: var(--botify-text) !important;
}

.navbar-custom .topbar-menu .nav-user,
.topnav-navbar .topbar-menu .nav-user,
.topbar-menu .nav-user {
    background-color: var(--botify-surface-2) !important;
    border-left: 1px solid var(--botify-border) !important;
    border-right: 1px solid var(--botify-border) !important;
    box-shadow: none !important;
}

.navbar-custom .topbar-menu .nav-user:hover,
.navbar-custom .topbar-menu .nav-user:focus,
.topnav-navbar .topbar-menu .nav-user:hover,
.topnav-navbar .topbar-menu .nav-user:focus,
.topbar-menu .nav-user:hover,
.topbar-menu .nav-user:focus {
    background-color: var(--botify-surface-3) !important;
}

.navbar-custom .topbar-menu .nav-user .account-user-avatar,
.topnav-navbar .topbar-menu .nav-user .account-user-avatar,
.topbar-menu .nav-user .account-user-avatar {
    background-color: var(--botify-page-bg) !important;
}

.navbar-custom .topbar-menu .nav-user .account-user-name,
.navbar-custom .topbar-menu .nav-user .account-position,
.topnav-navbar .topbar-menu .nav-user .account-user-name,
.topnav-navbar .topbar-menu .nav-user .account-position,
.topbar-menu .nav-user .account-user-name,
.topbar-menu .nav-user .account-position {
    color: var(--botify-text) !important;
}

.navbar-custom .topbar-menu .nav-user .account-position,
.topnav-navbar .topbar-menu .nav-user .account-position,
.topbar-menu .nav-user .account-position {
    color: var(--botify-text-muted) !important;
}

.navbar-custom .topbar-menu .profile-dropdown,
.topnav-navbar .topbar-menu .profile-dropdown,
.topbar-menu .profile-dropdown {
    background-color: var(--botify-surface-2) !important;
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.navbar-custom .topbar-menu .profile-dropdown.show,
.topnav-navbar .topbar-menu .profile-dropdown.show,
.topbar-menu .profile-dropdown.show {
    display: block !important;
}

.card,
.card-body,
.card-header,
.card-footer,
.modal-content,
.modal-header,
.modal-footer,
.dropdown-menu,
.popover,
.toast,
.offcanvas,
.accordion-item,
.list-group-item,
.page-title-box,
.tab-content,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.table,
.table-responsive,
.dataTables_wrapper,
.select2-container .select2-selection,
.select2-dropdown,
.select2-results__option,
.ql-toolbar,
.ql-container {
    background-color: var(--botify-surface) !important;
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.dropdown-header,
.dropdown-item,
.table thead,
.table-light,
.table > :not(caption) > * > *,
.accordion-button,
.accordion-body {
    background-color: var(--botify-surface-2) !important;
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.list-group-item:hover,
.accordion-button:not(.collapsed),
.nav-tabs .nav-link:hover {
    background-color: var(--botify-surface-3) !important;
    color: var(--botify-text) !important;
}

.form-control,
.form-select,
.form-check-input,
.input-group-text,
input,
textarea,
select {
    background-color: #111c26 !important;
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: #13202b !important;
    border-color: rgba(90, 215, 255, 0.65) !important;
    box-shadow: 0 0 0 0.18rem rgba(90, 215, 255, 0.12) !important;
    color: var(--botify-text) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #748393 !important;
}

.bg-white,
.bg-light,
.bg-body,
.bg-body-tertiary {
    background-color: var(--botify-surface) !important;
}

.text-dark,
.text-body,
.text-black,
.text-secondary {
    color: var(--botify-text) !important;
}

.text-muted,
.small.text-muted,
small.text-muted {
    color: var(--botify-text-muted) !important;
}

a,
.btn-link,
.nav-link {
    color: var(--botify-link);
}

a:hover,
.btn-link:hover,
.nav-link:hover {
    color: #9eeaff;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start,
.border-secondary,
.border-light,
hr {
    border-color: var(--botify-border) !important;
}

.btn-light,
.btn-outline-light {
    background-color: var(--botify-surface-2) !important;
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.btn-light:hover,
.btn-outline-light:hover {
    background-color: var(--botify-surface-3) !important;
    color: var(--botify-text) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(90, 215, 255, 0.07) !important;
    color: var(--botify-text) !important;
}

.pagination .page-link {
    background-color: var(--botify-surface-2) !important;
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--botify-link) !important;
    border-color: var(--botify-link) !important;
    color: #08121a !important;
}

.alert {
    border-color: var(--botify-border) !important;
    color: var(--botify-text) !important;
}

.alert-info {
    background-color: rgba(57, 175, 209, 0.16) !important;
}

.alert-success {
    background-color: rgba(16, 196, 105, 0.16) !important;
}

.alert-warning {
    background-color: rgba(255, 188, 0, 0.16) !important;
}

.alert-danger {
    background-color: rgba(250, 92, 124, 0.14) !important;
}

.page-title,
.card-title,
.modal-title,
h1,
h2,
h3,
h4,
h5,
h6,
label,
.form-label {
    color: var(--botify-text) !important;
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36) !important;
}

.filepond--panel-root {
    background-color: #111c26 !important;
}

.filepond--drop-label,
.filepond--file-info,
.filepond--file-status {
    color: var(--botify-text) !important;
}

.system-alerts-menu {
    border: 1px solid rgba(250, 92, 124, 0.72) !important;
    background-color: rgba(23, 35, 48, 0.99) !important;
    color: var(--botify-text) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.52) !important;
}

.system-alerts-menu .system-alerts-header {
    background-color: #1e2b38 !important;
    border-bottom: 1px solid rgba(250, 92, 124, 0.42) !important;
    color: var(--botify-text) !important;
}

.system-alerts-menu .system-alert-card {
    background-color: rgba(250, 92, 124, 0.09) !important;
    border: 1px solid rgba(250, 92, 124, 0.34) !important;
    color: var(--botify-text) !important;
}

.system-alerts-menu .system-alert-card .badge {
    background-color: rgba(250, 92, 124, 0.16) !important;
    color: #ff8ea5 !important;
}

.system-alerts-menu .system-alert-filter {
    border-color: rgba(250, 92, 124, 0.62) !important;
}

.system-alerts-menu .system-alert-filter.btn-outline-danger {
    background-color: transparent !important;
    color: #ff8ea5 !important;
}

.system-alerts-menu .system-alert-filter.btn-danger,
.system-alerts-menu .system-alert-filter.active {
    background-color: var(--botify-danger) !important;
    color: #fff !important;
}

.system-alerts-menu .system-alert-resolve {
    border-color: rgba(16, 196, 105, 0.76) !important;
    color: var(--botify-success) !important;
}

.system-alerts-menu .system-alert-resolve:hover {
    background-color: var(--botify-success) !important;
    color: #fff !important;
}

.system-alerts-menu pre {
    background-color: #0b1219 !important;
    color: #dce7f0 !important;
}

#my_bots_card .my-bot-row {
    background-color: #172330 !important;
    border-color: rgba(90, 215, 255, 0.22) !important;
}

#my_bots_card .my-bot-row + .my-bot-row {
    margin-top: 10px;
}

#my_bots_card .my-bot-row:hover {
    background-color: #1b2a38 !important;
    border-color: rgba(90, 215, 255, 0.42) !important;
}

#my_bots_card .my-bot-row > .position-absolute.bg-light {
    background-color: rgba(23, 35, 48, 0.82) !important;
}

.support-ticket-card,
.support-ticket-panel {
    background-color: #172330;
    border: 1px solid rgba(255, 188, 0, 0.28);
    border-radius: 8px;
    padding: 12px;
}

.support-ticket-card:hover,
.support-ticket-panel:hover {
    border-color: rgba(255, 188, 0, 0.48);
}

.support-ticket-message {
    border: 1px solid var(--botify-border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.035);
}

.support-ticket-message.is-staff {
    border-color: rgba(255, 188, 0, 0.34);
    background-color: rgba(255, 188, 0, 0.08);
}

.support-ticket-message.is-user {
    border-color: rgba(90, 215, 255, 0.24);
}

.support-alerts-menu {
    border: 1px solid rgba(255, 188, 0, 0.72) !important;
    background-color: rgba(23, 35, 48, 0.99) !important;
    color: var(--botify-text) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.52) !important;
}

.support-alerts-header {
    background-color: #1e2b38 !important;
    border-bottom: 1px solid rgba(255, 188, 0, 0.42) !important;
}

.support-alert-card {
    background-color: rgba(255, 188, 0, 0.08) !important;
    border: 1px solid rgba(255, 188, 0, 0.32) !important;
    color: var(--botify-text) !important;
}