/* =============================================
   Theme compatibility layer
   Loaded after core.css + theme CSS so redesigned
   pages keep working under legacy full-reskin themes.
   ============================================= */

/* --- Shop (v2 grid layout) --- */
.shop-page .shop-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
}

.shop-page .shop-grid-themes {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

.shop-page .shop-grid .shop-item {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    vertical-align: initial !important;
}

/* --- Scoped buttons (avoid global form / .btn rules) --- */
.settings-page .settings-hero-actions .btn,
.settings-page .settings-gate-actions .btn,
.settings-page .settings-signout-btn,
.settings-page .password-actions .btn,
.settings-page .theme-btn,
.shop-page .shop-gate-actions .btn,
.shop-page .shop-sidebar .btn,
.shop-page .shop-sidebar .btn-sm,
.about-page .about-btn,
.api-page .api-portal-btn,
.api-page .api-icon-btn,
.dp-page .dp-docs-btn,
.dp-page .dev-nav-btn,
.dp-page .dev-form-footer .btn,
.dp-page .dev-form-footer button,
.dp-page .uri-remove,
.dp-page .copy-btn,
.dp-page header .btn,
.reboot-confirm-actions .reboot-confirm-btn,
.animation-toggle,
#animationToggle {
    width: auto !important;
    max-width: none !important;
}

.settings-page .settings-hero-actions .btn,
.settings-page .settings-gate-actions .btn,
.shop-page .shop-gate-actions .btn,
.about-page .about-btn,
.api-page .api-portal-btn,
.api-page .api-header-btn,
.dp-page .dp-docs-btn,
.dp-page header .btn,
.reboot-confirm-actions .reboot-confirm-btn {
    height: auto !important;
}

/* Full-width submits where intended */
.settings-page .wtl-box form.change-password button[type="submit"],
.settings-page #settingsPkRegisterBtn,
.shop-page .shop-grid .shop-item .buyButton,
.shop-page .shop-grid .shop-item .buyButton.unavailable,
.dp-page .dev-form button[type="submit"] {
    width: 100% !important;
}

.shop-page .shop-grid .shop-item .buyButton {
    height: auto !important;
    min-height: 42px;
}

/* Theme picker tiles */
.theme-selector .theme-btn {
    width: 100% !important;
}

.theme-selector .theme-preview-img {
    width: 100% !important;
    height: 120px !important;
}

/* Confirm modal — always readable above themed backgrounds */
.reboot-confirm-overlay {
    z-index: 10050 !important;
}

.reboot-confirm-dialog {
    background: rgba(22, 26, 36, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.reboot-confirm-title,
.reboot-confirm-message,
.reboot-confirm-detail {
    color: inherit !important;
}

.reboot-confirm-overlay.visible .reboot-confirm-dialog {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.reboot-confirm-actions .reboot-confirm-btn {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.reboot-confirm-detail {
    color: #00c853 !important;
}

.reboot-confirm-message {
    color: rgba(255, 255, 255, 0.62) !important;
}

.payment-overlay {
    z-index: 10060 !important;
}

/* Visualizer canvases — don't inherit broken positioning from legacy themes */
#musicVisualizer {
    position: absolute !important;
    bottom: 0;
    top: auto;
    height: 36px;
}

@media (min-width: 768px) {
    #musicVisualizer { height: 44px; }
}

/* Footer — keep redesigned layout across legacy theme overrides */
.footer-online-wrap,
.footer-credits.credits {
    float: none !important;
}

.footer-credits.credits {
    height: auto !important;
    min-height: 0 !important;
}

.footer-credits-main,
.footer-links {
    float: none !important;
}

.onlineMembers {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 0 !important;
}

.onlineMember.is-empty {
    display: none !important;
}

.onlineMember a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 50% !important;
}

.onlineMember img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    outline: none !important;
    appearance: none !important;
}

/* About page — match site glass layout; protect from legacy themes */
.about-page .about-body,
.about-page .about-body p,
.about-page .contentBody.about-body {
    text-align: left !important;
}

.about-page .about-panel,
.about-page .about-side-card,
.about-page .about-quick-card {
    text-align: left !important;
}

.about-page .about-btn {
    width: auto !important;
    max-width: none !important;
    height: 40px !important;
    opacity: 1 !important;
}

.about-page .about-social {
    justify-content: flex-start !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.about-page .about-social-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.about-page .about-social-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.about-page .about-side-link,
.about-page .about-quick-card {
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
}

.about-page .about-quick-card {
    display: flex !important;
    height: auto !important;
}

.about-page .about.about-panel,
.about-page .about.about-side-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* API docs — override legacy .int-box center alignment + btn rules */
.api-page .int-box.api-aside {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.api-page .api-portal-btn {
    width: auto !important;
    max-width: none !important;
    height: 40px !important;
    opacity: 1 !important;
}

.api-page .api-jump a {
    width: auto !important;
    text-align: left !important;
}

/* Developer portal */
.dp-page .wtl-box {
    text-align: left !important;
    margin-top: 0 !important;
}

.dp-page .dp-docs-btn {
    width: auto !important;
    max-width: none !important;
    height: 40px !important;
    opacity: 1 !important;
}

.dp-page .dev-nav-btn {
    width: 100% !important;
    text-align: left !important;
    opacity: 1 !important;
}

.dp-page .empty-state .btn-primary {
    width: auto !important;
}

/* Profile page — protect v2 layout from legacy theme overrides */
.profile-page .int-box,
.profile-page .about {
    text-align: left !important;
}

.profile-page .profile-hero-actions .btn,
.profile-page .profileButtons .btn,
.profile-page .profile-action-btn {
    width: auto !important;
    max-width: none !important;
    height: 42px !important;
    opacity: 1 !important;
}

.profile-page .profile-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.profile-page .wtl-box {
    margin-top: 0 !important;
    text-align: left !important;
}

.profile-page .profile-stat-card.wtl-box {
    height: auto !important;
    padding: 16px 16px 15px !important;
}

.profile-page .profile-side-panel.wtl-box {
    height: auto !important;
    padding: 0 !important;
}

.profile-page .profile-panel-head::before {
    display: block !important;
}

.profile-page .profile-role-icon svg {
    filter: none !important;
}

.profile-page .profile-social-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
}

.profile-page .profile-social-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.profile-page .profile-panel-link {
    width: auto !important;
    text-align: right !important;
}

.profile-page .profile-host-chip {
    width: auto !important;
    text-align: left !important;
}

.profile-page .profile-empty-state {
    text-align: center !important;
}

.profile-page .profile-about-text,
.profile-page .profile-about-text p {
    text-align: left !important;
}

.profile-page .profile-hero {
    height: auto !important;
    padding: 0 !important;
}

.profile-page .profile-hero-inner .profileAvatar {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.profile-page .chart-vote-btn {
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
}