/*
 * AioEntityList 组件样式。
 *
 * 放在 wwwroot 而不是 AioEntityList.razor.css（scoped CSS），原因：
 * scoped CSS 会被编译成带哈希文件名的 bundle（AIOrm_Blazor.<hash>.bundle.scp.css），
 * 哈希每次构建都可能变，宿主应用没法写死 <link>；而未哈希的那个
 * AIOrm_Blazor.bundle.scp.css 并不在静态 Web 资产端点里（请求 404）。
 * 结果就是——引用 RCL 的 Blazor Web App 里，组件样式**静默丢失**。
 *
 * 所以这里走 wwwroot，宿主用固定路径引用：
 *     <link rel="stylesheet" href="_content/AIOrm_Blazor/aio-entity-list.css" />
 *
 * 所有选择器都以 aio- 前缀命名，不做 scoped 也不会撞名。
 */ /* AioEntityList 组件样式（scoped）。基础布局用 Bootstrap，只补充本组件特有部分。 */

.aio-entity-list {
	position: relative;
}

/* 可点击的行：悬停高亮 + 手型光标 */
.aio-row-clickable {
	cursor: pointer;
}

	.aio-row-clickable:hover > td {
		background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, .04));
	}

/* 表头排序按钮：去掉按钮默认外观，做成可点击的表头 */
.aio-sort-btn {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}

	.aio-sort-btn:hover {
		color: var(--bs-primary, #0d6efd);
		text-decoration: underline;
	}

.aio-sort-active {
	color: var(--bs-primary, #0d6efd);
	font-weight: 600;
}

.aio-sort-icon {
	font-size: .7em;
	line-height: 1;
	opacity: .8;
}

/* 重新加载时的顶部细进度条 */
.aio-loading-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, var(--bs-primary, #0d6efd), var(--bs-primary, #0d6efd) 60%, transparent);
	background-size: 200% 100%;
	animation: aio-loading-slide 1.1s linear infinite;
}

@keyframes aio-loading-slide {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -100% 0;
	}
}

/* 窄屏下单元格不换行，横向滚动由 .table-responsive 负责 */
.aio-entity-list td,
.aio-entity-list th {
	vertical-align: middle;
}

.aio-entity-list thead th {
	position: sticky;
	top: 0;
	background-color: #f5f5f5;
	z-index: 10;
	box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}
.aio-entity-list .table-responsive {
	height: 400px;
	max-height: 400px;
} 

/* 顶部工具栏：左搜索 / 右分页
   —— 强制**同一行**：三处都 flex-wrap: nowrap，宽度不够时横向滚动而不是换行。
      需求就是"不要分成上下几行"，所以宁可滚动也不换行。
   —— 左侧固定顺序：**关键字搜索框永远最左**，其次是搜索限定控件（"选择用户"等）。
      批量操作按钮**不在这里**，它渲染在表格下方（见 .aio-bulk）。 */
.aio-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: nowrap;
	margin-bottom: .5rem;
	/* ⚠ 这里**不能**写 overflow-x: auto。
	   CSS 的规则是一边 auto/scroll、另一边 visible 时，visible 会被算成 auto ——
	   于是工具栏两侧都成了滚动容器，里面任何绝对定位的浮层会被**按工具栏的
	   41px 高度裁掉**。BscDatePicker 的日历面板就是这种浮层：按钮点得动、
	   服务端也真的展开了（DOM 里能看到 bsc-is-open），但用户什么也看不见，
	   症状就是"点选择日期没反应"。
	   （下面 .aio-modal 用 position: fixed 躲开的也是同一个坑。）
	   极窄屏上宁可让页面整体横向滚动，也不能把浮层裁掉。 */
}

.aio-toolbar-left {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: nowrap;
	flex: 0 0 auto; /* 不被压缩，保持原宽 */
}

.aio-toolbar-right {
	display: flex;
	align-items: center;
	margin-left: auto; /* 始终靠右 */
	flex: 0 0 auto; /* 分页条不被压扁 */
	white-space: nowrap;
}

/* ===================== 搜索限定控件（AioFilter） ===================== */

