/* 孝感中亚城市燃气发展有限公司 - 管理后台样式 */

/* 侧边栏 */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    background-color: #2c3e50;
    color: white;
    overflow-y: auto;
    z-index: 1000;
}

.sidebar-header {
    padding: 20px;
    background-color: #1e272e;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-title {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.sidebar-menu {
    padding: 0;
    list-style: none;
}

.sidebar-menu-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-menu-item a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.3s;
}

.sidebar-menu-item a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* 激活态只作用于“直接子级”的锚点，避免选中一个子项时整组菜单都变蓝 */
.sidebar-menu-item.active > a {
    color: white;
}

/* 含子菜单的分组标题（业务/系统/内容管理）：激活时仅做轻微提示，不整块变蓝 */
.sidebar-menu-item.has-submenu.active > a {
    background-color: rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--primary-color);
    color: white;
}

/* 无子菜单的顶层菜单（如仪表盘）：被点击时整块变蓝 */
.sidebar-menu-item:not(.has-submenu).active > a {
    background-color: var(--primary-color);
    color: white;
    border-left: 3px solid rgba(255, 255, 255, 0.85);
}

.sidebar-menu-item:not(.has-submenu).active > a:hover {
    background-color: var(--primary-color);
    color: white;
}

/* 仅“被点击”的具体子菜单项整块变蓝，其余保持原样 */
.sidebar-submenu-item.active > a {
    background-color: var(--primary-color);
    color: #fff;
    border-left: 3px solid rgba(255, 255, 255, 0.85);
}

.sidebar-submenu-item.active > a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.sidebar-menu-icon {
    width: 30px;
    margin-right: 10px;
    text-align: center;
}

.sidebar-submenu {
    list-style: none;
    padding: 0;
    background-color: rgba(0,0,0,0.2);
}

.sidebar-submenu-item a {
    padding: 12px 20px 12px 60px;
    font-size: 14px;
}

/* 主内容区 */
.main-content {
    margin-left: 250px;
    padding: 20px;
    min-height: 100vh;
    background-color: var(--light-bg);
}

@media (max-width: 768px) {
    .sidebar {
        width: 200px;
        transform: translateX(-200px);
        transition: transform 0.3s;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
}

/* 顶部导航 */
.top-navbar {
    background-color: white;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-navbar-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--dark-text);
}

.top-navbar-user {
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
}

.user-name {
    font-weight: 500;
}

/* 统计卡片 */
.stat-card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.stat-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    margin-bottom: 15px;
}

.stat-card-icon.primary {
    background-color: var(--primary-color);
}

.stat-card-icon.success {
    background-color: var(--success-color);
}

.stat-card-icon.warning {
    background-color: var(--warning-color);
}

.stat-card-icon.danger {
    background-color: var(--danger-color);
}

.stat-card-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--dark-text);
    margin-bottom: 5px;
}

.stat-card-label {
    font-size: 14px;
    color: var(--light-text);
}

/* 数据表格 */
.data-table {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.data-table-header {
    background-color: white;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-table-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--dark-text);
}

.data-table-actions {
    display: flex;
    gap: 10px;
}

.data-table-body {
    overflow-x: auto;
}

/* 搜索框 */
.search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-input {
    flex: 1;
    max-width: 300px;
}

/* 分页 */
.pagination-wrapper {
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    gap: 5px;
}

