/* static/css/style.css */

/* 确保内容在小屏上更好地展示 */
.container { 
    max-width: 1400px; 
    margin-top: 10px; /* 调整顶部间距 */
    padding-left: 5px; 
    padding-right: 5px;
}
/* 确保操作列不换行 */
.table td:last-child { 
    white-space: nowrap; 
}
/* 确保表格在小屏幕上可水平滚动 */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }
}
/* 调整标题样式 */
h2 {
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}



/* --- 表格固定列样式 (仅在小屏幕/中屏幕生效) --- */

/* 1. 基础设置：允许滚动 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
}

/* 2. 定义哪些情况下启用固定列 (屏幕宽度 < 1200px 时) */
@media (max-width: 1199.98px) {
    
    /* 启用固定定位 */
    .sticky-col {
        position: -webkit-sticky;
        position: sticky;
        background-color: #fff; /* 必须有背景色遮挡滚动内容 */
        z-index: 2;
    }

    /* 表头层级要更高 */
    th.sticky-col {
        z-index: 3;
        background-color: #f8f9fa;
    }

    /* --- 左侧固定定位 --- */
    .col-hospital-id {
        left: 0;
        width: 90px;
        min-width: 90px;
        border-right: 1px solid #dee2e6;
    }

    .col-name {
        left: 90px;
        width: 80px;
        min-width: 80px;
        border-right: 2px solid #dee2e6; /* 分割线 */
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1); /* 阴影 */
    }

    /* --- 右侧固定定位 --- */
    .col-action {
        right: 0;
        width: 130px;
        min-width: 130px;
        border-left: 2px solid #dee2e6; /* 分割线 */
        box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1); /* 阴影 */
    }

    /* --- 修复斑马纹背景 --- */
    /* 在固定模式下，手动设置偶数行的背景色，以模拟 Bootstrap 的 striped 效果 */
    .table-striped > tbody > tr:nth-of-type(odd) > td.sticky-col {
        background-color: #f2f2f2; 
    }
}

/* 3. 大屏幕设置 (屏幕宽度 >= 1200px 时) - 修正版 */
@media (min-width: 1200px) {
    /* 取消固定定位、阴影和背景色 */
    .sticky-col {
        position: static !important;
        box-shadow: none !important;
        background-color: transparent !important; /* 让背景色跟随 tr */
    }
    
    /* 针对具体的列，重置宽度，并只移除我们添加的【竖向】分割线 */
    .col-hospital-id, 
    .col-name {
        width: auto;
        min-width: auto;
        border-right: none !important; /* 关键：只去掉右边框，保留底边框！ */
    }

    .col-action {
        width: auto;
        min-width: auto;
        border-left: none !important; /* 关键：只去掉左边框，保留底边框！ */
    }
}