/*
#	Project: SupDoc - Document Management System
#	This is NOT a freeware, use is subject to license terms.
#	Website: https://supixsoft.com
#	Author: SupDoc Team
#	Copyright (C) 2024-2026 SupDoc. All Rights Reserved.
*/

/* H5 底部 Tab：仅移动端显示，前后台两套视觉 */

:root {
    --h5-tabbar-height: 56px;
}

.h5-tabbar {
    display: none;
}

@media (max-width: 992px) {
    .h5-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px));
        padding: 0 0.25rem env(safe-area-inset-bottom, 0px);
        background: var(--docs-bg-body, #fff);
        border-top: 1px solid var(--docs-border-primary, #e5e7eb);
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
        -webkit-tap-highlight-color: transparent;
    }

    .h5-tabbar__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-width: 0;
        padding: 0.3rem 0.2rem;
        border: 0;
        background: transparent;
        color: var(--docs-text-muted, #6b7280);
        text-decoration: none;
        font-size: 0.6875rem;
        font-weight: 500;
        line-height: 1.2;
        cursor: pointer;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    .h5-tabbar__item i {
        font-size: 1.35rem;
        line-height: 1;
    }

    .h5-tabbar__item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .h5-tabbar__item:hover,
    .h5-tabbar__item:focus {
        color: var(--docs-primary, #0d6efd);
        outline: none;
    }

    .h5-tabbar__item.is-active {
        color: var(--docs-primary, #0d6efd);
        font-weight: 600;
    }

    .h5-tabbar__item.is-active i {
        transform: translateY(-1px);
    }

    /* 前台：浅色底 + 主色激活 */
    .h5-tabbar--front .h5-tabbar__item.is-active {
        color: var(--docs-primary, #0d6efd);
    }

    /* 后台 / 用户面板：主色浅底高亮 */
    .h5-tabbar--panel .h5-tabbar__item.is-active {
        color: var(--docs-primary, #0d6efd);
        background: var(--docs-primary-light, rgba(13, 110, 253, 0.1));
        border-radius: 10px;
        margin: 0.25rem 0.15rem;
    }

    /* 后台管理深蓝强调（admin 页面） */
    .h5-tabbar--admin {
        background: #0f172a;
        border-top-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.35);
    }

    .h5-tabbar--admin .h5-tabbar__item {
        color: rgba(255, 255, 255, 0.62);
    }

    .h5-tabbar--admin .h5-tabbar__item:hover,
    .h5-tabbar--admin .h5-tabbar__item:focus {
        color: #fff;
    }

    .h5-tabbar--admin .h5-tabbar__item.is-active {
        color: #93c5fd;
        background: rgba(59, 130, 246, 0.18);
        border-radius: 10px;
        margin: 0.25rem 0.15rem;
        font-weight: 600;
    }

    [data-theme="dark"] .h5-tabbar--front,
    [data-theme="dark"] .h5-tabbar--panel {
        background: var(--docs-bg-body, #1f2937);
        border-top-color: var(--docs-border-primary, #374151);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
    }

    /* 内容区为底部 Tab 留白 */
    body.has-h5-tabbar .docs-main,
    body.has-h5-tabbar .docs-content {
        padding-bottom: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }

    body.has-h5-tabbar .user-content {
        padding-bottom: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }

    body.has-h5-tabbar .admin-content {
        padding-bottom: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }

    body.has-h5-tabbar .user-panel-footer,
    body.has-h5-tabbar .admin-footer,
    body.has-h5-tabbar .docs-footer {
        margin-bottom: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    body.has-h5-tabbar .user-batch-bar {
        bottom: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    body.has-h5-tabbar .batch-action-bar {
        bottom: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    body.has-h5-tabbar .user-back-to-top,
    body.has-h5-tabbar .admin-back-to-top,
    body.has-h5-tabbar .scroll-to-top {
        bottom: calc(var(--h5-tabbar-height) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    }

    body.has-h5-tabbar.user-panel-no-sidebar .h5-tabbar {
        display: none;
    }

    body.has-h5-tabbar.user-panel-no-sidebar .user-content {
        padding-bottom: 1rem !important;
    }
}