/* ============================================================================
   Appearance widget — topbar theme/mode picker (pairs with js/appearance.js).
   Also hides Cuba's built-in customizer panel (grip/cog floating buttons + slide-outs);
   we drive the exact same mechanism from our own clean dropdown instead.
   ============================================================================ */

/* Hide Cuba's injected customizer chrome (we keep customizer.js only for its on-load sync). */
.sidebar-panel-main,
.setting-sidebar,
.layout-sidebar { display: none !important; }

/* ---- Topbar trigger button ---------------------------------------------- */
#pageWrapper .nav-right #spq-appearance-btn {
    display: inline-grid; place-items: center;
    width: 12px; height: 38px; border-radius: 10px;
    cursor: pointer; color: #46536b; border: 0; background: transparent;
}
#pageWrapper .nav-right #spq-appearance-btn:hover { background: #eef2f8; color: #1f2b45; }
#pageWrapper .nav-right #spq-appearance-btn i { font-size: 15px; }
body.dark-only #pageWrapper .nav-right #spq-appearance-btn { color: #c9d3e6; }
body.dark-only #pageWrapper .nav-right #spq-appearance-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---- Popover ------------------------------------------------------------- */
.spq-appearance-pop {
    position: fixed; z-index: 3000;
    width: 268px; padding: 14px;
    background: #ffffff; color: #1f2b45;
    border: 1px solid #e7ecf3; border-radius: 14px;
    box-shadow: 0 18px 44px rgba(16, 28, 61, .18);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.spq-appearance-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.spq-appearance-title {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #8291ac; margin: 2px 2px 8px;
}
.spq-appearance-title:not(:first-child) { margin-top: 14px; }

.spq-appearance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spq-appearance-swatch {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e7ecf3; background: #f7f9fc; color: #33415c;
    font-size: .78rem; font-weight: 600; text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.spq-appearance-swatch:hover { background: #eef2f8; }
.spq-appearance-swatch.is-active { border-color: var(--sw); background: #fff; }
.spq-appearance-dot {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sw);
}
.spq-appearance-swatch.is-active .spq-appearance-dot::after {
    content: "\2713"; color: #fff; font-size: 10px; font-weight: 700;
    display: grid; place-items: center; width: 100%; height: 100%;
}
.spq-appearance-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.spq-appearance-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spq-appearance-mode {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e7ecf3; background: #f7f9fc; color: #33415c;
    font-size: .78rem; font-weight: 600;
    transition: border-color .12s ease, background .12s ease;
}
.spq-appearance-mode:hover { background: #eef2f8; }
.spq-appearance-mode.is-active { border-color: var(--theme-default, #7366ff); background: #fff; color: var(--theme-default, #7366ff); }

/* Dark-mode popover surface */
body.dark-only .spq-appearance-pop { background: #14213f; color: #e6ecf7; border-color: #26365c; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
body.dark-only .spq-appearance-title { color: #8ea0c4; }
body.dark-only .spq-appearance-swatch,
body.dark-only .spq-appearance-mode { background: #1c2c50; border-color: #2b3d66; color: #d4ddef; }
body.dark-only .spq-appearance-swatch:hover,
body.dark-only .spq-appearance-mode:hover { background: #223b66; }
body.dark-only .spq-appearance-swatch.is-active { background: #14213f; }
body.dark-only .spq-appearance-dot { box-shadow: 0 0 0 2px #14213f, 0 0 0 3px var(--sw); }