/* 化工管理平台 - 主样式 */
:root {
    --primary: #0d6efd;
    --sidebar-width: 220px;
}

body { background: #f4f6f9; }

/* 侧边栏 */
.sidebar {
    min-height: calc(100vh - 56px);
    background: #1e2a38;
    padding-top: 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}

.sidebar .nav-link {
    color: #c8d6e5;
    padding: 10px 16px;
    border-radius: 6px;
    margin: 2px 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--primary);
    color: #fff !important;
}

/* 子菜单样式 */
.sidebar .sub-menu .nav-link {
    color: #a0b0c0;
    padding: 7px 16px 7px 32px;
    font-size: 13px;
    margin: 1px 8px;
}

.sidebar .sub-menu .nav-link:hover,
.sidebar .sub-menu .nav-link.active {
    background: rgba(13, 110, 253, 0.3);
    color: #fff !important;
}

.sidebar-menu-group > a .bi-chevron-down {
    transition: transform 0.2s;
}

.sidebar-menu-group > a[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* 卡片 */
.card { border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-radius: 10px; }
.card-header { border-radius: 10px 10px 0 0 !important; font-weight: 600; }

/* 页面标题 */
.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e2a38;
    padding: 16px 0 8px;
    border-bottom: 3px solid var(--primary);
    margin-bottom: 20px;
}

/* 数据表格 */
.table th { background: #f0f4f8; font-weight: 600; }
.table-hover tbody tr:hover { background: #e8f0fe; }

/* 统计卡片 */
.stat-card {
    background: linear-gradient(135deg, var(--primary) 0%, #0a58ca 100%);
    color: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.stat-card.green  { background: linear-gradient(135deg, #198754, #146c43); }
.stat-card.orange { background: linear-gradient(135deg, #fd7e14, #dc6502); }
.stat-card.red    { background: linear-gradient(135deg, #dc3545, #b02a37); }

.stat-card .stat-num { font-size: 2rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.85rem; opacity: 0.9; }

/* 进度条 */
.progress { height: 10px; border-radius: 5px; }

/* 上传区域 */
.upload-area {
    border: 2px dashed #adb5bd;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.upload-area:hover { border-color: var(--primary); }

/* 风险标签 */
.badge-high { background: #dc3545; }
.badge-mid  { background: #fd7e14; }
.badge-low  { background: #198754; }

/* 甘特图容器 */
.gantt-container { overflow-x: auto; }
.gantt-bar { height: 24px; border-radius: 4px; background: var(--primary); opacity: 0.85; }

/* 响应式 */
@media (max-width: 768px) {
    .sidebar { position: fixed; z-index: 999; width: 240px; transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
}

/* Mobile navigation fixes: floating account box and scrollable sidebar */
@media (max-width: 768px) {
    body { padding-top: 56px; }
    .navbar.fixed-top { z-index: 1045; }
    .navbar .container-fluid { position: relative; }
    #navbarTop.collapsing,
    #navbarTop.collapse.show {
        position: fixed;
        top: 62px;
        right: 10px;
        left: auto;
        width: min(260px, calc(100vw - 20px));
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        background: #0d6efd;
        border-radius: 8px;
        box-shadow: 0 10px 28px rgba(0,0,0,.28);
        padding: 8px 10px;
        z-index: 1060;
    }
    #navbarTop .navbar-nav { align-items: stretch !important; }
    #navbarTop .nav-link,
    #navbarTop .navbar-text { padding: 8px 10px; white-space: normal; }
    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        z-index: 1040;
        width: 260px;
        min-height: 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .2s ease;
        padding-bottom: 72px;
    }
    .sidebar.show { transform: translateX(0); }
    .sidebar .position-sticky {
        position: static !important;
        top: auto !important;
        max-height: none;
        overflow: visible;
    }
    main.col-md-10 { width: 100%; margin-left: 0 !important; }
}