/**
 * 手机版页脚导航条样式
 * Material Design 3 风格
 */

/* ===== Material Design 3 底部导航条 ===== */
.mdc-bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 64px;
    background-color: var(--md-sys-color-surface);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: none; /* 默认隐藏，只在手机版显示 */
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    padding: 0 8px env(safe-area-inset-bottom, 0);
    margin: 0;
    gap: 4px;
}

/* 默认：所有页面都不显示底部导航，按需在媒体查询里打开 */
.mdc-bottom-navigation {
    display: none;
}

/* 手机版（≤767px）显示底部导航条 */
@media (max-width: 767px) {
    /* 前端页面：使用全站通用导航 #bottomNavigation */
    #bottomNavigation.mdc-bottom-navigation {
        display: flex !important;
    }

    /* 用户中心页面：只使用自身的 #bottomNavigationMember */
    body.member-md3-page #bottomNavigationMember.mdc-bottom-navigation {
        display: flex !important;
    }

    /* 为底部导航条预留空间，避免内容被遮挡 */
    .mdc-footer-content {
        padding-bottom: 80px; /* 增加底部内边距，为导航条预留空间 */
    }
}

/* 桌面版（≥768px）：强制关闭所有底部导航，避免任何情况下在桌面看到导航条 */
@media (min-width: 768px) {
    .mdc-bottom-navigation {
        display: none !important;
    }
}

.mdc-bottom-navigation__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    position: relative;
    min-height: 64px;
    box-sizing: border-box;
}

.mdc-bottom-navigation__item:hover {
    background-color: var(--md-sys-color-surface-container-highest);
}

.mdc-bottom-navigation__icon {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    transition: transform 0.2s;
}

.mdc-bottom-navigation__item--active .mdc-bottom-navigation__icon {
    transform: scale(1.1);
}

.mdc-bottom-navigation__label {
    font-family: var(--md-sys-typescale-label-small-font);
    font-size: 12px;
    font-weight: var(--md-sys-typescale-label-small-weight);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-shrink: 0;
    min-height: 1.2em;
}

.mdc-bottom-navigation__badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 22px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border-radius: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--md-sys-color-surface);
}

.mdc-bottom-navigation__badge:not(:empty) {
    display: flex;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
    .mdc-bottom-navigation {
        background-color: var(--md-sys-color-surface);
        border-top-color: var(--md-sys-color-outline-variant);
    }
    
    .mdc-bottom-navigation__item:hover {
        background-color: var(--md-sys-color-surface-container-highest);
    }
}

:root[data-theme="dark"] .mdc-bottom-navigation {
    background-color: var(--md-sys-color-surface);
    border-top-color: var(--md-sys-color-outline-variant);
}

:root[data-theme="dark"] .mdc-bottom-navigation__item:hover {
    background-color: var(--md-sys-color-surface-container-highest);
}

/* ===== 页脚提示信息（固定在页脚导航条上方，电脑版和手机版都显示） ===== */
/* Dmsgs 全屏遮罩：低于 #msgs（10050），高于页面主内容 */
#msgs-scrim.mdc-footer-message-scrim {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(0, 0, 0, 0.38);
    display: none;
    -webkit-tap-highlight-color: transparent;
}
body.dmsgs-open {
    overflow: hidden;
}
:root[data-theme="dark"] #msgs-scrim.mdc-footer-message-scrim,
:root.theme-dark #msgs-scrim.mdc-footer-message-scrim {
    background: rgba(0, 0, 0, 0.55);
}

/* 7. 统一提示框（前导条 + 图标，与设计 7.1 一致） */
.mdc-footer-message,
#msgs.mdc-footer-message,
.login-main #msgs.mdc-footer-message,
body .login-main #msgs.mdc-footer-message {
    position: fixed !important;
    left: 0;
    right: 0;
    padding: 14px 16px 14px 50px !important; /* 左侧留出前导条+图标空间，纵向略加避免挤 */
    font-size: 14px !important;
    text-align: left !important;
    z-index: 10050 !important;
    display: none;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
    animation: slideUpMessage 0.3s ease-out;
    border-radius: 8px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
}
/* 文案 + 手动关闭（Dmsgs 内层）：与关闭按钮留出间距；垂直居中对齐 */
.mdc-footer-message__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 28px;
}
.mdc-footer-message__text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    padding-right: 4px;
    line-height: 1.5;
}
.mdc-footer-message__close {
    flex-shrink: 0;
    align-self: center;
    margin: 0 0 0 4px;
    padding: 6px 10px;
    min-width: 36px;
    min-height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    border-radius: 4px;
}
.mdc-footer-message__close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}
/* 前导条（左侧深色条） */
.mdc-footer-message::before,
#msgs.mdc-footer-message::before,
.login-main #msgs.mdc-footer-message::before,
body .login-main #msgs.mdc-footer-message::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 32px !important;
    border-radius: 4px 0 0 4px !important;
}
/* 前导条内图标（白色，居中） */
.mdc-footer-message::after,
#msgs.mdc-footer-message::after,
.login-main #msgs.mdc-footer-message::after,
body .login-main #msgs.mdc-footer-message::after {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 32px !important;
    text-align: center !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    font-family: inherit !important;
}

