@supports not selector(::-webkit-scrollbar) {
    .scroll {
        scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0);
        scrollbar-width: thin;
    }
}

/* 主内容加宽:去掉 BootstrapBlazor 标签页/full 主体的左右留白,让内容顶满可用宽度 */
.tabs-body-content,
.tab-content,
.layout-main > .tabs-body,
.layout-main > .row,
.layout-main {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.tabs-body .tabs-body-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
/* 宽屏下让行内容撑满整行 */
.layout-main .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 主内容区弹性列布局:让页面内容占满可用高度,适配1920*1080不出现页面级滚动条 */
.layout-main {
    display: flex;
    flex-direction: column;
}

/* 布局容器固定为视口高度与宽度(原来是 min-height:100vh 随内容增长),整页不再出现滚动条。
   width:100vw 含滚动条槽位:即使出现页面级纵向滚动条,布局(含顶部蓝条)宽度也不再被收窄,
   避免蓝条右侧露白。body overflow:hidden 会裁掉由此多出的横向溢出,不会出现横向滚动条。 */
.layout {
    height: 100vh;
    width: 100vw;
}

/* 整页隐藏横向/纵向滚动条:页面采用固定视口布局 + 内容区内滚,不再出现下端(横向)与右端(纵向)页面级滚动条 */
html,
body {
    overflow: hidden;
}

/* 表头吸顶:已拆分为独立表头不参与滚动(见 .appt-header),此处为兼容其他页面保留 */
.table-scroll thead,
.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 15;
    background-color: #f8f9fa;
}

/* BootstrapBlazor 内嵌标签页内容包装:铺满可视高度,唤醒标记为 flex 列布局,
   使激活页的卡片能 flex:1 撑满,数据少(无滚动条)时表头顶部、分页贴底 */
.tabs-body .tabs-body-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 预约信息卡片:flex 撑满标签页内容区,表头固定在顶部、分页贴底部 */
.appt-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 卡片顶部(标题栏/搜索区)不参与伸缩,高度恒定,保证表头位置稳定 */
.appt-card .card-header,
.appt-card .card-body {
    flex: 0 0 auto;
}

/* 数据区内部滚动,表头与数据同一表格,列宽对齐不错位 */
.appt-card .table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 表头 sticky 吸顶:数据滚动时吸在数据区顶部,数据不满时也固定在顶部不下移;文字水平居中 */
.appt-card .table-scroll .table thead th {
    position: sticky;
    top: 0;
    z-index: 16;
    background-color: #f8f9fa;
    text-align: center;
}

/* 数据单元格水平居中,与居中的表头对齐 */
.appt-card .table-scroll .table tbody td {
    text-align: center;
}

/* 预约列表分页栏:固定在卡片底部(卡片占满 main,即贴 main 底),不随表体滚动 */
.appt-pager {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid #e9ecef;
    background: #fff;
}

.table-scroll > table {
    margin-bottom: 0;
}

/* 侧边栏左上角 Logo 图标:外框容器与图标同尺寸实心贴合,图标在框内按原始比例居中,不裁切不拉伸 */
.layout-banner .layout-logo {
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, #0a68ff, #00aaff);
    border-radius: 8px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* 侧边栏 Banner 布局:Logo + 系统标题横排,标题过长自动换行完整显示(仅排版,不含军绿配色) */
.layout-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    min-width: 0;
}
.layout-banner .layout-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
    font-size: 15px;
    font-weight: 600;
    color: inherit;
}
/* 顶部蓝条系统Logo(盾牌):order:-4 确保位于顶部蓝条最左侧(系统名称、汉堡按钮之前);
   加大到40px,配合名称加宽把汉堡按钮整体往右推 */
.layout-header .header-logo {
    order: -4;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, #0a68ff, #00aaff);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .55);
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 顶部导航栏系统标题:盾牌加大+名称加宽,让"盾牌+名称"组合超过侧栏宽度,
   把汉堡按钮整体往右推(组合右缘=侧栏宽+40px);字号同步加大到18px */
.layout-header .header-title,
.header .header-title {
    flex: 0 0 auto;
    order: -3;
    width: calc(var(--bb-layout-sidebar-width, 300px) - 32px);
    align-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    z-index: 10;
}

/* 顶部蓝条铺满整个视口宽度(经典布局:蓝条在最顶,侧栏在蓝条下方)。
   BootstrapBlazor 默认蓝条只在主内容区宽度内(左侧被侧栏并排占据,蓝条视觉上"没顶到头");
   此处将蓝条改为视口固定定位(left:0;right:0),从屏幕最左一直铺到最右。 */
.layout .layout-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 1035 !important;
}

