/* 後端樣式 */
body,
table,
a,
a:hover,
.uk-label-success,
.modal,
.data_total_count
 {font-size: .8rem;
letter-spacing: .5px;}

:focus-visible {
    outline: inherit
}

/* a,a:hover {font-size: .85rem} */
nav {padding: 0 20px;background: linear-gradient(-45deg, #8fb8d6 0, #3A8ECC 100%) !important;}
nav .uk-navbar-item icon{margin-right:0}
nav .uk-navbar-item a{text-decoration:none;align-items: center;display: flex;}
.nav_logo {width: 180px;}
/* 導覽列品牌區（logo + 版號）：桌機同一行，手機版號改排 logo 下方，
   避免窄螢幕時右側功能圖示壓到版號文字 */
.nav-brand {gap: 8px;}
.nav-ver {font-size: 11px;color: rgba(255,255,255,0.6);font-weight: 400;letter-spacing: .5px;line-height: 1;}
.content{padding-bottom:100px;padding: 0 20px 100px 20px;} 

.uk-button{font-size:.8rem!important;}
/* .uk-button-primary {background-color: #FF6123!important;color: #fff !important;}
.uk-button-primary:hover{background-color:#f9895d !important;} */


.uk-navbar-container:not(.uk-navbar-transparent){background:linear-gradient(-45deg,#f8f8f8 0,#f8f8f8 100%);border-bottom:1px solid #e5e5e5}
*+.uk-alert{border-radius:4px}

.area .area_title{font-weight:500;font-size: .9rem;border-bottom:1px solid #c5c5c5;padding-bottom:10px;margin-bottom: 20px;}
label.error{color: #fff;background-color: #ee3859;padding: 3px 8px;border-radius: 4px;margin: 3px 0 0;width: fit-content;font-size: .8rem;display: block;font-weight: 500;}
.btn_site{width:max-content}
.btn_link:hover,.btn_site:hover{text-decoration:none}
.btn_linkopen{width:fit-content}
.btn_edit,
.button{
    font-size: .8rem !important;
    align-items: center!important;
    display: inline-flex!important;
    white-space: nowrap!important;
}
.btn_preview {
    padding: 8px 16px;
    margin-top: 5px;
    display: block;
}
.width50{width:50%}
.width30{width:30%}
#list .btn_link .material-symbols-outlined{margin-right:3px}
.list_date {font-size: .7rem;line-height: .8rem;margin-bottom: 5px;}

/* #post form button[type=submit]{width:100%} 與共同樣式不同 */
#post form button[type=submit] {
    margin: auto;
    display: block;
}
.upload_block .upload_previews img {width: 100px;}
.input_help {font-size: .7rem;display: block;margin-top: 5px;}

/* page */
.page_title {font-size: 1.2rem;font-weight: 500;padding: 10px 0;}
.page table,
.post table {
    margin-bottom: 30px;
    max-width: 100%;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
}


.page table th,
.page table td,
.post table th,
.post table td {
    font-size: .75rem;
    line-height: 1rem;
}

.page table thead,
.post table thead {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
}
.page table tbody tr:hover,
.post table tbody tr:hover {
    background-color: #f1f8ff;
}

form .uk-form-controls {
    font-size: .8rem;
}


.uk-nav-default>li>a:hover {
    background-color: #FF6123!important;
}

.uk-breadcrumb>*>* {
    font-size: .75rem;
}


[id^="modal_"] .uk-modal-dialog {width:900px}

/* #loading {
    z-index: 9999!important;
} */

.uk-table-hover tbody tr:hover,
.uk-table-hover>tr:hover,
.uk-table tr:hover {
    background: rgb(241, 247, 255);
}

table .uk-label {
    font-size: .7rem;
}

.form_btn_fix {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #f8f8f8;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #e5e5e5;
    z-index: 1;
}

.form_btn_fix button[type="submit"] {
    margin: auto;
}

.btn_delete {
    background-color: #f0506e;
    color: #fff!important;
}
.btn_delete:hover {
    background-color: #eb6b83;
}
.btn_logout {
    font-size: .8rem;
}

.font_green {
    color: #2eca8f;
}
.font_red {
    color: #eb6b83;
}

.form_area .uk-form-label {
    color: #aeaeae;
    margin-bottom: 5px;
    display: block;
}

.input_error {
    width: fit-content;
}

.uk-form-label {
    color: #8f8f8f;
}


.contact_table th,
.contact_table td {
    padding: 5px !important;
    border-bottom: 1px solid #e5e5e5;
}

.contact_table th {
    border-right: 1px solid #e5e5e5;
}

.btn_add {
    margin-bottom: 10px;
}
.btn_stage {
    background-color: #45c8f1;
    color: #fff!important;
}
.btn_stage:hover {
    background-color: #7cd6f1;
}

.searchable-select-dropdown {
    font-size: .7rem;
}

.uk-modal-title {
    font-size: 1.3rem;
}

@media (max-width:760px){
  .width50{width:100%}
  .width30{width:50%}
  .nav_logo {width: 130px;}
  nav .uk-navbar-item a {margin-left: 5px !important;}
  /* 手機：版號改排在 logo 下方（原本並排會被右側圖示壓到） */
  nav {padding: 0 10px;}
  .nav-brand {flex-direction: column;align-items: flex-start;justify-content: center;gap: 2px;padding-left: 0;padding-right: 8px;}
  .nav-ver {font-size: 10px;}
  /* 手機：表頭上下更緊湊（2026-09-21）
     UIkit 預設 .uk-navbar-item 的 min-height 是 80px，但這列最高的內容是 40px 的
     圓形圖示按鈕，上下各白白多留 20px。改 56px ＝ 圖示 40px + 上下各 8px，
     通知紅點（超出圖示上緣約 5px）仍在範圍內不會被裁掉。
     ⚠️ 若之後把圖示按鈕改大，這個值要跟著加，否則圖示會貼邊。 */
  nav .uk-navbar-item {min-height: 56px;}
}


@media (min-width:1800px){
    .page table, .post table {
    display: inline-table;
    }
}

/* ========================================
   統一階段標籤樣式 (Stage Labels)
   ======================================== */
.stage-label {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px !important;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
    color: #fff;
}

.stage-rfq { background-color: #faa05a; }         /* RFQ - 橘色 */
.stage-evaluate { background-color: #9b59b6; }    /* 評估 - 紫色 */
.stage-launch { background-color: #f0506e; }      /* 立項 - 紅色 */
.stage-kickoff { background-color: #1e87f0; }     /* 啟案KICK-OFF - 藍色 */
.stage-vf { background-color: #1e87f0; }          /* 驗證 - 藍色 */
.stage-mp { background-color: #1e7e34; }          /* MP - 深綠色 */
.stage-eol { background-color: #6c757d; }         /* EOL - 深灰色 */
.stage-cancel { background-color: #666666; }      /* 取消 - 深灰色 */
.stage-default { background-color: #1e87f0; }     /* 預設 - 藍色 */

/* ========================================
   身份代表色標籤 (Identity Badges)
   ======================================== */
.identity-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.identity-op    { background-color: #2980b9; }   /* 管理者 - 藍色 */
.identity-sales { background-color: #e67e22; }   /* 業務   - 橘色 */
.identity-fae   { background-color: #27ae60; }   /* 工程   - 綠色 */
.identity-fc    { background-color: #8e44ad; }   /* 運籌   - 紫色 */
.identity-fin   { background-color: #7f8c8d; }   /* 財務   - 灰色 */

/* ========================================
   區域標籤 (L 國內 / F 海外)
   ======================================== */
.region-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.region-l { background-color: #27ae60; }   /* 國內 L - 綠色 */
.region-f { background-color: #2980b9; }   /* 海外 F - 藍色 */

/* ========================================
   付款幣別標籤 (USD / NTD)
   ----------------------------------------
   用途：貨款申請單「要用哪種幣別付出去」的警示標記（2026-09-09）。
   記帳幣別一律 USD，但實際可換匯付台幣，兩者差 30 倍以上，
   付錯幣別的代價很大，所以用實心色塊讓財務掃一眼就看得到。

   ⚠️ 只標「付款/收款幣別」，不要拿去標金額前面的記帳幣別字樣——
      那裡維持灰色小字，目光才會落在數字上。
   ======================================== */
.cur-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .3px;
}
.cur-usd { background-color: #2980b9; }   /* 美金 - 藍色 */
.cur-ntd { background-color: #d35400; }   /* 台幣 - 深橘（與藍色色相差最大，不靠紅綠辨識） */

/* 換匯（USD 記帳、實際付台幣）：加箭頭符號，跟純台幣單再區隔一層 */
.cur-tag .cur-fx {
    margin-left: 4px;
    opacity: .85;
}