/*------------     工具栏     -------------*/

#tools {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
background: #fff;
position: sticky;
top: 0;
z-index:201;
padding:10px 0;
}

#tools > .left {
text-align: left;
display: flex;
flex-wrap: nowrap;
}

#tools > .left > span {
border-radius: 5px;
display:inline-flex;
}

#tools > .left > span > button {
background: #FFF;
border: none;
padding: 7px 12px;
margin: 0;
font-size: 15px;
cursor: pointer;
border: 1px solid #ccc;
color: #888;
display:inline-flex;
}
#tools > .left > span > button > svg{
width:20px;
height:20px;
margin-right:5px;
}
#tools > .left > span > button:first-child {
border-radius: 7px 0 0 7px;
}

#tools > .left > span > button:last-child {
border-radius: 0 7px 7px 0;
}

#tools > .left > span > button.selected {
background: #e5eeff !important;
color: #0058ff !important;
border-color: #0058ff !important;
}


#tools > .right {
text-align: right;
}


/* 定义upload_container容器的样式 */
#itemCollection {
background: #f2f6ff;
border-radius:7px;
display: flex;
flex-direction:row;
flex-wrap:wrap;
gap:50px;
padding:1%;
}

#itemCollection > .item {
flex:0 0 auto;
margin-bottom:10px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:5px;
position:relative;
font-size: 13px;
transition: all 0.1s ease;
cursor:move;
width:150px;
padding:10px;
}
#itemCollection > .item:hover {
background:#d9e5ff;
}
#itemCollection .item > .tools {
position:absolute;
top:5px;
right:5px;
z-index:1000;
display:none;
flex-direction:row;
flex-wrap: nowrap; /* 关键属性：强制不换行（即使容器宽度不够，图片也会挤在一行） */
background:#FFF;
border:1px solid #CCC;
border-radius:5px;
cursor:default;
padding: 5px;
}
#itemCollection > .item .tools > img  {
cursor:pointer;
margin:2px 5px;
outline:1px solid #fff;
border-radius:3px;
width:21px;
height:21px;
}
#itemCollection > .item .tools > img:hover {
outline:1px solid #CCC;
}
#itemCollection > .item .tools > img:active {
outline:1px solid #F0F;
}
#itemCollection > .item:hover .tools{
display:flex;
}

#itemCollection .item    .imgs{
display:flex;
justify-content:center;
align-items:center;
position:relative;
width:100%;
height:180px;
padding:5px;

}
#itemCollection .item    .imgs > img {
position:absolute;
max-width:100%;
max-height:100%;
border:1px solid #CCC;

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

object-fit:contain;
transform-origin: center center;
transition: all 0.1s ease;
}


#itemCollection .item   .imgs > img:first-of-type {
top:5px;
left:5px;
}

#itemCollection .item  .title{
width:100%;
display:flex;
justify-content:center;
padding:10px 0 5px 0;
}

#itemCollection .item > .title > label {
border-radius:5px;
color: rgba(70,100,255,0.85);
background: rgba(70,100,255,0.3);
width:85%;
padding:5px 7px;
line-height:1;
text-align:center;
white-space: nowrap;    /* 防止文本换行 */
overflow: hidden;       /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */

}

#itemCollection .item > .imgs > .status{
color:#A00;
text-shadow: 1px 0 0 #FFF,0 1px 0 #FFF,   -1px 0 0 #FFF,0 -1px 0 #FFF;
z-index:501;
white-space:wrap;
}



#itemCollection .item .paperType,#itemCollection .item .sizePdfPageCount {
padding-top:5px;
cursor:default;
font-size:12px;
color:rgba(70,100,255,0.8);
text-wrap:nowrap;
overflow:hidden;
}
#itemCollection .item select.selectGeneral {
border: 1px solid rgba(70,100,255,0.3);
border-radius: 5px;
font-size:12px;
}



/*   图片预览功能 */
/* 模态层 */
.modal-overlay {
position: fixed; inset: 0;flex-direction:column;
display: none; align-items: center; justify-content: center;
background: rgba(50,50,50,0.85); z-index: 9999;
}
.modal-overlay.open { display: flex; }

/* 内部容器 */
.modal-inner {
max-width: 95%;
max-height: 90%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.modal-inner img {
min-width: 50vh;      /* 宽度最小  */
max-width: 95%;      /* 最大不超过 95% 宽度 */
max-height: 90vh;    /* 高度不超过屏幕高度的 95% */
width: auto;         /* 根据高度缩放时，保持宽高比 */
height: auto;        /* 根据宽度缩放时，保持宽高比 */
object-fit: contain; /* 确保完整显示，留空白也不裁剪 */
border-radius: 6px;
box-shadow: 0 10px 30px rgba(0,0,0,.5);
}


.modal-close {
position: fixed;
top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.85);
border: none; width:60px; height:60px; border-radius: 10px;
cursor: pointer; font-size: 50px; display: grid; place-items: center;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
z-index: 10000;top: 30px; right: 30px; transform: none;
}

.modal-close:hover{
color:#F00;
background:#FAA;
}

.modal-close:active{
color:#FFF;
background:#F00;
}


/* 图片说明文字 */
.modal-caption {
margin-top: 5px;
margin-bottom:40px;
color: #FFF;
font-size: 14px;
text-align: center;
text-shadow: 1px 1px 2px #000;
line-height:1.8;

}


.modal-operate {
position:absolute;
background: #FFF;
border-radius: 5px;
text-align: center;
display: flex;
align-items:center;
overflow:hidden;
bottom:10px;
padding:0 20px;
}
.modal-operate button, .modal-operate input {
width:45px;
height: 35px;
display: flex;
align-items: center;
text-align:center;
margin:0 1px;
border: 0;
cursor:pointer;
}

.modal-operate button:hover{
color:#F00;
}
.modal-operate button:active {
background:#F00;
color:#FFF;
}