/* #main{
    border:5px solid red;
}

.footer{
    border:5px solid blue;
} */

/* 导航栏 */
.navbar {

    /* border-bottom: 1px solid #000000;     */

    /* 🎯 临时红线黑科技：在正中间（50%的位置）画一条 1 像素宽的水平红线 */
    /* background-image: linear-gradient(to bottom, transparent 49%, #ff0000 49%, #ff0000 51%, transparent 51%) !important;
    background-color: #ffffff !important;  */
}

.navbar .container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;       
    justify-content: space-between !important; 
    
}

.logo {
    width: auto !important;     /* 宽度让它自适应 */
    height: 55px !important;    /* 🎯 新增：强制把 Logo 高度缩到 38px，防止它撑大头部 */
    padding-top: 10px
}


.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 中间部分 */

.form {
    background: var(--bs-gray-200);

    padding-top: 0px !important;    /* 🎯 顶部内边距减半（从30px降到15px），第一行会瞬间被拉上去！ */
    padding-bottom: 30px;           /* 底部依然保持 30px 舒适空间 */
    padding-left: 30px;             /* 左边依然保持 30px */
    padding-right: 30px;            /* 右边依然保持 30px */

    margin-top: 10px;
    border: 1px solid var(--bs-gray-200);
    border-radius: 10px;

    overflow: hidden !important;
}

.form .field-container {
    display: flex;
    margin-top: 60px !important;
    align-items: center;
    

}

.form .field-container > label {
    width: 100px;
    font-size: 18px;
    font-weight: bold;
}

.form .field-container > button {
    width: 100px;
    font-size: 18px;
    font-weight: bold;
}


.input-col input{
    padding: 5px;
    border: 1px solid var(--bs-gray-600);
    border-radius: 5px;
    background-color: #fff;
}

.form .field-container .field select {

    padding: 0.5em 3.5em 0.5em 1em;
    border: 1px solid var(--bs-gray-600);
    border-radius: 5px;
    background-color: #fff;
    -webkit-appearance: none;
    background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;

    width: 300px;               /* 1. 固定宽度：根据你的界面需求修改数值（如 180px 或 15rem 等） */
    white-space: nowrap;        /* 2. 强制文字在一行内显示 */
    overflow: hidden;           /* 3. 隐藏超出宽度的文字 */
    text-overflow: ellipsis;    /* 4. 超出部分显示为省略号 ... */
}

.form .field-container .field{
    font-size: 18px;
}

.input-col input[type=file] {
    border: none;
    padding-left: 0px;
}

.app-button.submit-form-button {

}

.xterm.terminal .xterm-screen {
    height: 400px;
}

table {
    width: 100%;
    margin: 30px 0px;
}

th {
    border-bottom: 1px solid var(--bs-gray-300);
    border-top: 1px solid var(--bs-gray-300);
    padding: 15px 0px;
    font-size: 16px;
    font-family: PoppinsM;
}

td {
    padding: 15px 0px;
}

td img {
    cursor: pointer;
    width: 16px;
}

.xterm .xterm-viewport {
    width: initial !important;
}

.hide{
    display: none;
}

.appdescription-text {
    max-width: 25rem;
    max-height: 30rem;
    word-wrap: break-word;
}


.appinfo-flash-container {
    max-height: 600px;
    overflow-y: auto;
    margin-top: 3rem;
    gap: 15px;
}

.app-config-info-container {
    max-width: 25rem;
    max-height: 20rem;
}

.app-info-trigger-container {
    padding-top: 14px;
    margin-left: 18px;
}

@media (min-width: 1200px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 1320px;
    }
}

@media (max-width: 1200px) {
    .navbar-brand .tagline {
        display: none;
    }
    .app-config-info-container {
        min-width: 100%;
        margin: 2rem 0rem;
    }
}

@media (max-width: 992px) {
    .navbar .navbar-toggler {
        background: var(--bs-gray-100);
    }

    .navbar-collapse .navbar-nav {
        border: 1px solid var(--bs-gray-500);
    }

    .navbar-collapse .nav-item {
        width: 100%;
        border-right: none;
        height: 90px;
        border-bottom: 1px solid var(--bs-gray-200);
    }

    /* .form .field-container {
        flex-direction: column;
    }

    .form > .field-container > label {
        margin-bottom: 15px;
    } */

    .form-config-info-container-wrapper {
        display: block !important;
    }
}

/* 卡片 */
#boards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}


.file-mock-btn {
  background-color: #efefef;
  border: 1px solid #ced4da;
  padding: 0.1rem 0.6rem;
  border-radius: 0.2rem;
  font-size: 0.85rem;
  margin-right: 0.75rem;
  color: #495057;
  user-select: none;
}

/* 伪装的文件名文本样式 */
.file-mock-text {
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  gap: 8px;
}

/* 让生成的卡片排成一排，超出自动换行 */
#boards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* 单个动态卡片的基础样式 */
.firmware-card {
    position: relative;
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 4px;
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.firmware-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* 图标大小与颜色 */
.card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    fill: #64748b;
    transition: fill 0.2s ease;
}

/* 文本标题 */
.card-title {
    font-size: 16px;
    font-weight: 500;
    color: #334155 !important;
    word-break: break-all; /* 防止后端文件名太长撑破卡片 */
        /* 核心修改：让文字距离卡片底部保持 4 像素的黄金比例，既靠下又不会太死板 */
    margin-top: 12px;    /* 保持图片和文字之间至少有 10px 的呼吸感 */
    margin-bottom: 0px;   
}

