/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* =====================================================
   Bootstrap 預設樣式 — ASP.NET Core MVC 範本自動產生
   這些是 Visual Studio 建立新專案時的初始樣式，
   部分已被下方 CHQ Design System 區段覆蓋。
   ===================================================== */

/* 品牌名稱連結（Bootstrap Navbar 左上角 Logo 旁的文字連結）
   white-space:normal 讓長品牌名稱可以自動換行 */
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
/* 全站預設連結顏色（在白色背景上有足夠對比度的深藍色） */
a {
  color: #0366d6;
}

/* 主要按鈕（藍色底白字）
   例：各頁面的「查詢」、「儲存」按鈕 */
.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* 頁籤（Pill 樣式）選中狀態
   例：若使用 Bootstrap nav-pills 的分頁切換 */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* 全站基底字體大小
   手機版（< 768px）：14px，讓行動裝置畫面更緊湊
   桌機版（≥ 768px）：16px，提升桌機可讀性 */
/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* 分隔線工具類別
   例：頁面區塊之間加上細灰線 */
.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

/* 卡片陰影工具類別
   例：登入卡片、資料卡片視覺浮起效果 */
.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* Cookie 隱私政策同意按鈕
   讓「我接受」按鈕與周圍文字同尺寸 */
button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* =====================================================
   Sticky Footer — 讓頁尾固定在頁面最底部
   原理：html 設為相對定位 + 100% 最小高度，
         footer 設為 absolute + bottom:0，
         body 留出等同 footer 高度的下邊距。
   ===================================================== */
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  /* 預留 60px 給頁尾，避免內容被頁尾遮住 */
  margin-bottom: 60px;
}
/* 頁尾固定在視窗最底部（例：版權宣告列） */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

/* 頁面頂部品牌 Banner（含 Logo、系統名稱、登入者資訊）
   在 _Layout.cshtml 頂端使用 */
.top-banner {
    width: 100%;
    height: 80px;
    background-color: white;
    padding-bottom: 3px;
    padding-top: 3px;
}

/* 登入後的底部Menu */
/* 登入後底部導覽列，固定在畫面最底部
   行動版全寬，提供首頁/庫存/訂單等功能快速入口
   例：_Layout.cshtml 底部 <nav class="float-menu"> */
.float-menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    z-index: 99;
    background-color: white;
    display: block;
}

/* 底部Menu平均分配寬度 */
/* 底部選單項目水平均勻分配，使用 flexbox 讓每個圖示等寬排列 */
.float-menu ul {
    height: 100%;
    list-style-type: none;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap; /* assumes you only want one row */
    padding-left: 0;
}

/* 每個選單項目佔滿父層高度，便於點擊 */
.float-menu li {
    height: 100%;
}

/* 舊版 figure 容器：圖示點擊區域，顯示指標游標 */
.float-menu figure {
    height: 100%;
    cursor: pointer;
}

/* 底部選單圖示大小（佔 li 高度的一半，上方留 5px 間距） */
.float-menu img {
    height: 50%;
    margin-top: 5px;
    margin-bottom: 0px;
}

/* BlockUI */
/* API 呼叫中的全頁載入遮罩，蓋住操作區域防止使用者重複點擊
   由 _Layout.cshtml 的 axios interceptor 自動控制顯示／隱藏 */
