/* ============================================================
 * pages.css — 各业务页面专属样式
 * 依赖：base.css, layout.css, components.css
 * ============================================================ */

/* --- 通用卡片 --- */
.card {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: #00838f;
    border-radius: 2px;
}

/* --- 工作台仪表盘 --- */
.dashboard-header {
    margin-bottom: 20px;
}

.dashboard-header h2 {
    font-size: 20px;
    color: #262626;
    margin-bottom: 4px;
}

.dashboard-header p {
    font-size: 13px;
    color: #8c8c8c;
}

.chart-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* --- 图表占位容器 --- */
.chart-placeholder {
    height: 240px;
    position: relative;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 100%;
    padding: 0 8px;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.bar {
    width: 100%;
    max-width: 36px;
    background: linear-gradient(180deg, #4db6ac 0%, #00838f 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.6s ease;
    position: relative;
}

.bar::after {
    content: attr(data-value);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #595959;
    font-weight: 500;
}

.bar-label {
    font-size: 12px;
    color: #8c8c8c;
}

/* --- 饼图 --- */
.pie-chart {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 240px;
    padding: 0 12px;
}

.pie-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    flex-shrink: 0;
    --male-angle: 50%;
    background: conic-gradient(#1890ff 0 var(--male-angle), #eb2f96 var(--male-angle) 360deg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-circle::before {
    content: '';
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #595959;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* --- 最新入院列表 --- */
.recent-list {
    max-height: 280px;
    overflow-y: auto;
}

.recent-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.recent-item:last-child {
    border-bottom: none;
}

.recent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    margin-right: 12px;
    flex-shrink: 0;
}

.recent-avatar.male {
    background: #1890ff;
}

.recent-avatar.female {
    background: #eb2f96;
}

.recent-info {
    flex: 1;
}

.recent-name {
    font-size: 14px;
    color: #262626;
    font-weight: 500;
}

.recent-meta {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 2px;
}

.recent-time {
    font-size: 12px;
    color: #8c8c8c;
    white-space: nowrap;
}

/* --- 数据统计页 --- */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.stats-full {
    grid-column: 1 / -1;
}

/* 工作台头部（欢迎语 + 统计显隐按钮） */
.dashboard-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* 统计卡片显隐（工作台） */
.stats-hidden {
    display: none !important;
}

/* 统计范围筛选栏 */
.stats-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 13px;
    color: #595959;
}

.stats-filter select,
.stats-filter input[type="date"] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    color: #262626;
    background: #fff;
}

/* 统计范围筛选：控件占满一行，统计范围提示另起一行 */
.stats-filter .date-range-filter {
    flex: 1 1 100%;
}

.stats-range-tip {
    color: #8c8c8c;
}

/* --- 统一日期范围筛选（快捷区间 + 一体化日期框，参照截图样式）--- */
.date-range-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-range-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    color: #262626;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}

.quick-range-select:hover,
.quick-range-select:focus {
    border-color: #1677ff;
}

/* 一体化日期范围框：外层一个边框，内部两个无边框日期输入 */
.date-range-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
}

.date-range-box input[type="date"] {
    height: 26px;
    padding: 0;
    border: none;
    outline: none;
    font-size: 13px;
    color: #262626;
    background: transparent;
}

.date-range-sep {
    color: #8c8c8c;
    font-size: 13px;
}

.charge-date-filter {
    margin-bottom: 12px;
}

/* 月度明细表滚动区域 */
.month-table-wrap {
    max-height: 320px;
    overflow-y: auto;
}

/* --- 系统设置页 --- */
/* 顶部标签栏：集中承载收费项目 / 身份权限 / 日志记录项 等设置功能 */
.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 16px;
}

.settings-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 14px;
    color: #595959;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}

.settings-tab:hover {
    color: #1890ff;
}

.settings-tab.active {
    color: #1890ff;
    border-bottom-color: #1890ff;
    font-weight: 600;
}

.settings-tab-panel {
    display: none;
}

.settings-tab-panel.active {
    display: block;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section h3 {
    font-size: 15px;
    color: #262626;
    margin-bottom: 16px;
}

.recorder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fafafa;
}

.recorder-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    padding: 4px 12px 4px 14px;
    font-size: 13px;
    color: #262626;
}

.recorder-tag .remove {
    cursor: pointer;
    color: #bfbfbf;
    font-size: 14px;
    line-height: 1;
    padding: 2px;
}

.recorder-tag .remove:hover {
    color: #ff4d4f;
}