.icon-docx {
    display: inline-block;
    /* Ensures the element behaves like an inline element but accepts width and height */
    width: 24px;
    /* Set the width of the icon */
    height: 24px;
    /* Set the height of the icon */
    background-image: url("{{ url_for('static', filename='assets/img/icons/docs/docx.png') }}");
    /* Path to your PNG file */
    background-size: contain;
    /* Ensure the image scales to fit the container */
    background-repeat: no-repeat;
    /* Prevent the image from repeating */
    background-position: center;
    /* Center the image in the container */
}

.icon-xlsx {
    display: inline-block;
    /* Ensures the element behaves like an inline element but accepts width and height */
    width: 24px;
    /* Set the width of the icon */
    height: 24px;
    /* Set the height of the icon */
    background-image: url("{{ url_for('static', filename='assets/img/icons/docs/xlsx.png') }}");
    /* Path to your PNG file */
    background-size: contain;
    /* Ensure the image scales to fit the container */
    background-repeat: no-repeat;
    /* Prevent the image from repeating */
    background-position: center;
    /* Center the image in the container */
}

.icon-pptx {
    display: inline-block;
    /* Ensures the element behaves like an inline element but accepts width and height */
    width: 24px;
    /* Set the width of the icon */
    height: 24px;
    /* Set the height of the icon */
    background-image: url("{{ url_for('static', filename='assets/img/icons/docs/pptx.png') }}");
    /* Path to your PNG file */
    background-size: contain;
    /* Ensure the image scales to fit the container */
    background-repeat: no-repeat;
    /* Prevent the image from repeating */
    background-position: center;
    /* Center the image in the container */

}

.delete-item:hover {
    background-color: #FFB5B5;
    /* 懸停時背景變紅 */
    color: white;
    /* 懸停時文字變白 */
}

/* 大屏幕布局 - 視窗寬度大於 992px */
.user-sidebar {
    order: 1;
}

.user-content {
    order: 0;
}

/* 中等及以下屏幕布局 - 視窗寬度小於 992px（平板） */
@media (max-width: 992px) {
    .user-sidebar {
        margin-bottom: 20px;
    }
}

/* 小屏幕布局 - 視窗寬度小於 768px (手機) */
@media (max-width: 768px) {
    .user-sidebar {
        order: 0 !important;
        margin-bottom: 20px;
        /* 添加下方邊距 */
        /*background-color: red; /* 测试是否生效 */
    }

    .user-content {
        order: 1 !important;
        /*background-color: blue; /* 测试是否生效 */
    }
}

.card-container-product,
.card-container-note {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    /* 启用横向滚动 */
    white-space: nowrap;
    max-width: 100%;
}

/* 文字編輯器 */
#snow-editor,
#snow-editor_edit {
    height: 200px;
    /* 根据需要调整高度 */
    overflow-y: auto;
    /* 当内容超出时出现滚动条 */
    margin-bottom: 20px;
    /* 增加下方间距避免覆盖按钮 */
}

.note-content {
    line-height: 1.2em;
    /* 行高設置為 1.2em */
    word-break: break-word;
    /* 强制长单词换行 */
    font-size: 0.95em;
    color: #333;
    max-height: calc(1.2em * 5);
    /* 控制最多顯示五行 */
    overflow-y: auto;
    /* 超過五行時顯示垂直滾動條 */
    padding-right: 4px;
    /* 增加一些內邊距，避免滾動條過於貼近文字 */
    white-space: normal;
    /* 確保內容可換行 */
    display: block;
    /* 確保容器的寬度根據父容器擴展 */
    width: 100%;
    /* 確保內容寬度與父容器一致 */
}

#addPouchModal .modal-content {
    background-color: #ced4da;
    /* 将此颜色改为按钮的背景颜色 */
}

/* 将 modal 居中 */
#addPouchModal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
    /* 让 modal 垂直居中 */
    margin-right: 351px;
    /* 向右偏移351px，可以根据需要调整 */
}

.scroll-contain {
    line-height: 1.2em;
    /* 行高設置為 1.2em */
    max-height: 200px;
    /* 5行数据+滚动条宽度的高度 */
    display: block;
    overflow-y: auto;
    /* 超過五行時顯示垂直滾動條 */
    overflow-x: hidden;
    /* 禁止水平滚动 */
}

.add-new {
    margin-right: 20px; /* 右邊間隔10px */
}

/* 產品修改modal樣式 */
.attribute-group-head,
.attribute-group {
    display: flex;
    align-items: center;
    width: 48%; /* 每列宽度占48%以形成两列布局 */
    border-bottom: 1px solid #d9dee3; /* 添加底部横线 */
    padding-bottom: 4px; /* 适当增加间距 */
    margin-bottom: 4px; /* 让每行之间留出一点空间 */
}

.attribute-group-head .form-group,
.attribute-group .form-group {
    margin-bottom: 0; /* 去掉下方多余间距 */
    flex: 1; /* 各部分均分空间 */
}

.attribute-group input,
.attribute-group select {
    height: 28px; /* 控制输入框高度 */
    padding: 4px;
    font-size: small; /* 调整字体大小 */
}

.d-flex.w-100 {
    justify-content: space-between; /* 两组项目均匀分布 */
}

.d-flex.align-items-center {
    gap: 8px; /* 每组属性间的间距 */
}


/* 產品新增modal樣式 */
#addAttrOptionsTable {
    border-collapse: collapse; /* 確保邊線不重疊 */
    border: 1px solid #d9dee3; /* 設定表格外框 */
}

#addAttrOptionsTable td input,
#addAttrOptionsTable td select {
    font-size: 14px; /* 調整字體大小 */
    height: 2em;
    border: 0;
    border-radius: 0;
    padding: 0.3em 0.5em;
}