.blockui {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(200, 200, 200, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* BlockUI中的圖片 */
/* 載入遮罩中央顯示的旋轉等待圖示（SVG 動畫），固定在視窗 250px 高處 */
.blockui img {
    position: fixed;
    content: url("../images/Spin-1.3s-200px.svg");
    width: 64px;
    top: 250px;
}

/* 上方導覽列 */
/* 次要導覽列（頁面標題列，含返回按鈕）的高度 CSS 變數
   例：BranchOrder/List.cshtml、Inventory/RealTimeInventory.cshtml 頂部的「返回」列 */
:root {
    --nav-height: 50px;
}

/* 次要導覽列背景色（淡藍色，與主頂部 Banner 有視覺區隔） */
.aw-nav-color {
    background-color: #C4E1FF;
}
/* 次要導覽列高度套用上方定義的變數 */
.aw-nav-height {
    height: var(--nav-height);
}

/* Vuejs 避免畫面出現變數名稱 */
/* Vue.js 初始化完成前隱藏所有模板，防止頁面閃爍顯示 {{xxx}} 原始變數名稱
   所有 Razor View 的 Vue 根元素應加上 v-cloak 屬性 */
[v-cloak] {
    display: none;
}

/* 等寬字型 */
/* 等寬數字字型，確保金額、數量、庫存數字上下對齊
   例：庫存清單數量欄、訂單金額欄 */
.same-width-font {
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    font-variant-numeric: tabular-nums;
}

/* =====================================================
   CHQ Design System — Layout overrides
   Replaces hardcoded colours with CSS variables from
   chq-design-system.css. Dark mode via html.dark class.
   ===================================================== */

/* 全站主體套用 Design System 的背景漸層色與主要文字色
   字型優先使用系統繁中字型（蘋方、微軟正黑體）
   主題切換時有 0.3s 平滑過渡動畫 */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    transition: background 0.3s, color 0.3s;
}

/* === Top Banner (brand header) — always dark regardless of theme === */
/* 品牌頂部 Banner 永遠使用深色主題（不跟隨整體淺色/深色切換）
   在此元素範圍內覆寫 CSS 變數，讓子元素自動繼承深色設定
   例：_Layout.cshtml 頂端的 <div class="top-banner"> */
.top-banner {
    /* Override CSS variables to dark values at element scope;
       child elements using var() inherit these automatically. */
    --bg-header:      rgba(15,23,42,0.97);
    --border-color:   rgba(255,255,255,0.08);
    --shadow-header:  0 4px 24px rgba(0,0,0,0.35);
    --accent-dark:    #60A5FA;
    --text-secondary: #CBD5E1;

    width: 100%;
    height: 64px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-header);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* banner-short 和 env-badge 用硬碼色，需另外 override */
/* Banner 中的系統簡稱（例：COS）在深色 Banner 底下顯示黃色字 */
.top-banner .banner-short {
    color: #fbbf24;
}
/* Banner 中的環境標籤（例：DEV、UAT）在深色底下顯示暗紅底淡紅字 */
.top-banner .chq-env-badge {
    background: rgba(239,68,68,0.2);
    color: #F87171;
}

/* Banner 中間彈性區塊，撐滿 Logo 與右側按鈕之間的空間
   用於放置系統全名、簡稱、登入者資訊 */
.banner-center {
    flex: 1;
    min-width: 0;
}

/* 系統全名文字（例：雲總部）——深藍色粗體，字距 0.5px */
.banner-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--accent-dark);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* 系統簡稱文字（例：COS）
   正常模式：棕色；深色模式：黃色
   從 appsettings.json 的 SitePorductShortName 動態填入 */
.banner-short {
    font-weight: 700;
    font-size: 1.1rem;
    color: #b45309;
}
html.dark .banner-short {
    color: #fbbf24;
}

/* Banner 右側登入者名稱文字（細小、溢出時顯示省略號）
   例：顯示目前登入的員工姓名 */
.banner-user {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Banner 右側整體區塊（垂直居中，靠右對齊）
   包含環境標籤、主題切換按鈕等元件 */
.banner-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    gap: 2px;
}

/* Banner 右側下排（水平排列，放置環境標籤與主題切換按鈕） */
.banner-right-sub {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === Env badge === */
/* 環境標籤（顯示目前執行環境）
   正常模式：淡紅底深紅字
   深色模式：暗紅底淡紅字
   例：DEV 環境頂部 Banner 右側顯示「DEV」紅色標籤 */
.chq-env-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    background: #FEE2E2;
    color: #B91C1C;
}
html.dark .chq-env-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

/* === Theme toggle button (in header) === */
/* 深色/淺色主題切換按鈕（右上角太陽/月亮圖示）
   滑鼠懸停時背景改為主色調淡底色 */
.chq-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.chq-theme-btn:hover {
    background: var(--accent-hover-bg);
    color: var(--accent-dark);
    border-color: var(--accent);
}
.chq-theme-btn svg {
    width: 18px;
    height: 18px;
}

/* === Back Nav === */
/* 次要導覽列改用 Design System 變數（背景/邊框/文字色）
   讓此列支援深色模式切換
   例：BranchOrder/Update.cshtml 頂部「返回」列 */
.aw-nav-color {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: background 0.3s, border-color 0.3s;
}

/* 次要導覽列的返回按鈕（方形點擊區域，透明背景）
   懸停時顯示主色調淡底色 */
.aw-nav-btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    margin: 0 6px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.aw-nav-btn-back:hover {
    background: var(--accent-hover-bg);
    color: var(--accent-dark);
}
.aw-nav-btn-back svg {
    width: 20px;
    height: 20px;
}
.aw-nav-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0.85;
    flex-shrink: 0;
}

/* === Bottom Float Menu === */
/* 底部導覽列（Design System 版本）
   高度增為 56px，使用 Design System 變數支援深色模式
   z-index:9999 確保浮在所有內容之上 */
.float-menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px;
    z-index: 9999;
    background: var(--bg-header);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    transition: background 0.3s, border-color 0.3s;
    display: block;
}

