/* ============================================================
   Variable bridge: this semidash Bootstrap build uses the --dx-*
   prefix, but legacy styles (and this compat sheet) reference the
   standard --bs-* names. Map them here so both resolve.
   ============================================================ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: var(--dx-primary);
    --bs-primary-rgb: var(--dx-primary-rgb);
    --bs-primary-bg-subtle: var(--dx-primary-bg-subtle);
    --bs-secondary-color: var(--dx-secondary-color);
    --bs-danger: var(--dx-danger);
    --bs-danger-rgb: var(--dx-danger-rgb);
    --bs-success: var(--dx-success);
    --bs-warning: var(--dx-warning);
    --bs-info: var(--dx-info);
    --bs-light: var(--dx-light);
    --bs-dark: var(--dx-dark);
    --bs-body-bg: var(--dx-body-bg);
    --bs-body-color: var(--dx-body-color);
    --bs-border-color: var(--dx-border-color);
    --bs-border-radius: var(--dx-border-radius);
}
.card {
    --bs-card-spacer-y: var(--dx-card-spacer-y, 1rem);
    --bs-card-spacer-x: var(--dx-card-spacer-x, 1rem);
}

/*
 * Mathbot compatibility layer for the SemiDash theme.
 * Maps legacy AdminUIUX utility classes (still used in page markup)
 * onto SemiDash / Bootstrap 5.3 design tokens so existing components
 * keep rendering correctly without markup changes.
 */

/* ---- legacy content wrapper (neutralized inside SemiDash page-wrapper) ---- */
main.adminuiux-content,
main.adminuiux-content.has-sidebar {
    padding-top: 0 !important;
    display: block;
    width: 100%;
}

/* ---- avatars (fixed-size icon/image circles) ---- */
.avatar.avatar-18, .avatar.avatar-20, .avatar.avatar-28, .avatar.avatar-40,
.avatar.avatar-50, .avatar.avatar-60, .avatar.avatar-100 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
}
.avatar-18 { width: 18px; height: 18px; }
.avatar-20 { width: 20px; height: 20px; }
.avatar-28 { width: 28px; height: 28px; }
.avatar-40 { width: 40px; height: 40px; }
.avatar-50 { width: 50px; height: 50px; }
.avatar-60 { width: 60px; height: 60px; }
.avatar-100 { width: 100px; height: 100px; }

/* container that shows its background image as a cover, hiding the inner img */
.coverimg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.coverimg > img { display: none; }

/* ---- legacy theme colors -> SemiDash primary ---- */
.bg-theme-1 {
    background-color: var(--bs-primary) !important;
    color: #fff;
}
.bg-theme-1 .text-secondary, .bg-theme-1 .opacity-75 { color: rgba(255, 255, 255, .85) !important; }
.bg-theme-1-subtle { background-color: var(--bs-primary-bg-subtle) !important; }
.text-theme-1 { color: var(--bs-primary) !important; }
.bg-theme-1-space { background-color: var(--bs-primary-bg-subtle) !important; }
.bg-white-opacity { background-color: rgba(255, 255, 255, .18) !important; }
.bg-none { background: none !important; }

.btn-theme {
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-color: #fff;
    --dx-btn-hover-bg: rgba(var(--dx-primary-rgb), .85);
    --dx-btn-hover-border-color: var(--dx-primary);
    --dx-btn-hover-color: #fff;
    --dx-btn-active-bg: var(--dx-primary);
    --dx-btn-active-border-color: var(--dx-primary);
    --dx-btn-active-color: #fff;
    --dx-btn-disabled-bg: var(--dx-primary);
    --dx-btn-disabled-border-color: var(--dx-primary);
    --dx-btn-disabled-color: #fff;
}

/* square icon buttons */
.btn-square {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-square.btn-lg { width: 3rem; height: 3rem; }
.btn-square.btn-sm { width: 2rem; height: 2rem; }

/* ---- misc legacy utilities ---- */
.z-index-1 { z-index: 1; position: relative; }
.z-index-0 { z-index: 0; }
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.height-60 { height: 60px; }
.minvheight-100 { min-height: 100vh; }
.font-weight-bold { font-weight: 700; }
.font-weight-500 { font-weight: 500; }
.text-gray { color: var(--bs-secondary-color); }
.btn-block { display: block; width: 100%; }
.company-tagline {
    font-size: 11px;
    line-height: 1;
    margin: 0;
    color: var(--bs-secondary-color);
}

/* legacy red accent used on logout entries */
.theme-red { color: var(--bs-danger) !important; }

/* ---- legacy chat/game layout (math, captcha, foods solving) ---- */
.height-dynamic { height: var(--h-dynamic) !important; }
.inner-sidebar-wrap { display: flex; flex-wrap: wrap; min-height: 550px; overflow: hidden; position: relative; }
.inner-sidebar-content { flex: 1 0 0%; overflow-y: auto; position: relative; width: 100%; z-index: 0; }
.inner-sidebar-content a { text-decoration: none; }

.chat-list { margin: 0; }
.chat-list figure, .chat-list img, .chat-list video, .chat-list iframe {
    border-radius: var(--bs-border-radius);
    display: block;
    margin: 5px 0;
    max-width: 240px;
    overflow: hidden;
}
.chat-list a { color: var(--bs-primary); font-weight: 500; }

.left-chat { margin-bottom: 15px; }
.left-chat .chat-block {
    background-color: rgba(var(--bs-primary-rgb), .08);
    border-radius: var(--bs-border-radius) var(--bs-border-radius) var(--bs-border-radius) 0;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 3px;
    max-width: 90%;
    padding: 10px 15px;
    position: relative;
    width: auto;
}
.right-chat { margin-bottom: 15px; text-align: right; }
.right-chat .chat-block {
    background-color: var(--bs-primary);
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 var(--bs-border-radius);
    color: #fff;
    display: inline-block;
    margin-bottom: 5px;
    margin-left: 3px;
    max-width: 90%;
    padding: 10px 15px;
    position: relative;
    text-align: left;
    width: auto;
}

/* ---- legacy auth-page classes (old adminuiux theme) ---- */
.btn-theme {
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-color: #fff;
    --dx-btn-hover-bg: rgba(var(--dx-primary-rgb), .85);
    --dx-btn-hover-border-color: var(--dx-primary);
    --dx-btn-hover-color: #fff;
    --dx-btn-active-bg: var(--dx-primary);
    --dx-btn-active-border-color: var(--dx-primary);
    --dx-btn-active-color: #fff;
    --dx-btn-disabled-bg: var(--dx-primary);
    --dx-btn-disabled-border-color: var(--dx-primary);
    --dx-btn-disabled-color: #fff;
}
.text-theme-1 { color: var(--bs-primary) !important; }

/* old Bootstrap 4 card classes still used by a few auth pages */
.card-block { padding: var(--bs-card-spacer-y, 1rem) var(--bs-card-spacer-x, 1rem); }
.auth-box { margin: 0 auto; }
.login-block { width: 100%; }

/* extra ecommerce-widget color variant (semidash ships primary/success/danger/indigo only) */
.ecommerce-widget.warning .card:before,
.ecommerce-widget.warning .card:after { background-color: var(--dx-warning-bg-subtle); }