/* ========================================
   课后服务综合管理系统 - 全局统一样式
   ======================================== */

/* --- 基础布局 --- */
body {
    background-color: #f5f7fa;
    min-height: 100vh;
    color: #333;
}

/* --- 导航栏 --- */
.navbar { font-size: 1rem !important; }
.navbar-brand { font-weight: 700; font-size: 1.25rem !important; }
.navbar .nav-link { font-size: 1rem !important; font-weight: 500; }

/* --- 卡片 --- */
.card { border: none; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.card-header { 
    background: #fafbfc; 
    border-bottom: 1px solid #eee; 
    font-weight: 600; 
    font-size: 14px;
    padding: 10px 16px;
}
.card-footer {
    background: #fafbfc;
    border-top: 1px solid #eee;
    padding: 10px 16px;
}

/* --- 页面标题 --- */
.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a1a2e;
}
.page-title i {
    margin-right: 6px;
    opacity: 0.8;
}

/* --- 搜索/筛选栏 --- */
.filter-bar {
    padding: 10px 16px;
}
.filter-bar .form-control,
.filter-bar .form-select {
    font-size: 14px;
    min-width: 120px;
}

/* --- 工具栏（添加/导出/批量操作按钮行）--- */
.toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.toolbar .btn { font-size: 14px; }

/* --- 统一表格 --- */
.data-table {
    font-size: 15px;
    margin-bottom: 0;
}
.data-table thead th {
    background: #f8f9fb;
    border-bottom: 2px solid #e9ecef;
    font-weight: 600;
    font-size: 14px;
    color: #555;
    padding: 10px 14px;
    white-space: nowrap;
}
.data-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    line-height: 1.6;
}
.data-table tbody tr:hover {
    background: #f0f5ff;
}
.data-table .empty-row td {
    padding: 40px 12px;
    color: #999;
}

/* --- 状态徽章 --- */
.badge { font-weight: 500; font-size: 13px; padding: 4px 8px; border-radius: 4px; }
.notification-badge { font-size: 0.65rem; vertical-align: top; margin-left: 2px; }

/* --- 表单控件 --- */
.form-control, .form-select { border-radius: 6px; font-size: 14px; }
.form-control:focus, .form-select:focus { border-color: #6c8cef; box-shadow: 0 0 0 2px rgba(108,140,239,0.15); }
.form-control-sm, .form-select-sm { font-size: 13px; }

/* --- 按钮 --- */
.btn { border-radius: 6px; font-size: 14px; padding: 6px 14px; transition: all 0.15s; }
.btn-sm { font-size: 13px; padding: 4px 10px; }

/* 按钮含图标时垂直居中对齐 */
.btn i + span,
.btn i + text,
.btn > i:first-child { vertical-align: middle; }
.btn { display: inline-flex; align-items: center; gap: 4px; }

/* --- 统计卡片 --- */
.stat-card .card-body h2 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.stat-card .card-body small { font-size: 12px; opacity: 0.9; }

/* --- 分页 --- */
.pagination { font-size: 13px; }
.page-link { padding: 4px 10px; border-radius: 4px; }

/* --- 提示信息 --- */
.alert { border-radius: 8px; }

/* --- 空状态 --- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #999;
}
.empty-state i { font-size: 48px; opacity: 0.3; }
.empty-state p { margin-top: 12px; font-size: 14px; }

/* --- 统一卡片内表格容器 --- */
.table-card .card-body { padding: 0; }
.table-card .table-responsive { padding: 0; }

/* --- 操作列按钮组 --- */
.action-btns { display: flex; gap: 4px; flex-wrap: nowrap; }

/* ========================================
   移动端适配 (手机 / 平板)
   ======================================== */

/* --- 桌面端导航优化 (≥992px) --- */
@media (min-width: 992px) {
    .navbar .container { max-width: 100%; padding: 0 16px; }
    .navbar .nav-link { white-space: nowrap; }
    .navbar .dropdown-menu { min-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.1); }
    .navbar .dropdown-item { white-space: nowrap; }
}