.aio-filter {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* 日期范围（AioDateRangeFilter）：两个日期框 + "~" + 清除按钮。
   .aio-filter 只管"整体不压缩"，里面的间距得自己给 —— 不给的话
   两个日期框会和那个波浪号贴在一起。 */
.aio-daterange {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--bs-secondary-color, #6c757d);
}

/* 原来这里有 .aio-filter-badge（"已选 N"角标，描在触发按钮文字左边）。
   AioEntityPicker 换成 BscButton 之后改用组件自带的 BadgeCount
   （右上角），这个类就没有使用者了，删掉以免留下看着像在生效的死样式。 */

/* 弹窗：遮罩 + 居中面板。用 fixed 脱离工具栏的 overflow-x:auto，
   否则窄屏下弹窗会被工具栏的横向滚动裁掉。 */
.aio-modal-mask {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 1050;
}

.aio-modal {
	position: fixed;
	z-index: 1051;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	display: flex;
	flex-direction: column;
	background: var(--bs-body-bg, #fff);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: .5rem;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.aio-modal-head,
.aio-modal-foot {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .9rem;
	flex: 0 0 auto;
}

.aio-modal-head {
	border-bottom: 1px solid var(--bs-border-color, #dee2e6);
	justify-content: space-between;
}

.aio-modal-foot {
	border-top: 1px solid var(--bs-border-color, #dee2e6);
	justify-content: flex-end;
}

.aio-modal-body {
	padding: .9rem;
	overflow-y: auto; /* 内容长时只滚弹窗，不滚页面 */
}

	/* 弹窗里那个 AioEntityList 自己也有工具栏，去掉它和主列表的重复边框 */
	.aio-modal-body .aio-entity-list {
		border: 0;
	}

/* ===================== 操作按钮（Actions / BulkActions） ===================== */

/* 行内"操作"列：固定在最右，宽度随内容，不换行 */
.aio-actions-head,
.aio-actions-cell {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	vertical-align: middle;
}

	.aio-actions-cell > button + button {
		margin-left: .25rem; /* 按钮之间留缝 */
	}

/* 批量操作区：渲染在**表格下方**，不在顶部工具栏里。
   工具栏只留"关键字搜索 + 限定控件 + 分页条"这一行。
   布局：左侧批量操作按钮，右侧"已选 N 项（明细）+ 取消选择"。 */
.aio-bulk {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex-wrap: wrap;
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.aio-bulk-right {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto; /* 始终靠右 */
}

/* 跨页明细：（当前页面 2 项，其他页面 1 项）——只在真的有跨页选中时出现 */
.aio-bulk-detail {
	color: var(--bs-secondary-color, #6c757d);
	margin-left: .15rem;
}

.aio-bulk-count {
	font-size: .8125rem;
	color: var(--bs-secondary-color, #6c757d);
	white-space: nowrap;
}

/* ===================== 选择列（SelectionMode） ===================== */

.aio-select-head,
.aio-select-cell {
	width: 1%;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}

	.aio-select-cell .form-check-input {
		margin: 0;
		cursor: pointer;
	}

/* 选择模式下整行可点，鼠标样式要提示"能点"（与 aio-row-clickable 同一套） */
.aio-entity-list tr.aio-row-selected > td {
	background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, .04));
}

/* 搜索：输入框 + 按钮 + 清除，始终一行 */
.aio-search {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	flex-wrap: nowrap;
	flex: 0 0 auto;
}

/* 关键字框：宽度按"放得下 10 个汉字"定，不随容器拉伸。
   宽度走 BscTextInput 的 Width 参数（它内部设 --bsc-control-width），
   不再靠这里给 .form-control 定宽 —— 输入框已经是 BSC 的了。
   原来那条 :focus 时放宽到 14em 的规则一并去掉：Width 是固定值，
   而且"聚焦时变宽"会让工具栏整行抖一下，收益不抵。 */

/* 加载失败 / 操作失败提示里那个按钮的左间距。
   原来是 Bootstrap 的 ms-2，现在按钮是 BscButton —— 按 AioAction.CssClass
   定下的规矩，BSC 控件上不挂框架类名，所以这里用本库自己的类。 */
.aio-alert-action {
	margin-left: .5rem;
}

/* 窄屏（< 576px）先让"共 N 条，第 x/y 页"退场——分页控件里本来就有 x / y，
   信息不丢，但省出宽度保证搜索框和翻页按钮还在同一行。 */
@media (max-width: 575.98px) {
	.aio-pager-count {
		display: none;
	}
}

/* 表格下方可选的分页条 */
.aio-pager-bottom {
	margin-top: .5rem;
	display: flex;
	justify-content: flex-end;
}

/* 行标题列（ShowRowTitle + 实体的 primaryTextField） */
.aio-row-title {
	font-weight: 600;
	white-space: nowrap;
}

/* 标题列里的真实链接（RowUrl）。
   观感跟普通标题一样（不要下划线、不要变蓝），否则一行里只有标题是链接会很跳；
   悬停时给一点链接色暗示，让用户知道"这个能点"。 */
.aio-row-link {
	color: inherit;
	text-decoration: none;
}

	.aio-row-link:hover,
	.aio-row-link:focus {
		color: var(--bs-link-color, #0d6efd);
		text-decoration: underline;
	}

.aio-row-title-head {
	white-space: nowrap;
}