.action-btn {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* 详情模态框 */
.detail-modal .modal-body {
    padding: 30px;
}

.detail-item {
    display: flex;
    margin-bottom: 15px;
}

.detail-label {
    width: 120px;
    font-weight: 500;
    color: var(--light-text);
}

.detail-value {
    flex: 1;
    color: var(--dark-text);
}

/* 登录页面 */
.login-container {
    max-width: 400px;
    margin: 100px auto;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.login-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
}

.login-logo {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo img {
    height: 60px;
}

@media (max-width: 768px) {
    .login-container {
        margin: 50px 20px;
        padding: 30px 20px;
    }
}

/* ========== 业务管理列表页优化 ========== */

/* 筛选/搜索卡片：保持静态稳定，移除悬浮上浮（对筛选条而言过于跳动） */
.card.filter-card {
    box-shadow: var(--shadow-sm);
}
.card.filter-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}
.card.filter-card .card-body {
    padding: 20px 24px;
}

/* 列表表格标题栏（与仪表盘风格统一） */
.data-table-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.data-table-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.data-table-title i {
    color: var(--primary-color);
    font-size: 20px;
}
.data-table-count {
    background: var(--primary-light);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* 表格内空状态：加大留白，弱化提示 */
.table td.text-center.text-muted {
    padding: 48px 0;
    color: var(--text-tertiary) !important;
    font-size: 15px;
}

/* 操作列按钮组：统一间距与换行 */
.table .action-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

/* ========== 全局界面增强（2026-08-23 统一优化） ========== */

/* 卡片统一质感 */
.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
/* 筛选条保持静态稳定（不随悬浮上浮） */
.card.filter-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

/* 骨架屏（加载占位，可复用） */
.skeleton-line {
    background: linear-gradient(90deg, #eef1f5 25%, #e2e6ec 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.3s ease infinite;
    border-radius: 6px;
}
@keyframes skeleton-loading {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* 数据表格统一美化 */
.data-table {
    border-radius: 14px;
}
.data-table .table {
    margin-bottom: 0;
}
.data-table .table thead th {
    background: #f8fafc;
    color: var(--light-text);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-color);
}
.data-table .table tbody tr {
    transition: background-color .12s ease;
}
.data-table .table tbody tr:hover {
    background-color: #f8fafc;
}

/* 按钮统一圆角与轻悬浮 */
.btn {
    border-radius: 8px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.action-btn, .btn-sm {
    border-radius: 7px;
}
.btn-outline-primary:hover, .btn-outline-info:hover,
.btn-outline-danger:hover, .btn-outline-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* 徽章统一胶囊 */
.badge {
    border-radius: 20px;
    font-weight: 500;
    padding: 4px 10px;
}

/* 表单控件统一圆角与聚焦 */
.form-control, .form-select {
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: #1a3c6e;
    box-shadow: 0 0 0 .2rem rgba(26,60,110,.12);
}

/* 弹窗统一质感 */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.modal-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eef3f8 100%);
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
}

/* 滚动条美化（Webkit 内核） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: #c3ccd6;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8b4c0;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* 空状态通用 */
.empty-hint {
    text-align: center;
    color: var(--text-tertiary);
    padding: 48px 0;
}
.empty-hint i {
    font-size: 42px;
    display: block;
    margin-bottom: 10px;
}

/* 通用小工具 */
.min-w-0 {
    min-width: 0;
}
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 统计卡片轻悬浮（复用 .stat-card 的页面自动受益） */
.stat-card {
    border-radius: 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

/* 表格通用状态：加载骨架 / 空态 / 错误态（配合 common.js 的 renderTable*） */
.skeleton-row td { padding: 14px 12px; }
.skeleton-row .skeleton-line { display: block; height: 12px; }
.table-empty, .table-error { text-align: center; padding: 42px 12px !important; color: var(--text-muted, #6c757d); }
.table-empty i, .table-error i { font-size: 30px; display: block; margin-bottom: 8px; opacity: .55; }
.table-error { color: #dc3545; }

/* ============ 仪表盘「待处理业务」横向铺开 ============ */
.pending-business-wrap { display: flex; flex-direction: column; gap: 16px; }
.pending-business-panel {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    padding: 14px 16px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.pending-business-panel:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transform: translateY(-1px);
}
.pending-business-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pending-business-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pending-business-title .badge { font-weight: 600; }
.pending-count { min-width: 22px; text-align: center; }

/* 横向轨道：待处理单据横向排列，单号始终完整可见 */
.pending-business-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.pending-business-track::-webkit-scrollbar { height: 8px; }
.pending-business-track::-webkit-scrollbar-thumb { background: #d4d9e2; border-radius: 8px; }
.pending-business-track::-webkit-scrollbar-track { background: #f2f4f8; }

.pending-card {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 300px;
    border: 1px solid #eef0f4;
    border-left: 4px solid #4e73df;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fafbfd;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pending-card:hover { background: #f3f6ff; border-color: #dbe3fb; }
.pending-cell { display: flex; flex-direction: column; line-height: 1.25; }
.pending-cell-label { font-size: 11px; color: #8a92a6; }
.pending-cell-value { font-size: 13px; color: #2c3340; word-break: break-all; }

/* 单号高亮，保证完整可见 */
.pending-cell:first-child .pending-cell-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: #1f3a8a;
    font-size: 13px;
}

.pending-empty {
    width: 100%;
    text-align: center;
    color: var(--text-muted, #6c757d);
    padding: 18px 12px;
    font-size: 13px;
}
.pending-skeleton { display: flex; gap: 12px; }
.pending-skeleton .skeleton-line { height: 16px; border-radius: 6px; }

.table-error i { opacity: .85; }