/* --- 平板适配 (< 992px) --- */
@media (max-width: 991.98px) {
    /* 导航栏 */
    .navbar .container { max-width: 100%; padding: 0 12px; }
    .navbar-brand { font-size: 1rem !important; }
    
    /* 导航下拉在手机上全宽 */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        width: 100%;
        min-width: 200px;
        border: none;
        box-shadow: none;
        background: rgba(255,255,255,0.08);
        padding-left: 1.5rem;
    }
    .navbar-collapse .dropdown-item {
        color: rgba(255,255,255,0.85);
        padding: 6px 12px;
        white-space: nowrap;
    }
    .navbar-collapse .dropdown-item:hover {
        background: rgba(255,255,255,0.1);
    }
    .navbar-collapse .dropdown-divider {
        border-color: rgba(255,255,255,0.1);
    }
    
    /* 主内容区减少边距 */
    main.container { padding: 12px !important; max-width: 100%; }
    /* 移动端导航项不换行 */
    .navbar .nav-link { white-space: nowrap; }
}

/* --- 手机适配 (< 768px) --- */
@media (max-width: 767.98px) {
    /* 筛选栏：竖向排列 */
    .filter-bar .d-flex.gap-2,
    .filter-bar form .row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .filter-bar .d-flex.gap-2 > *,
    .filter-bar form .row > [class*="col-"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    .filter-bar .form-select,
    .filter-bar .form-control {
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* 工具栏：紧凑排列 */
    .toolbar { gap: 6px; }
    .toolbar .btn { font-size: 13px; padding: 5px 10px; }
    
    /* 表格卡片 - 横向滚动 + 固定首列(checkbox) */
    .table-card .table-responsive {
        margin: 0 -12px;
        padding: 0;
    }
    .table-card .data-table {
        min-width: 700px; /* 保证表格最小可读宽度 */
    }
    
    /* 分页紧凑 */
    .pagination .page-link { padding: 4px 8px; font-size: 12px; }
    
    /* 表单页面 - 标签和输入全宽 */
    .form-label { font-size: 14px; font-weight: 600; }
    
    /* 状态标签筛选按钮紧凑 */
    .d-flex.gap-2.mb-3 .btn-sm {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    /* 页面标题 */
    .page-title { font-size: 1.15rem; margin-bottom: 0.75rem; }
}

/* --- 小屏手机适配 (< 576px) --- */
@media (max-width: 575.98px) {
    /* 导航栏品牌缩写 */
    .navbar-brand { font-size: 0.95rem !important; }
    
    /* 统计卡片 */
    .stat-card .card-body h2 { font-size: 1.3rem; }
    
    /* 表格字体 */
    .data-table { font-size: 13px; }
    .data-table thead th { padding: 8px 6px; font-size: 12px; }
    .data-table tbody td { padding: 8px 6px; }
    
    /* 页面标题 */
    .page-title { font-size: 1.05rem; }
    
    /* 工具栏按钮更紧凑 */
    .toolbar .btn { font-size: 12px; padding: 4px 8px; }
    
    /* 主内容极窄时全宽 */
    main.container { padding: 8px !important; }
    
    /* 卡片减少圆角阴影 */
    .card { border-radius: 8px; }
    
    /* 统计卡片内文字居中缩放 */
    .stat-card .card-body { padding: 12px 8px !important; }
    .stat-card .card-body h2 { font-size: 1.2rem; }
    
    /* 分页信息换行 */
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start !important;
    }
    
    /* alert 圆角缩小 */
    .alert { border-radius: 6px; padding: 8px 12px; font-size: 13px; }
    
    /* badge 缩小 */
    .badge { font-size: 11px; padding: 3px 6px; }
}

/* --- 移动端卡片列表视图（可选，给特定页面用）--- */
@media (max-width: 767.98px) {
    /* 默认隐藏移动卡片视图，显示表格 */
    .mobile-card-list { display: none; }
    .desktop-table-view { display: block; }
    
    /* 如果页面声明了 .use-mobile-cards，则切换显示 */
    .use-mobile-cards .mobile-card-list { display: block; }
    .use-mobile-cards .desktop-table-view { display: none; }
}
@media (min-width: 768px) {
    .mobile-card-list { display: none; }
    .desktop-table-view { display: block; }
}

/* --- 移动端数据卡片样式 --- */
.mobile-card-list .list-group-item {
    border-left: 3px solid #6c8cef;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px;
    background: #fff;
}
.mobile-card-list .list-group-item .mc-title {
    font-weight: 600;
    font-size: 15px;
    color: #1a1a2e;
}
.mobile-card-list .list-group-item .mc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
    padding: 2px 0;
}
.mobile-card-list .list-group-item .mc-row .mc-label {
    color: #999;
    min-width: 60px;
}
.mobile-card-list .list-group-item .mc-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}