/* 蓝条脱离文档流后,侧栏与主内容区整体下移一个头部高度,避免被蓝条遮挡;
   侧栏高度同步扣掉头部高度,避免底部多出被裁掉的 50px。
   注:直接匹配 .layout-side,兼容有无 .has-sidebar 包装层的两种渲染结构。 */
.layout .layout-side,
.layout .layout-main {
    margin-top: var(--bb-layout-header-height) !important;
}
.layout .layout-side {
    height: calc(100vh - var(--bb-layout-header-height)) !important;
}

/* 折叠态侧栏:仅"未悬停"时固定为折叠宽度(按住 CSS 变量+width 三剑客,否则会被
   SidebarMinWidth 等钳制在大宽度导致"只藏字不移动")。鼠标移上去恢复默认展开。
   注意不要对 :hover 也设折叠值,否则会取消 BootstrapBlazor 的悬停展开。 */
.layout.is-collapsed .layout-side:not(:hover),
.layout.is-collapse .layout-side:not(:hover) {
    --bb-layout-sidebar-width: var(--bb-layout-sidebar-collapse-width, 70px);
    width: var(--bb-layout-sidebar-collapse-width, 70px) !important;
    min-width: var(--bb-layout-sidebar-collapse-width, 70px) !important;
    max-width: var(--bb-layout-sidebar-collapse-width, 70px) !important;
}

/* 折叠态"未悬停"时菜单项图标水平居中,去掉左右内边距,避免图标显示不全/被裁切;
   悬停展开后再让文字正常显示。 */
.layout.is-collapsed .layout-side:not(:hover) .menu .nav-link,
.layout.is-collapse .layout-side:not(:hover) .menu .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
}
.layout.is-collapsed .layout-side:not(:hover) .menu .menu-icon,
.layout.is-collapse .layout-side:not(:hover) .menu .menu-icon {
    margin: 0 auto !important;
    width: auto;
}

/* 折叠态"未悬停"时:把 Banner 左上角盾牌 Logo 悬浮显示在侧栏顶部(汉堡按钮所在列、
   位于按钮左/下方),垂直/水平居中并保留四周间距,logo 加描边与阴影作为间隔环,
   避免被页头或按钮遮挡、不贴边不裁切;悬停展开后正常回流。 */