/* 手机版显示在导航条上方 */
@media (max-width: 767px) {
    .mdc-footer-message,
    #msgs.mdc-footer-message,
    .login-main #msgs.mdc-footer-message {
        bottom: 64px !important; /* 手机版显示在导航条上方（导航条高度64px） */
        left: 20px !important;
        right: 20px !important;
        border-radius: 8px !important;
    }
}

/* 电脑版：非全宽，居中并限制最大宽度（手机版保持近 100% 宽） */
@media (min-width: 768px) {
    .mdc-footer-message,
    #msgs.mdc-footer-message,
    .login-main #msgs.mdc-footer-message {
        bottom: 20px !important;
        left: 50% !important;
        right: auto !important;
        width: auto !important;
        max-width: min(520px, calc(100vw - 48px)) !important;
        min-width: 280px !important;
        transform: translate(-50%, 0) !important;
        border-radius: 8px !important;
    }
}

.mdc-footer-message.success,
.mdc-footer-message.error,
.mdc-footer-message.info,
.mdc-footer-message.warning {
    display: block;
}

/* 成功提示：浅绿底 + 左侧深绿前导条 + 对勾图标 */
.mdc-footer-message.success,
#msgs.mdc-footer-message.success,
.login-main #msgs.mdc-footer-message.success {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}
.mdc-footer-message.success::before,
#msgs.mdc-footer-message.success::before,
.login-main #msgs.mdc-footer-message.success::before { background: #155724 !important; }
.mdc-footer-message.success::after,
#msgs.mdc-footer-message.success::after,
.login-main #msgs.mdc-footer-message.success::after { content: '\2713' !important; }

/* 错误提示：浅红底 + 左侧深红前导条 + 叹号图标 */
.mdc-footer-message.error,
#msgs.mdc-footer-message.error,
.login-main #msgs.mdc-footer-message.error {
    background: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}
.mdc-footer-message.error::before,
#msgs.mdc-footer-message.error::before,
.login-main #msgs.mdc-footer-message.error::before { background: #721c24 !important; }
.mdc-footer-message.error::after,
#msgs.mdc-footer-message.error::after,
.login-main #msgs.mdc-footer-message.error::after { content: '!' !important; }

/* 信息提示：浅蓝底 + 左侧深蓝前导条 + i 图标 */
.mdc-footer-message.info,
#msgs.mdc-footer-message.info,
.login-main #msgs.mdc-footer-message.info {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
    border: 1px solid #bee5eb !important;
}
.mdc-footer-message.info::before,
#msgs.mdc-footer-message.info::before,
.login-main #msgs.mdc-footer-message.info::before { background: #0c5460 !important; }
.mdc-footer-message.info::after,
#msgs.mdc-footer-message.info::after,
.login-main #msgs.mdc-footer-message.info::after { content: 'i' !important; font-style: italic !important; }

/* 警告提示：琥珀系（易识别为「需注意」）+ 左侧色条 + 叹号 */
.mdc-footer-message.warning,
#msgs.mdc-footer-message.warning,
.login-main #msgs.mdc-footer-message.warning {
    background: #fffbeb !important;
    color: #78350f !important;
    border: 1px solid #fde68a !important;
}
.mdc-footer-message.warning::before,
#msgs.mdc-footer-message.warning::before,
.login-main #msgs.mdc-footer-message.warning::before { background: #d97706 !important; }
.mdc-footer-message.warning::after,
#msgs.mdc-footer-message.warning::after,
.login-main #msgs.mdc-footer-message.warning::after { content: '!' !important; }

/* 深色模式适配（与 .fixed-messages .alert 保持一致） */
:root[data-theme="dark"] .mdc-footer-message.success,
:root.theme-dark .mdc-footer-message.success,
:root[data-theme="dark"] #msgs.mdc-footer-message.success,
:root.theme-dark .login-main #msgs.mdc-footer-message.success {
    background: #2e7d32 !important;
    color: #81c784 !important;
    border-color: #1b5e20 !important;
}

:root[data-theme="dark"] .mdc-footer-message.error,
:root.theme-dark .mdc-footer-message.error,
:root[data-theme="dark"] #msgs.mdc-footer-message.error,
:root.theme-dark .login-main #msgs.mdc-footer-message.error {
    background: #c62828 !important;
    color: #ffcdd2 !important;
    border-color: #b71c1c !important;
}

:root[data-theme="dark"] .mdc-footer-message.info,
:root.theme-dark .mdc-footer-message.info,
:root[data-theme="dark"] #msgs.mdc-footer-message.info,
:root.theme-dark .login-main #msgs.mdc-footer-message.info {
    background: #1565c0 !important;
    color: #90caf9 !important;
    border-color: #0d47a1 !important;
}

:root[data-theme="dark"] .mdc-footer-message.warning,
:root.theme-dark .mdc-footer-message.warning,
:root[data-theme="dark"] #msgs.mdc-footer-message.warning,
:root.theme-dark .login-main #msgs.mdc-footer-message.warning {
    background: #78350f !important;
    color: #fef3c7 !important;
    border-color: #b45309 !important;
}
:root[data-theme="dark"] .mdc-footer-message.warning::before,
:root.theme-dark .mdc-footer-message.warning::before,
:root[data-theme="dark"] #msgs.mdc-footer-message.warning::before,
:root.theme-dark .login-main #msgs.mdc-footer-message.warning::before {
    background: #f59e0b !important;
}

/* 动画效果 */
@keyframes slideUpMessage {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}