#addAttrOptionsTable td, 
#addAttrOptionsTable th {
    padding: 0.425rem 1.25rem !important; /* 強制覆蓋 core.css */
}


/* 產品卡片樣式 */
.attributes-container {
    font-size: small;
    margin-top: 2em;
    margin-bottom: 2em;
    overflow: hidden;
}
  
.attribute-pair {
    display: flex;
    justify-content: space-between;
    width: 48%; /* 每对占据一半宽度，左右对齐 */
}

.attributes-container .d-flex {
    row-gap: 4px; /* 每一行属性的间距 */
}

.card .card-body {
    line-height: 1.2; /* 缩小列高 */
}

.d-flex.align-items-card-center {
    gap: 26px; /* 每组属性间的间距 */
}

.card-body .attribute-value {
    margin-left: 4px;
}

.card .card-title,
.card .card-subtitle {
    margin-bottom: 10px;
}

.comment {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* 保持在卡片內 */
}

.card_title_style {
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%; /* 限制在卡片內 */
}


/* 匯出報價單 */
.quotation-header {
    text-align: center;
    margin-bottom: 25px;
}

.customer-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.customer-info-table td {
    padding: 6px 10px; 
    vertical-align: top;
}

.customer-info-table td:first-child, .customer-info-table td:nth-child(3) {
    width: 13%; /* 减小标题单元格宽度 */
    font-weight: bold;
    text-align: left;
}

.customer-info-table td:nth-child(2), .customer-info-table td:nth-child(4) {
    width: 38%; /* 给内容更多空间 */
    text-align: left;
}

.total-amount {
    text-align: right;
    margin-top: 20px; 
}

.quotation-footer {
    margin-top: 20px;
    font-size: 14px;
}

.quotation-section {
    margin-bottom: 20px;
}

.quotation-section h4 {
    margin-bottom: 10px;
}

.quotation-details p {
    margin: 0;
}

.quotation-notes ol {
    padding-left: 20px;
    margin: 0;
}

/* 列印按鈕 */
.print-button {
    margin-bottom: 20px;
    text-align: right;
}

.print-button button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.print-button button:hover {
    background-color: #0056b3;
}

/* 列印時 */
@media print {
    .print-button {
        display: none; /* 隱藏列印按鈕 */
    }

    .quotation-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .total-amount {
        text-align: right;
        margin-top: 20px;
    }
}

/* 屬性表格縮小間隔 */
.table-header-attr {
    font-size: 16px;
    line-height: 18.35px;
    font-weight: bold;
}

.table-row-attr {
    font-size: 13.5px;
    vertical-align: middle;
}

/* 只改tbody的padding，thead保持 */
.table.my-attr-table tbody.table-row-attr > tr > td { 
    padding: 0.16rem 1.25rem !important; 
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
    background-color: var(--bs-secondary); /* secondary 灰色 */
    color: #fff;
    box-shadow: 0 2px 4px 0 rgba(67, 89, 113, 0.4);
}

.toast-container {
    top: 20% !important; 
    z-index: 1100; /* 確保比 modal 高 */
}

.attribute-pair {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px; /* 避免名稱與值太貼 */
}

.attribute-name {
    /*max-width: 100%;       控制名稱的最大寬度 */
    white-space: nowrap;   /* 不換行 */
    overflow: hidden;      /* 超出隱藏 */
    text-overflow: ellipsis; /* 超出顯示 ... */
    display: inline-block;
}

.attribute-value {
    flex-shrink: 0;        /* 避免被壓縮 */
}

/* UL：白底、無邊線 */
/*.product-tabs.nav-tabs{ background:#fff; border-bottom:0; padding:6px 8px; }*/

/* 頁籤一般狀態 */
.product-tabs .nav-link{
  color:#334155; font-weight:600;
  border:0; border-radius:10px;
  padding:6px 14px; margin-right:6px;
}
.product-tabs .nav-link:hover{ background:#f8fafc; }

/* 作用中頁籤：變色即可（不改 UL） */
.product-tabs .nav-link.active{
  background:darkgray; color:#fff;
  box-shadow:0 2px 8px rgba(59,130,246,.25);
}
.product-tabs .nav-link.active::after{ content:none; } /* 若不需要下劃線 */

.attributes-container .attribute-pair{display:flex;align-items:center;gap:12px}
.attributes-container .attribute-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6c757d}
.attributes-container .attribute-input{flex:0 0 70px;max-width:70px; text-align: right;}

/* 統一 input+unit 區塊高度與右對齊 */
.attr-value-box{
  --unit-h: 12px;            /* unit 行高，可依需求微調 */
  display: grid !important;  /* 取代 flex，固定兩列：input / unit */
  grid-template-rows: auto var(--unit-h);
  justify-items: end;        /* 右對齊 input 與 unit */
}

/* input 右對齊、貼近 unit */
.attr-value-box .attribute-value{
  text-align: right;
  margin-bottom: 0;
  padding-bottom: 2px;
}

/* unit 小字、固定高度；即使空也占位 */
.attr-unit{
  font-size: 0.72rem;
  line-height: 1;
  margin-top: -1px;
  min-height: var(--unit-h);
}

/* 無文字時也保留高度（避免高度收縮） */
.attr-unit:empty::before{
  content: '\00a0';
}

/* 讓 datatable 儲存格可以自動換行 */
#DataTables_Table_quotmanage td,
#DataTables_Table_quotmanage th {
    white-space: normal !important; 
    word-break: break-word;
}

/* 限制整個 modal 內容高度 */
#productTypeModal .modal-content {
    max-height: 600px;
    display: flex;
    flex-direction: column;
}

/* 設定內距 + 內容超過時出現捲軸 */
#productTypeModal .modal-body {
    padding: 0.5rem;
    overflow-y: auto;
}