/* 底部選單 ul 清除預設 margin（避免 Bootstrap 的 ul margin 造成位移） */
.float-menu ul {
    margin: 0;
}

/* 底部選單每個 li 等比分配空間（flex:1） */
.float-menu li {
    flex: 1;
    height: 100%;
}

/* fm-item: replaces the old figure element */
/* 底部選單單一項目按鈕（取代舊版 figure 元素）
   垂直排列：SVG 圖示在上、文字標籤在下
   例：「首頁」、「庫存」、「訂單」等功能入口 */
.fm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 3px;
    cursor: pointer;
    color: var(--text-secondary);
    border: none;
    background: transparent;
    padding: 0;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent; /* 行動裝置點擊不顯示藍色閃爍框 */
}
.fm-item:hover,
.fm-item:active {
    color: var(--accent-dark); /* 懸停/點擊時換主色調 */
}
.fm-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor; /* 繼承父元素文字色，跟隨主題自動切換 */
    flex-shrink: 0;
}

/* 底部選單項目文字標籤（小字、半粗體）
   例：「首頁」二字顯示在圖示下方 */
.fm-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;
}

/* === Dark mode — modal === */
/* 深色模式下 Bootstrap Modal 視窗改用 Design System 深色背景
   例：訂單明細彈跳視窗、商品搜尋彈跳視窗在深色模式下的外觀 */
html.dark .modal-content {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html.dark .modal-header {
    border-bottom-color: var(--border-color);
}

/* =====================================================
   Flex layout — 解決 Chrome DevTools position:fixed 問題
   body 固定為 viewport 高度，container 內部捲動，
   float-menu 作為 flex child 自然停在底部，
   完全不依賴 position:fixed 的 viewport 定位。
   ===================================================== */
/* 解決 iOS Safari / Chrome DevTools 展開時 fixed 元素位移的問題
   使用 dvh（Dynamic Viewport Height）精確符合可視區域高度
   在套用此 class 的頁面（例：List.cshtml），整個頁面為一個 flex column */
.chq-layout-body {
    height: var(--chq-dvh, 100dvh); /* window.innerHeight 注入值，100dvh 為 fallback */
    min-height: 0;                  /* override chq-design-system.css body{min-height:100vh} */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;
}

/* float-menu 在 flex 佈局下不需要 fixed，成為 flex column 的最後一個子項目 */
/* 在 flex 佈局模式下，底部選單改為相對定位
   自然排在 flex column 最後，不需要 position:fixed */
.chq-layout-body .float-menu {
    position: relative;
    bottom: auto;
    z-index: 1;
    flex-shrink: 0;
    width: 100%;
}

/* === Dark mode — Bootstrap table/input overrides === */
/* 深色模式下覆蓋 Bootstrap 預設的白底黑字
   讓表格和輸入元件使用 Design System 深色色彩
   例：庫存清單表格、訂單查詢篩選器在深色模式下的外觀 */
html.dark .table {
    color: var(--text-primary);
}
html.dark .form-control,
html.dark .form-select {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html.dark .form-control:focus,
html.dark .form-select:focus {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* === Desktop Mode: Float menu 移至左側 === */
/* 桌機模式（≥ 768px）：底部導覽改為左側垂直側欄
   寬度 70px，圖示與文字由上往下排列
   body 左側 padding 70px 確保主內容不被側欄遮住 */
@media (min-width: 768px) {
    /* body 整體左側留出側欄寬度，讓所有子項目自動縮減可用寬度，防止右側溢出 */
    .chq-layout-body {
        padding-left: 70px;
    }

    /* 側欄：寬度 56px × 1.25 = 70px */
    .chq-layout-body .float-menu {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 70px;
        height: 100%;
        border-top: none;
        border-right: 1px solid var(--border-color);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
        z-index: 9999;
    }

    /* 選項改為垂直排列，由上往下 */
    .float-menu ul {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        height: 100%;
    }

    .float-menu li {
        height: auto;
        flex: 0 0 auto;
    }

    /* 每個按鈕給垂直 padding 作為點擊區域 */
    .fm-item {
        height: auto;
        padding: 14px 0;
    }

    /* fontSize × 1.1（12px → 13.2px） */
    .fm-label {
        font-size: 13.2px;
    }

    /* Modified by Claude, 2026.06.09
       商品彈跳視窗在 Desktop mode 下從左側 sidebar（70px）右邊開始，
       避免被 z-index:9999 的側欄遮住左邊內容。 */
    #singleFieldModal .modal-dialog,
    #productModal .modal-dialog {
        left: 70px !important;
        width: calc(100% - 70px) !important;
    }
}