/*
 *  footer.css — 页面底部统一备案信息栏
 *  被 login / index / device-list / repair 四个页面共同引用
 */
html {
    scrollbar-gutter: stable;
}

body:has(.app-container) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/*html {//用此代码替换上面那行，会强制始终显示滚动条轨道，无论页面内数据是否铺满整页
    overflow-y: scroll;
}*/
.site-footer {
    /* 固定在视口底部，页面滚动时也居中显示 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;                 /* 低于弹窗(1000)和消息提示(9999) */

    /* 居中排版：图标 + 两段文字横向居中，窄屏自动换行 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #999;
    background-color: rgba(255, 255, 255, 0.85);
}

.site-footer a {
    color: #999;
    text-decoration: none;
}

.site-footer a:hover {
    color: #409eff;
    text-decoration: underline;
}

.site-footer .beian-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;          /* 让图标与文字基线对齐，不上下跳动 */
    margin-right: 4px;
}

.app-container .site-footer {
    position: static;
    margin-top: auto;
    background-color: #f5f5f5;
}

/* 移动端：侧边栏变为抽屉并从左侧移出屏幕，备案栏恢复全宽 */
@media screen and (max-width: 768px) {
    .app-container .site-footer {
        flex-direction: column;
        gap: 4px;
    }
}