/* --- 移动端卡片视图增强 --- */
@media (max-width: 767.98px) {
    /* 卡片视图：每行显示的关键信息 */
    .mobile-card-list .list-group-item {
        border-left: 3px solid #6c8cef;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 14px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .mobile-card-list .mc-title {
        font-weight: 700;
        font-size: 16px;
        color: #1a1a2e;
        margin-bottom: 6px;
    }
    .mobile-card-list .mc-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #555;
        padding: 3px 0;
    }
    .mobile-card-list .mc-row .mc-label {
        color: #999;
        min-width: 70px;
        font-size: 12px;
    }
    .mobile-card-list .mc-actions {
        display: flex;
        gap: 6px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
        flex-wrap: wrap;
    }
    .mobile-card-list .mc-actions form {
        display: inline;
    }
    /* 移动端卡片：标题行（姓名+状态并排）*/
    .mobile-card-list .mc-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    .mobile-card-list .mc-header .mc-title {
        font-weight: 700;
        font-size: 15px;
        color: #1a1a2e;
        margin-bottom: 0;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-card-list .mc-header .mc-status-badges {
        display: flex;
        gap: 4px;
        margin-left: 8px;
        flex-shrink: 0;
    }
    .mobile-card-list .mc-status-badges .badge {
        font-size: 11px;
        padding: 3px 6px;
    }
    /* 移动端卡片：缴费徽章 */
    .mobile-card-list .mc-pay-badges {
        display: inline-flex;
        gap: 3px;
    }
    .mobile-card-list .mc-pay-badges .badge {
        font-size: 11px;
        padding: 2px 5px;
    }
    /* 移动端卡片：值加粗 */
    .mobile-card-list .mc-row .mc-value strong {
        color: #1a1a2e;
    }
    
    /* 筛选栏 select 完整宽度 */
    .filter-bar select.form-select-sm.w-auto {
        width: 100% !important;
    }
    .filter-bar input.form-control-sm {
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Dashboard 统计卡片优化 */
    .stat-card .card-body {
        padding: 10px 6px !important;
    }
    .stat-card .card-body h3,
    .stat-card .card-body h2 {
        font-size: 1.3rem !important;
    }
    .stat-card .card-body small {
        font-size: 11px !important;
    }
    
    /* 分页在底部更紧凑 */
    .card-footer .d-flex {
        flex-direction: column !important;
        gap: 8px;
    }
    .card-footer .pagination {
        justify-content: center;
    }
    
    /* 表格最小宽度根据内容动态 */
    .table-responsive .data-table {
        min-width: 600px;
    }
    
    /* 工具栏按钮组换行 */
    .toolbar {
        gap: 6px !important;
    }
    .toolbar .btn {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    
    /* 模态框在手机上全屏 */
    .modal-dialog {
        margin: 8px;
    }
}

/* --- 小屏手机增强 (< 576px) --- */
@media (max-width: 575.98px) {
    .mobile-card-list .list-group-item {
        padding: 12px 10px;
        border-radius: 6px;
    }
    .mobile-card-list .mc-title {
        font-size: 15px;
    }
    .mobile-card-list .mc-row {
        font-size: 12px;
    }
    
    /* 页面标题更紧凑 */
    .page-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem;
    }
    
    /* 卡片头部更紧凑 */
    .card-header {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}