.layout.is-collapsed .layout-side:not(:hover) .layout-banner,
.layout.is-collapse .layout-side:not(:hover) .layout-banner {
    overflow: visible;
    padding: 14px 0 10px;
    gap: 0;
    justify-content: center;
}
.layout.is-collapsed .layout-side:not(:hover) .layout-banner .layout-logo,
.layout.is-collapse .layout-side:not(:hover) .layout-banner .layout-logo {
    display: inline-flex;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* 顶部收缩(汉堡)按钮(真实类名 .layout-header-bar):左侧固定、不参与挤压,
   order:-2 让汉堡按钮排在盾牌Logo、系统名称之后、首页标签之前;
   置于顶层带不透明底,折叠时也不会被其他元素盖住右侧,右侧分隔线保持完整 */
.layout-header .layout-header-bar {
    flex-shrink: 0;
    order: -2;
    position: relative;
    z-index: 30;
    background: var(--bb-layout-headerbar-background, #606266);
    border-right: 1px solid rgba(0, 0, 0, .12);
    border-radius: var(--bs-border-radius);
}

/* 登录页 Logo 图标:白字蓝底渐变圆角方块,与侧边栏 Logo 风格一致 */
.login-logo {
    font-size: 34px;
    color: #fff;
    background: linear-gradient(135deg, #0a68ff, #00aaff);
    border-radius: 14px;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 权限分配 ListView:分组标题与列表项样式 */
.listview .accordion-header {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e9ecef;
}
.listview .listview-item {
    border-bottom: 1px solid #f5f5f5;
}
.listview .listview-item:last-child {
    border-bottom: none;
}

/* 一级分组菜单:展开时显示"打开的文件夹"图标,收起时切换为"闭合文件夹"图标 */
.menu .nav-link[aria-expanded="true"] .menu-icon.fa-folder-open::before {
    content: "\f07c"; /* fa-folder-open */
}
.menu .nav-link[aria-expanded="false"] .menu-icon.fa-folder-open::before,
.menu .nav-link.collapsed .menu-icon.fa-folder-open::before {
    content: "\f07b"; /* fa-folder */
}

/* 列表内次要文字:加深颜色提升与白底的反差,便于阅读(覆盖 text-muted 浅灰) */
.table .text-muted {
    color: #4a4a4a !important;
}

/* 所有列表内带底框的文字(状态/科目徽章等 badge)增大一号,更清晰 */
.table .badge {
    font-size: 0.875rem;
    padding: 0.35em 0.6em;
}

/* 待考列表考台号徽章:固定最小宽度并居中,避免考台号位数不同导致背景块大小不一 */
.table .machine-badge {
    display: inline-block;
    min-width: 48px;
    text-align: center;
}

/* 表格内容不换行,操作/按钮列保持完整不被横向滚动挤出 */
.table-responsive .table td,
.table-responsive .table th {
    white-space: nowrap;
}

/* 每行最后一列(操作按钮列)固定钉在表格右侧,横向滚动时始终可见 */
.table-responsive .table tr > td:last-child,
.table-responsive .table tr > th:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.06);
}
.table-responsive .table thead th:last-child {
    background: #f8f9fa;
}

/* 预约信息卡片:列宽固定且总和小于容器,不需要"操作列贴右"。禁用 sticky right,
   避免把操作列吸到容器最右缘、与科目/状态列拉开空隙造成表头错位 */
.appt-card .table-responsive .table tr > td:last-child,
.appt-card .table-responsive .table tr > th:last-child {
    position: static;
    right: auto;
    z-index: auto;
    box-shadow: none;
}

/* 正在考试详情页:左下角固定操作栏(刷新/考试作弊/重新考试/取消考试/返回) */
/* 让 main 区域成为定位上下文,操作栏相对 main(不含侧边栏)左下角定位 */
.layout-main {
    position: relative;
}
.live-action-bar {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.live-action-bar .btn {
    white-space: nowrap;
}

/* 首页顶部:空闲超时徽章(增大底框,倒计时固定宽度防跳动) */
.idle-badge {
    font-size: 1rem;
    padding: 0.5rem 1.1rem;
    border-radius: 0.6rem;
    white-space: nowrap;
}
.idle-badge #idle-countdown {
    display: inline-block;
    min-width: 96px;
    text-align: left;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 正在考试详情:最近抓拍图片区限高,图片多时在该区域内滚动,不超出 main 底部。
   下方预留底部操作栏高度,避免滚动条或操作栏遮挡照片 */
.capture-grid {
    max-height: calc(100vh - 405px);
    overflow-y: auto;
    align-content: flex-start;
}

/* =====================================================================
   军威庄重风格强化（军队主题）
   军徽(盾牌+五角星)、侧边栏深军绿渐变、首页登录页军事背景
   ===================================================================== */

/* ---------- 军徽(盾牌+五角星):侧边栏/登录页通用 ---------- */
.military-emblem {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7A9B4E, #4E6A3C 65%, #2F4524);
    box-shadow: inset 0 0 0 2px #DCE6D4, inset 0 0 0 4px #4E6A3C, 0 2px 6px rgba(0,0,0,.35);
    color: #F4E8C1;
    font-size: 30px;
    flex-shrink: 0;
}
.military-emblem .fa-shield-halved {
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.military-star {
    position: absolute;
    right: 1px;
    bottom: 1px;
    font-size: 13px;
    color: #F4C84D;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ---------- 登录页军事背景(迷彩实照 + 绿色渐变遮罩,内容偏右) ---------- */
.login-bg {
    position: relative;
    background:
        linear-gradient(160deg, rgba(46, 84, 40, .82) 0%, rgba(36, 65, 31, .86) 50%, rgba(24, 46, 22, .9) 100%),
        url('../images/ui-materials/camouflage-2-jungle.jpg') center/cover no-repeat;
}
.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 24px 9vw 24px 24px;
}
/* 军绿半透明登录卡片(参照军队系统风格:深军绿毛玻璃+白字) */
.login-card {
    width: 400px;
    background: rgba(16, 42, 20, .78) !important;
    border: 1px solid rgba(212, 175, 55, .45) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}
.login-emblem {
    width: 64px;
    height: 64px;
    font-size: 34px;
}
.login-emblem i {
    color: #F4C84D;
}
.login-card h4 {
    color: #FDFDF7;
    letter-spacing: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.login-card .text-muted {
    color: rgba(240, 245, 230, .8) !important;
}
.login-card label.form-label {
    color: #EDF2E3;
}
/* 登录按钮强化军威 */
.login-card .btn-primary {
    background: #B8860B;
    border: 1px solid #D4AF37;
    letter-spacing: 6px;
    font-weight: 600;
}
.login-card .btn-primary:hover {
    background: #D4AF37;
    color: #1E2B15;
}
/* 登录页输入框:深军绿半透明底+白字 */
.login-card .form-control,
.login-card .input-group-text {
    border-color: rgba(180, 200, 160, .5) !important;
}
.login-card .input-group-text {
    color: #D9E5C3 !important;
    background: rgba(40, 70, 40, .45) !important;
    border-right: 0 !important;
}
.login-card .form-control {
    background: rgba(240, 248, 228, .92) !important;
    border-width: 1.5px !important;
    color: #16200f !important;
    caret-color: #16200f !important;
    font-weight: 500;
}
.login-card .form-control::placeholder {
    color: #8a9573 !important;
    font-weight: 400;
}
.login-card .form-control:focus {
    color: #0f1708 !important;
    background: #fff !important;
    border-color: #B8860B !important;
    box-shadow: 0 0 0 .22rem rgba(212, 175, 55, .28) !important;
}
/* 登录页"显示/隐藏密码"眼睛按钮:右端深军绿底,悬停提亮,明文时金色,不干扰输入焦点 */
.login-card .password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    max-width: 46px;
    padding: 0 !important;
    border: 1px solid rgba(180, 200, 160, .5) !important;
    border-left: 0 !important;
    border-radius: 0 .25rem .25rem 0 !important;
    background: rgba(40, 70, 40, .45) !important;
    color: #D9E5C3 !important;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    flex: 0 0 46px;
}
.login-card .password-toggle:hover {
    background: rgba(58, 92, 52, .65) !important;
    color: #fff !important;
}
.login-card .password-toggle i {
    font-size: 1.1rem;
    pointer-events: none;
}

/* ---------- 首页军队横幅底图(辽宁舰航母实照) ---------- */
/* 首页军队横幅底图:cover 水平居中铺满。此图航母主体横跨全幅、
   战斗机在最右侧;放大(如125%)会把右侧战斗机裁出画面,故用 cover 保持全幅可见。 */
.index-hero {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: url('../images/ui-materials/weapons/liaoning-carrier.jpg') 50% center / cover no-repeat;
    border: 1px solid #5B7A3E;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.index-hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15,25,9,.82) 0%, rgba(30,45,18,.55) 55%, rgba(15,25,9,.2) 100%);
}
.index-hero-body {
    position: relative;
    z-index: 1;
    padding: 26px 28px;
}
.millitary-emblem-sm {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #F4E8C1;
    background: radial-gradient(circle at 35% 30%, #7A9B4E, #3A5030 70%);
    box-shadow: inset 0 0 0 2px #DCE6D4, inset 0 0 0 4px #4E6A3C;
    flex-shrink: 0;
}
.index-hero-title {
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    letter-spacing: 2px;
    font-size: 2.1rem !important; /* 覆盖 Bootstrap .fs-3 的 !important,盾牌右侧标题加大 */
}
.index-hero-sub {
    color: #DCE6D4;
    font-size: 22px !important; /* 盾牌右侧副标题设为22px */
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* =====================================================================
   重连提示弹层(自定义中文文案)
   替换 BootstrapBlazor ReconnectorOutlet:其英文文案硬编码在 DLL 中无法本地化。
   Blazor 核心 JS 会在 #components-reconnect-modal 上切换
   components-reconnect-show / failed / rejected 三个状态类,据此显示对应文案。
   ===================================================================== */
#components-reconnect-modal.km1-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .45);
    justify-content: center;
    align-items: center;
}
#components-reconnect-modal.km1-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.km1-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.km1-reconnect-modal.components-reconnect-rejected {
    display: flex;
}
#components-reconnect-modal .km1-reconnect-dialog {
    background: #fff;
    border-radius: 10px;
    padding: 26px 34px;
    min-width: 320px;
    max-width: 460px;
    text-align: center;
    box-shadow: 0 10px 36px rgba(0, 0, 0, .22);
}
#components-reconnect-modal .km1-reconnect-spinner {
    display: none;
    font-size: 28px;
    color: #6c757d;
}
#components-reconnect-modal.components-reconnect-show .km1-reconnect-spinner {
    display: inline-block;
}
#components-reconnect-modal .km1-reconnect-text {
    display: none;
    margin: 14px 0 6px;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}
#components-reconnect-modal.components-reconnect-show .km1-reconnect-text[data-state="show"] {
    display: block;
}
#components-reconnect-modal.components-reconnect-failed .km1-reconnect-text[data-state="failed"] {
    display: block;
}
#components-reconnect-modal.components-reconnect-rejected .km1-reconnect-text[data-state="rejected"] {
    display: block;
}
#components-reconnect-modal .km1-reconnect-retry {
    margin-top: 16px;
    min-width: 120px;
}