/* 消息容器固定在页面顶部中央 */
#message-container {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 500px;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* fixed+top/left/transform → 固定在页面顶部中央。 
    display: flex + flex-direction: column + gap → 多条消息纵向排列并保持间距。 
    z-index: 1055 → 保证在其他元素上层显示。 */
}

/* 单条消息样式 */
.message-float {
    animation: fadeSlideIn 0.5s ease-out, fadeSlideOut 0.5s ease-in 3s forwards;
    /* 动画让消息淡入淡出。 forwards → 动画结束后保持最终状态（这里是消失）。 */
}

/* 进入动画 */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 自动消失动画 */
@keyframes fadeSlideOut {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* 消息通用样式 */
.flash-message {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 阴影+圆角+padding → 美观 display: flex + justify-content/align-items → 消息内容和关闭按钮左右分开并垂直居中 word-break → 长文字不会撑破布局 */
}

/* 深色背景 + 白字消息 */
.alert-success {
    background-color: #155724;
    color: #fff;
}

.alert-danger,
.alert-error {
    background-color: #721c24;
    color: #fff;
}

.alert-warning {
    background-color: #856404;
    color: #fff;
}

.alert-info {
    background-color: #0c5460;
    color: #fff;
}

/* 关闭按钮可见 */
.flash-message .btn-close {
    filter: invert(1);
    /* 反转颜色，保证白字背景上可见 */
}

/* 页面基础布局 */
html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    /* 让 body 成为 flex 容器 */
    flex-direction: column;
    /* 默认的 Flex 容器方向是 row（水平一行），而 flex-direction: column; 会把方向改成 纵向一列。*/
    /* body 上设置 
        display: flex;  
        flex-direction: column; 
    ，只会影响 body 的直接子元素, 比如 header main 等。具体地，
    在 body 这个大容器的眼里，.navbar 就是一个 flex item，只参与 body 的排版（纵向排一列）。 
    但 .navbar 自己定义了 display: flex; ，它自己也变成一个 小 flex 容器，里面的 .navbar-brand、.navbar-nav 等会横向排列。
    父级的 flex 只决定它的子元素（.navbar、main、footer）的排列方式。 子级自己设的 flex，只管它自己的内部排版（.navbar-brand、.navbar-nav 的对齐方式）。 这两层是独立的，不会相互覆盖。
    */
}

footer {
    color: white;
    text-align: center;
    padding: 10px 0;
}