/* =============================================
   全局基础样式表 (style.css)
   功能：全局重置、侧边栏、卡片、表格、消息提示等通用样式
   适用：系统所有页面的基础样式
   ============================================= */

/* =============================================
   1. 全局基础样式
   ============================================= */

/* 页面主体背景与字体 */
body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 导航栏品牌文字加粗 */
.navbar-brand {
    font-weight: bold;
}

/* =============================================
   2. 侧边栏导航样式
   ============================================= */

/* 侧边栏容器：全屏高度，深色背景 */
.sidebar {
    min-height: calc(100vh - 56px);
    background-color: #343a40;
    padding: 0;
}

/* 侧边栏链接：默认半透明白色文字 */
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.75rem 1rem;
    border-left: 4px solid transparent;
}

/* 侧边栏链接：悬停效果 */
.sidebar .nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

/* 侧边栏链接：当前激活状态（蓝色左边框） */
.sidebar .nav-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-left: 4px solid #007bff;
}

/* 侧边栏图标：与文字的间距 */
.sidebar .nav-link i {
    margin-right: 0.5rem;
}

/* =============================================
   3. 卡片组件样式
   ============================================= */

/* 卡片：无边框，轻阴影效果 */
.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* 卡片头部：白底，底部边框，加粗标题 */
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    font-weight: 600;
}

/* =============================================
   4. 表格样式
   ============================================= */

/* 表格表头：去掉顶部边框 */
.table th {
    border-top: none;
}

/* 带边框表格的表头：浅灰背景，固定宽度20% */
.table-bordered th {
    background-color: #f8f9fa;
    width: 20%;
}

/* =============================================
   5. 背景色工具类
   ============================================= */

/* 浅蓝色背景（用于信息提示） */
.bg-primary-light {
    background-color: #e3f2fd;
}

/* 浅黄色背景（用于警告提示） */
.bg-warning-light {
    background-color: #fff8e1;
}

/* 浅红色背景（用于危险提示） */
.bg-danger-light {
    background-color: #ffebee;
}

/* =============================================
   6. 消息提示与弹窗
   ============================================= */

/* 警告框：底部外边距 */
.alert {
    margin-bottom: 1rem;
}

/* 闪存消息：右上角固定定位，悬浮显示 */
#msg-flash {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    min-width: 300px;
}

/* =============================================
   7. 库存状态标识
   ============================================= */

/* 库存偏低：黄色背景提醒 */
.stock-low {
    background-color: #fff3cd !important;
}

/* 库存严重不足/缺货：红色背景警告 */
.stock-critical {
    background-color: #f8d7da !important;
}

/* =============================================
   8. 仪表盘卡片特效
   ============================================= */

/* 仪表盘统计卡片：悬停上移动画 */
.dashboard-card {
    transition: transform 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
}

/* =============================================
   9. 交互元素
   ============================================= */

/* 确认操作按钮：手型光标 */
.confirm-action {
    cursor: pointer;
}