/* 右上角绿色对勾 */
.checkmark {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    background-color: #2ecc71;
    color: #ffffff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(46, 204, 113, 0.3);
    
    /* 默认隐藏动画 */
    opacity: 0;
    transform: scale(0);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ==================== 激活状态的样式 ==================== */
.firmware-card.active {
    border-color: #2ecc71;     /* 边框变绿 */
    background-color: #f4fbf7; /* 背景微绿 */
}

.firmware-card.active .card-icon {
    fill: #2ecc71;             /* 图标变绿 */
}

.firmware-card.active .checkmark {
    opacity: 1;                /* 显现对勾 */
    transform: scale(1);       /* 放大对勾 */
}

.hide-box {
    display: none !important;
}


/* 底部*/

.footer {
    margin-top: 60px;
    background-color: #ffffff;
    padding: 20px;
    color: rgb(0, 0, 0);
}

.footerContent {
    display: flex;
    justify-content: center;
    gap: 15%;
    margin-bottom: 20px;
}

.footerColumn {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    word-wrap: break-word;
    white-space: pre-wrap;
    gap: 10px;
}

.footerTitle {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
    color: #364E60;
    display: flex;
}

.footerItem {
    margin-bottom: 5px;
    word-break: break-all;
    font-size: 14px;
    line-height: 1.4;
    color: #364E60;
    text-decoration: none; 
}

.footerBottom {
    text-align: center;
    padding-top: 10px;
    color: #3a3a3a;
}

.qrCode {
    width: 150px;
    height: 150px;
}




#customBinBox{
    display:flex;
    align-items:flex-start;
    width:100%;
}

#flashLeftPanel{
    width:120px;
    flex-shrink:0;
}


#fileUploadTableBody{
    flex:1;
}

.flash-row{
    display:flex;
    align-items:center;
    gap:25px;
    margin-bottom:12px;
}


.add-btn-row{
    display:flex;
    justify-content:flex-end;   /* 关键 */
    margin-top:10px;
}

#addFileBtn{
    width:80px !important;
    height:38px;
    border-radius: 0.4rem !important;
}

#clearButton{
    border-radius: 0.4rem !important;
}

.remove-row-btn{
    width:80px;
    height:38px;
    background: rgb(224, 71, 122);
    border-radius: 0.4rem;
}


/* ================= 闪烁按钮 ================= */
#flashButton {
    color: #fff;
    background-color: rgb(81, 192, 37);
    border-color: rgb(81, 192, 37);
    margin-left: 5px;
}

/* 鼠标悬停 (防止被 .btn:hover 的黑色文字覆盖) */
#flashButton:hover {
    color: #fff;
    background-color: rgb(70, 170, 32); /* 略微加深背景 */
    border-color: rgb(70, 170, 32);
}

/* 点击/聚焦时：使用 box-shadow 实现同色半透明外圈 */
#flashButton:focus {
    color: #fff;
    background-color: rgb(70, 170, 32);
    border-color: rgb(70, 170, 32);
    outline: 0; /* 移除浏览器默认外框 */
    /* 这里的 0 0 0 0.25rem 代表 0.25rem 粗细的影子，rgba 最后一位 0.55 是 55% 透明度 */
    box-shadow: 0 0 0 0.25rem rgba(81, 192, 37, 0.55); 
}

/* 禁用状态 */
#flashButton:disabled {
    
    color: #000000;
    background-color: rgb(210, 210, 210);
    border-color: rgb(190, 190, 190);
    cursor: not-allowed;
    box-shadow: none; /* 禁用时清除阴影 */
}


/* ================= 擦除按钮 ================= */
#eraseButton {
    color: #fff;
    background-color: rgb(192, 37, 37);
    border-color: rgb(192, 37, 37);
}

/* 鼠标悬停 */
#eraseButton:hover {
    color: #fff;
    background-color: rgb(170, 32, 32);
    border-color: rgb(170, 32, 32);
}

/* 点击/聚焦时 */
#eraseButton:focus {
    color: #fff;
    background-color: rgb(170, 32, 32);
    border-color: rgb(170, 32, 32);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(192, 37, 37, 0.55);
}

/* 禁用状态 */
#eraseButton:disabled {
    color: #000000;

    background-color: rgb(210, 210, 210);
    border-color: rgb(190, 190, 190);
    cursor: not-allowed;
    box-shadow: none;
}


.addr-input::placeholder {
    color: #bdcbda; /* 这是一个很浅的灰色，比默认的更白、更亮 */
    opacity: 1;     /* Firefox 浏览器默认会降低透明度，强制设为 1 来保证颜色正确 */
}

#fileArea.is-disabled {
    pointer-events: none !important; /* 核心：鼠标点击直接穿透，无法点击内部任何按钮或选框 */
}

/* 视觉效果：让里面所有的表格行整体变灰 */
#fileArea.is-disabled .mock-file-trigger,
#fileArea.is-disabled input,
#fileArea.is-disabled .flash-row:not(:first-child) .remove-row-btn,
#fileArea.is-disabled #addFileBtn {
    opacity: 0.5 !important;
}

#fileArea.is-disabled .remove-row-btn {
    pointer-events: none !important;  
    cursor: not-allowed !important;  
}

/* 视觉效果：让你用 div 模拟的 mock-file-trigger 按钮和真实输入框背景都变灰 */
#fileArea.is-disabled input,
#fileArea.is-disabled button,
#fileArea.is-disabled .mock-file-trigger {
    background-color: #ffffff !important;
    cursor: not-allowed !important;
}

#firmware:disabled, 
.firmware:disabled {
    opacity: 0.5;
}