/* ============================================================================
   DLA POS Lite for QuickBooks Online — Design System
   Ported 1:1 from RetailReportQBO.Client/src/index.css

   本檔是「純樣式層」。它不改任何後端行為、不改任何 C# 產生的 markup 契約，
   只負責把既有的 Bootstrap 5 / jQuery EasyUI / bootstrap-table 畫面重新上皮，
   讓 DLAL.ItemLastPriceSoldQBO 看起來與 Retail Calendar Report 完全一致。

   載入順序很重要 —— 這支必須排在 bootstrap / easyui / custom_DLAL.css 之後，
   否則 EasyUI 的預設樣式會蓋回來。

   章節：
     0. 字型
     1. 設計語彙 (tokens)
     2. 基底 + Bootstrap 重新配色
     3. 登入頁 (split screen)
     4. App Shell：側邊欄 + 頂欄
     5. 頁面元件：hero / quick-card / panel-card / table-modern …
     6. DLAL 既有 class 的橋接
     7. jQuery EasyUI 覆寫（accordion / datagrid / 表單控制項 / 按鈕）
     8. bootstrap-table 覆寫
     9. 列印
   ========================================================================== */


/* ============================================================
   0. 字型
   ------------------------------------------------------------
   CSP 是 font-src 'self'，所以字型一律走本機檔案，不能用 Google Fonts CDN。

   檔名對應的是 @fontsource 套件裡 files/ 資料夾的原始檔名，複製過來時
   不要改名。只取 latin 子集 —— 這個介面全是英文，latin-ext / cyrillic /
   greek / vietnamese 都用不到，載進去只是白白多幾百 KB。

   來源：D:\Customer.data\node_modules\@fontsource\{inter,poppins}\files\
   目的：~\Content\fonts\

   檔案還沒放進去也不會壞掉：每條規則都以 local() 開頭，找不到檔案時
   font-family 會自動退回 Segoe UI / system-ui，版面完全不受影響。
   ============================================================ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter'), url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Inter Medium'), url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Inter SemiBold'), url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Inter Bold'), url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Poppins Medium'), url('fonts/poppins-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Poppins SemiBold'), url('fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Poppins Bold'), url('fonts/poppins-latin-700-normal.woff2') format('woff2');
}


/* ============================================================
   1. 設計語彙 (tokens)
   ------------------------------------------------------------
   數值與參考專案逐字相同。要調整全站色調就改這裡，不要改下面的規則。
   ============================================================ */
:root {
    /* Brand palette */
    --brand-900: #1d0348;
    --brand-800: #2a0668;
    --brand-700: #32007e;
    --brand-600: #3e009a; /* primary brand purple */
    --brand-500: #5416c4;
    --brand-400: #7c4fd9;
    --brand-200: #d5c5f3;
    --brand-100: #ede6fa;
    --brand-50: #f7f3fd;
    --green-700: #4d7d2f;
    --green-600: #5a9137;
    --green-500: #70ad47; /* brand green */
    --green-100: #e9f4e0;
    --orange-500: #f0912d;
    /* Neutrals */
    --ink-900: #191c26;
    --ink-800: #2a2f42; /* 參考專案只在 fallback 裡用到，這裡補齊定義 */
    --ink-700: #3c4257;
    --ink-600: #545a70;
    --ink-500: #646a80;
    --ink-400: #9096a8;
    --ink-300: #c3c7d4;
    --ink-200: #e2e4ec;
    --ink-100: #eef0f5;
    --surface: #ffffff;
    --bg: #f5f6fa;
    /* Semantic */
    --danger: #cf3d3d;
    --danger-bg: #fdeeee;
    --success: var(--green-600);
    --success-bg: var(--green-100);
    /* Type */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Poppins', 'Inter', system-ui, sans-serif;
    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(20, 12, 45, 0.06), 0 1px 3px rgba(20, 12, 45, 0.08);
    --shadow-md: 0 4px 12px rgba(20, 12, 45, 0.08), 0 2px 4px rgba(20, 12, 45, 0.05);
    --shadow-lg: 0 12px 32px rgba(20, 12, 45, 0.14), 0 4px 8px rgba(20, 12, 45, 0.06);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --sidebar-w: 264px;
    --topbar-h: 64px;
}


/* ============================================================
   2. 基底 + Bootstrap 重新配色
   ============================================================ */
html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .font-display {
    font-family: var(--font-display);
    color: var(--ink-900);
}

.btn-primary {
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-disabled-bg: var(--brand-400);
    --bs-btn-disabled-border-color: var(--brand-400);
    --bs-btn-focus-shadow-rgb: 124, 79, 217;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-600);
    --bs-btn-border-color: var(--brand-200);
    --bs-btn-hover-bg: var(--brand-50);
    --bs-btn-hover-color: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-400);
    --bs-btn-active-bg: var(--brand-100);
    --bs-btn-active-color: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-400);
    --bs-btn-focus-shadow-rgb: 124, 79, 217;
}

.btn-success {
    --bs-btn-bg: var(--green-600);
    --bs-btn-border-color: var(--green-600);
    --bs-btn-hover-bg: var(--green-700);
    --bs-btn-hover-border-color: var(--green-700);
    --bs-btn-focus-shadow-rgb: 112, 173, 71;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 0.22rem rgba(124, 79, 217, 0.18);
}

a {
    color: var(--brand-600);
    text-decoration: none;
}

    a:hover {
        color: var(--brand-700);
    }


/* ============================================================
   3. 登入頁 — split screen
   ============================================================ */
body.login,
body.auth-body {
    background: var(--surface);
}

.auth-shell {
    display: flex;
    min-height: 100vh;
    background: var(--surface);
}

.auth-brand {
    flex: 1.15;
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    color: #fff;
    background: radial-gradient(1100px 640px at -10% -15%, rgba(124, 79, 217, 0.55) 0%, transparent 60%), radial-gradient(900px 600px at 110% 115%, rgba(112, 173, 71, 0.30) 0%, transparent 55%), linear-gradient(152deg, var(--brand-900) 0%, var(--brand-800) 45%, var(--brand-700) 100%);
    overflow: hidden;
}

@media (min-width: 992px) {
    .auth-brand {
        display: flex;
    }
}

.auth-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

.auth-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

    .auth-brand-logo .logo-chip {
        background: #fff;
        border-radius: 10px;
        padding: 8px 14px;
        box-shadow: var(--shadow-md);
    }

    .auth-brand-logo img {
        height: 34px;
        display: block;
    }

.auth-brand-main {
    position: relative;
    z-index: 1;
}

.auth-product-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c9e8ae;
    margin-bottom: 14px;
}

.auth-product-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.auth-product-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.78);
    max-width: 46ch;
    margin-bottom: 36px;
}

.auth-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
    max-width: 52ch;
}

    .auth-feature .icon-tile {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        font-size: 18px;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .auth-feature h6 {
        color: #fff;
        font-size: 14.5px;
        font-weight: 600;
        margin: 0 0 2px;
        font-family: var(--font-sans);
    }

    .auth-feature p {
        color: rgba(255, 255, 255, 0.66);
        font-size: 13.5px;
        margin: 0;
    }

.auth-brand-foot {
    position: relative;
    z-index: 1;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

.auth-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
    background: var(--surface);
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-mobile-logo {
    text-align: center;
    margin-bottom: 28px;
}

    .auth-mobile-logo img {
        height: 40px;
    }

@media (min-width: 992px) {
    .auth-mobile-logo {
        display: none;
    }
}

.auth-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.auth-subtitle {
    color: var(--ink-500);
    font-size: 14.5px;
    margin-bottom: 30px;
}

.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 6px;
}

.auth-input {
    height: 46px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--ink-200);
    font-size: 14.5px;
}

    .auth-input::placeholder {
        color: var(--ink-400);
    }

.input-icon-group {
    position: relative;
}

    .input-icon-group > i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        font-size: 15px;
        pointer-events: none;
        z-index: 4;
    }

    .input-icon-group .auth-input {
        padding-left: 40px;
    }

.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ink-400);
    padding: 8px 10px;
    border-radius: 6px;
    line-height: 1;
    z-index: 4;
}

    .password-toggle:hover {
        color: var(--ink-700);
    }

.btn-auth {
    height: 48px;
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.01em;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--danger-bg);
    color: #a63232;
    border: 1px solid #f3cccc;
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 13.5px;
    margin-bottom: 18px;
}

    .auth-alert i {
        margin-top: 1px;
    }

.auth-foot {
    margin-top: 34px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-400);
}

.auth-secure-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink-400);
    margin-top: 16px;
}

/* Google 要求 reCAPTCHA 必須有可見的出處說明。它會折成兩行，所以是 block，
   不是上面那個 inline-flex。 */
.auth-recaptcha-note {
    display: block;
    font-size: 11.5px;
    line-height: 1.5;
    margin-top: 8px;
}

    .auth-recaptcha-note a {
        color: var(--ink-400);
        text-decoration: underline;
    }

        .auth-recaptcha-note a:hover {
            color: var(--brand-600);
        }

/* reCAPTCHA v2 的 checkbox widget（Recaptcha.Web.Mvc 產生的 iframe）置中。 */
.auth-captcha {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

    .auth-captcha > div {
        max-width: 100%;
    }

.link-plain {
    background: none;
    border: 0;
    padding: 0;
    color: var(--brand-600);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
}

    .link-plain:hover {
        color: var(--brand-700);
        text-decoration: underline;
    }


/* ============================================================
   4. App Shell — 側邊欄 + 頂欄
   ============================================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}

.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.82);
    background: radial-gradient(500px 300px at -20% -5%, rgba(124, 79, 217, 0.4) 0%, transparent 60%), linear-gradient(180deg, var(--brand-900) 0%, var(--brand-800) 60%, #250a56 100%);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    transition: transform 0.22s ease, width 0.18s ease;
}

    .app-sidebar .sidebar-head {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 18px 18px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-decoration: none;
    }

.sidebar-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

    .sidebar-mark img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

.sidebar-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14.5px;
    color: #fff;
    line-height: 1.25;
}

    .sidebar-title small {
        display: block;
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 0.02em;
    }

.sidebar-nav {
    flex: 1;
    /* overflow-x 一定要 hidden。
     只寫 overflow-y: auto 的話，x 軸會被瀏覽器隱含設成 auto，任何一個
     撐得比側邊欄寬的子元素（實際案例：Intuit 那顆 Disconnect 按鈕）
     都會在底部長出一條橫向捲軸。 */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px;
    min-width: 0;
}

    /* 捲軸在深色底上要低調 —— 預設的白色捲軸槽在紫色漸層上非常刺眼。 */
    .sidebar-nav::-webkit-scrollbar {
        width: 6px;
        height: 0;
    }

    .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.16);
        border-radius: 999px;
    }

        .sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.28);
        }

.sidebar-section {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    padding: 12px 10px 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9.5px 12px;
    margin-bottom: 2px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.8px;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

    .sidebar-link i {
        font-size: 15px;
        width: 18px;
        text-align: center;
        opacity: 0.85;
        flex: 0 0 auto;
    }
    /* 選單文字由後端的功能名稱決定，長度不受控（例："Invoice/Sales Receipt"）。
   min-width: 0 + overflow-wrap 讓它在側邊欄寬度內自己折行，而不是撐寬容器
   逼出橫向捲軸。 */
    .sidebar-link > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .sidebar-link.active {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--green-500);
    }

    .sidebar-link .chev {
        margin-left: auto;
        font-size: 11px;
        width: auto;
        transition: transform 0.15s;
    }

        .sidebar-link .chev.open {
            transform: rotate(90deg);
        }

.sidebar-sub {
    overflow: hidden;
    padding-left: 14px;
}

    .sidebar-sub .sidebar-link {
        font-size: 13.2px;
        padding: 8px 12px;
    }

.sidebar-foot {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
}

    .sidebar-foot a {
        color: rgba(255, 255, 255, 0.7);
    }

        .sidebar-foot a:hover {
            color: #fff;
        }

/* ---- Intuit 的 Connect / Disconnect ----------------------------------
   這兩顆是後端 markup 帶進來的，帶著寫死的 inline style（白底藍字藍框），
   在深紫色側邊欄上非常突兀，而且原本的寬度會撐出橫向捲軸。
   inline style 只能用 !important 蓋。 */
.sidebar-intuit {
    min-width: 0;
}

    .sidebar-intuit #Intuit_buttons_con,
    .sidebar-intuit input[type="image"] {
        max-width: 100%;
        height: auto;
    }

    .sidebar-intuit form {
        margin: 0;
    }

    .sidebar-intuit input[type="submit"] {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-family: var(--font-sans) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        background-color: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 9px !important;
        padding: 8px 12px !important;
        position: static !important;
        bottom: auto !important;
        transition: background-color 0.12s, border-color 0.12s;
    }

        .sidebar-intuit input[type="submit"]:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
            color: #fff !important;
        }

@media (min-width: 992px) {
    .app-shell.sidebar-collapsed .sidebar-intuit {
        display: none;
    }
}

/* ---- 拖曳改寬度的把手 ------------------------------------------------
   收合（264px ↔ 76px）是兩段式的，但選單文字長度由後端決定，兩段不一定夠用。
   這條把手貼在側邊欄右緣，可以無段調整寬度，寬度記在 localStorage。
   只在桌機出現 —— 手機是 off-canvas，改寬度沒有意義。 */
.sidebar-resizer {
    display: none;
}

@media (min-width: 992px) {
    .sidebar-resizer {
        display: block;
        position: absolute;
        top: 0;
        right: -3px;
        width: 6px;
        height: 100%;
        cursor: col-resize;
        z-index: 1045;
        background: transparent;
    }

        .sidebar-resizer::after {
            content: '';
            position: absolute;
            inset: 0 2px;
            background: transparent;
            transition: background 0.12s;
        }

        .sidebar-resizer:hover::after,
        .sidebar-resizer.dragging::after {
            background: var(--green-500);
        }
    /* 收合成圖示模式時寬度是固定的，把手要收起來，否則兩種寬度來源會打架。 */
    .app-shell.sidebar-collapsed .sidebar-resizer {
        display: none;
    }
    /* 拖曳中鎖住整頁選取，否則游標掃過內容會把文字反白。 */
    .app-shell.is-resizing {
        user-select: none;
        cursor: col-resize;
    }

        .app-shell.is-resizing .app-sidebar,
        .app-shell.is-resizing .app-main {
            transition: none;
        }
}

/* Main column */
.app-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--ink-200);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* 這兩顆按鈕的內容只有一個圖示字符。萬一圖示字型沒載到，按鈕就會變成
   一塊看不見的空白 —— 使用者會以為功能不存在（這正是第一版回報的問題）。
   給一個淡框與最小尺寸當保險：字型正常時只是多一條細邊，字型掛掉時
   按鈕至少還看得見、點得到。 */
.topbar-burger,
.topbar-collapse {
    border: 1px solid var(--ink-200);
    background: transparent;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    line-height: 1;
    flex: 0 0 auto;
}

.topbar-burger {
    font-size: 20px;
    color: var(--ink-700);
}

.topbar-collapse {
    font-size: 18px;
    color: var(--ink-500);
}

.topbar-burger:hover {
    background: var(--ink-100);
}

.topbar-collapse:hover {
    background: var(--ink-100);
    color: var(--ink-700);
}

.topbar-burger:focus-visible,
.topbar-collapse:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 1px;
}

@media (min-width: 992px) {
    .topbar-collapse {
        display: inline-flex;
    }
}

.topbar-crumb {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-help {
    display: none;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink-500);
    padding-right: 12px;
    border-right: 1px solid var(--ink-200);
}

    .topbar-help a {
        color: var(--ink-500);
    }

        .topbar-help a:hover {
            color: var(--brand-600);
        }

@media (min-width: 768px) {
    .topbar-help {
        display: inline-flex;
    }
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 6px 8px;
    border-radius: 10px;
}

    .user-chip:hover {
        background: var(--ink-100);
    }

    .user-chip::after {
        display: none;
    }

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand-100);
    color: var(--brand-600);
    font-weight: 700;
    font-size: 13.5px;
    flex-shrink: 0;
}

.user-meta {
    text-align: left;
    line-height: 1.15;
    display: none;
}

@media (min-width: 576px) {
    .user-meta {
        display: block;
    }
}

.user-meta .name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-900);
}

.user-meta .role {
    font-size: 11.5px;
    color: var(--ink-400);
}

.app-content {
    flex: 1;
    padding: 26px 26px 20px;
    min-width: 0;
}

.app-footer {
    padding: 14px 26px 20px;
    font-size: 12.5px;
    color: var(--ink-400);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

    .app-footer a {
        color: var(--ink-500);
    }

        .app-footer a:hover {
            color: var(--brand-600);
        }

/* 手機 / 平板：側邊欄變成 off-canvas */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }

        .app-sidebar.open {
            transform: translateX(0);
        }

    .app-main {
        margin-left: 0;
    }

    .topbar-burger {
        display: inline-flex;
    }

    .app-content {
        padding: 18px 14px 16px;
    }
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 8, 35, 0.45);
    z-index: 1035;
}

/* 桌機：收合成純圖示模式 */
@media (min-width: 992px) {
    .app-shell.sidebar-collapsed .app-sidebar {
        width: 76px;
    }

    .app-shell.sidebar-collapsed .app-main {
        margin-left: 76px;
    }

    .app-shell.sidebar-collapsed .sidebar-title,
    .app-shell.sidebar-collapsed .sidebar-link span,
    .app-shell.sidebar-collapsed .sidebar-foot,
    .app-shell.sidebar-collapsed .sidebar-section,
    .app-shell.sidebar-collapsed .sidebar-sub {
        display: none;
    }

    .app-shell.sidebar-collapsed .sidebar-head {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .app-shell.sidebar-collapsed .sidebar-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-shell.sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

        .app-shell.sidebar-collapsed .sidebar-link i {
            width: auto;
            font-size: 17px;
        }

        .app-shell.sidebar-collapsed .sidebar-link.active {
            box-shadow: none;
        }

            .app-shell.sidebar-collapsed .sidebar-link.active i {
                color: var(--green-500);
            }
}


/* ============================================================
   5. 頁面元件
   ============================================================ */
.page-head {
    margin-bottom: 22px;
}

    .page-head h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 4px;
        letter-spacing: -0.01em;
    }

    .page-head p {
        color: var(--ink-500);
        margin: 0;
        font-size: 14.5px;
    }

.page-head-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-card {
    position: relative;
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 34px 36px;
    overflow: hidden;
    background: radial-gradient(700px 380px at 108% -30%, rgba(112, 173, 71, 0.38) 0%, transparent 55%), radial-gradient(800px 420px at -15% 120%, rgba(124, 79, 217, 0.5) 0%, transparent 60%), linear-gradient(140deg, var(--brand-900) 0%, var(--brand-700) 100%);
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
}

    .hero-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
        background-size: 24px 24px;
        pointer-events: none;
    }

    .hero-card .hero-eyebrow {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #c9e8ae;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
    }

    .hero-card h2 {
        color: #fff;
        font-size: clamp(22px, 2.6vw, 30px);
        font-weight: 700;
        margin: 0 0 10px;
        letter-spacing: -0.02em;
        position: relative;
        z-index: 1;
    }

    .hero-card p {
        color: rgba(255, 255, 255, 0.78);
        max-width: 62ch;
        margin: 0 0 20px;
        font-size: 15px;
        position: relative;
        z-index: 1;
    }

    .hero-card .btn-light {
        font-weight: 600;
        color: var(--brand-700);
    }

/* 首頁 hero 的插圖。文字與圖並排，圖是裝飾性的，窄畫面直接不出現 ——
   擠在文字下面只會把「開始使用」那顆按鈕推到摺線以下。 */
.welcome-hero {
    display: flex;
    align-items: center;
    gap: 32px;
}

.welcome-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}

    .welcome-hero-text p {
        margin-bottom: 20px;
    }

.welcome-hero-art {
    flex: 0 0 auto;
    width: 200px;
    max-width: 34%;
    height: auto;
    position: relative;
    z-index: 1;
    display: none;
    /* 原圖是白底的線稿，直接放在深紫底上會出現一塊白方塊。
     混合模式讓白底透掉，只留線條。 */
    mix-blend-mode: screen;
    opacity: 0.9;
}

@media (min-width: 992px) {
    .welcome-hero-art {
        display: block;
    }
}

.quick-card {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

    .quick-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
        border-color: var(--brand-200);
        color: inherit;
    }

    .quick-card .icon-tile {
        width: 44px;
        height: 44px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        font-size: 20px;
    }

.icon-tile.tile-purple {
    background: var(--brand-100);
    color: var(--brand-600);
}

.icon-tile.tile-green {
    background: var(--green-100);
    color: var(--green-600);
}

.icon-tile.tile-orange {
    background: #fdeedd;
    color: var(--orange-500);
}

.quick-card h5 {
    font-size: 15.5px;
    font-weight: 600;
    margin: 0;
}

.quick-card p {
    font-size: 13.5px;
    color: var(--ink-500);
    margin: 0;
    flex: 1;
}

.quick-card .go {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-600);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.support-strip {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin-top: 24px;
}

.support-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .support-item .icon-tile {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 16px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
    }

    .support-item .lbl {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-400);
        margin-bottom: 2px;
    }

    .support-item .val {
        font-size: 13.5px;
        color: var(--ink-700);
        font-weight: 500;
    }

        .support-item .val a {
            text-decoration: none;
        }

/* 一般內容卡。注意：.panel-card 本身「沒有」內距，內距一律由使用它的區塊自己給。 */
.panel-card {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

    .panel-card.p-0 {
        padding: 0;
        overflow: hidden;
    }

.card-sec-head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-600);
    padding: 16px 22px 10px;
    border-bottom: 1px solid var(--ink-100);
}

    .card-sec-head:not(:first-child) {
        border-top: 1px solid var(--ink-100);
    }

.toolbar-card {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 18px;
}

.toolbar-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 5px;
}

.toolbar-field .form-control,
.toolbar-field .form-select {
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--ink-200);
    min-width: 250px;
}

.toolbar-spacer {
    flex: 1;
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.8px;
}

    .table-modern thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-400);
        background: var(--bg);
        border-bottom: 1px solid var(--ink-200);
        padding: 11px 16px;
        text-align: left;
        white-space: nowrap;
    }

    .table-modern tbody td {
        padding: 13px 16px;
        border-bottom: 1px solid var(--ink-100);
        vertical-align: middle;
    }

    .table-modern tbody tr:last-child td {
        border-bottom: 0;
    }

    .table-modern tbody tr:hover {
        background: var(--brand-50);
    }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

    .status-badge .dot-ind {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

.st-connected {
    background: var(--green-100);
    color: var(--green-700);
}

    .st-connected .dot-ind {
        background: var(--green-500);
    }

.st-off {
    background: var(--ink-100);
    color: var(--ink-500);
}

    .st-off .dot-ind {
        background: var(--ink-400);
    }

.st-pending {
    background: #fdeedd;
    color: #b26a15;
}

    .st-pending .dot-ind {
        background: var(--orange-500);
    }

/* Intuit 官方「Connect to QuickBooks」按鈕。
   依 Intuit 品牌規範：圖檔照原樣使用，不重新上色、不變形、不縮到最小尺寸以下，
   四周留白。外框只提供點擊區與 focus ring，不對圖檔加任何視覺樣式。 */
.intuit-connect-btn {
    border: 0;
    background: transparent;
    padding: 6px;
    border-radius: 8px;
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

    .intuit-connect-btn img,
    .intuit-connect-btn input[type="image"] {
        height: 36px;
        width: auto;
        display: block;
        user-select: none;
    }

    .intuit-connect-btn:focus-visible {
        outline: 2px solid var(--brand-400);
        outline-offset: 2px;
    }

    .intuit-connect-btn:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

.hero-card .intuit-connect-btn:focus-visible {
    outline-color: #fff;
}

.empty-state {
    text-align: center;
    padding: 56px 20px;
}

    .empty-state .icon-tile {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        font-size: 26px;
        margin: 0 auto 14px;
        display: grid;
        place-items: center;
    }

    .empty-state h5 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .empty-state p {
        color: var(--ink-500);
        font-size: 13.5px;
        margin-bottom: 18px;
    }

.page-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13.8px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

    .page-alert.alert-ok {
        background: var(--success-bg);
        color: var(--green-700);
        border-color: #cfe8bd;
    }

    .page-alert.alert-err {
        background: var(--danger-bg);
        color: #a63232;
        border-color: #f3cccc;
    }

    .page-alert.alert-info {
        background: #eef2ff;
        color: #3730a3;
        border-color: #c7d2fe;
    }

    .page-alert .btn-close-x {
        margin-left: auto;
        border: 0;
        background: transparent;
        color: inherit;
        opacity: 0.6;
        padding: 0 4px;
        line-height: 1;
        font-size: 16px;
    }

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 22px;
    padding: 16px 22px 20px;
}

.info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 0;
}

.info-ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--brand-50);
    color: var(--brand-600);
    font-size: 15px;
}

.info-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.info-value {
    font-size: 14px;
    color: var(--ink-900);
    font-weight: 500;
    word-break: break-word;
}


/* ============================================================
   6. DLAL 既有 class 的橋接
   ------------------------------------------------------------
   下面這些 class 是 C# 端（HTMLModel.OutputHTML / OutputButton）與舊 View
   寫死輸出的，不能改名。這裡只是把它們的外觀接到新的設計語彙上。
   ============================================================ */

/* 每頁最上方那條「Date / 標題 / Code」列。 */
.app-content .themed-grid-col,
.app-content .themed-grid-col-1 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.lblBusinessDate,
#lblTransCode {
    font-size: 12px;
    color: var(--ink-400);
    font-weight: 500;
}

/* 舊版的頁面標題列：置中、16px、黑字。改成 page-head 的語彙。 */
#lblTitle {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}

/* 欄位標籤 */
.app-content label.th,
.app-content .th {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 0;
}

/* 必填星號 */
.NotEmpty {
    color: var(--danger);
    font-weight: 700;
}

/* 訊息列 */
.SystemMessage {
    font-size: 13px;
    color: var(--brand-700);
    font-weight: 500;
}

    .SystemMessage:empty {
        display: none;
    }

/* 舊版容器：x_panel 原本是 gentelella 的白底方框，改成 panel-card。 */
.x_panel {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
}

/* 舊版錯誤字 */
.red, label.red {
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
}


/* ============================================================
   6b. 內頁自帶樣式的覆寫（主要是 _SalesOrderAddPageQBO.cshtml）
   ------------------------------------------------------------
   這一章存在的原因：那頁在 <body> 裡自己帶了一個 <style> 區塊，寫死了
   #0D6EFD 的分頁標籤，還有一堆 class="btn-sm btn-primary"（注意：沒有 .btn）。

   兩個都不能靠一般的覆寫解決：
     • 頁面的 <style> 在 <link> 之後才出現，同權重時它贏 → 這裡一律用
       `.app-content` 開頭把權重墊高一級（0,3,0 > 0,2,0），不用 !important。
     • Bootstrap 5 的 .btn-primary 只設定 --bs-btn-* 變數，真正上色的是 .btn。
       少了 .btn 的元素拿不到任何顏色，所以下面要直接給 background/color。

   完全沒有改動那支 .cshtml —— 它有 101 KB，動它的風險遠大於在這裡多寫幾條規則。
   ============================================================ */

/* ---- 分頁標籤：藍底方塊 → 品牌色底線式 ---- */
.app-content .nav-tabs {
    border-bottom: 1px solid var(--ink-200);
    gap: 2px;
}

    .app-content .nav-tabs .nav-link,
    .app-content .nav-tabs .nav-link.active {
        color: var(--ink-500);
        background-color: transparent;
        border: 0;
        border-bottom: 2.5px solid transparent;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 600;
        padding: 9px 16px;
        margin-bottom: -1px;
        cursor: pointer;
        transition: color 0.12s, background-color 0.12s, border-color 0.12s;
    }

        .app-content .nav-tabs .nav-link:hover {
            color: var(--brand-700);
            background-color: var(--brand-50);
            border-bottom-color: var(--brand-200);
        }

        .app-content .nav-tabs .nav-link.active {
            color: var(--brand-700);
            background-color: transparent;
            border-bottom-color: var(--brand-600);
        }

/* ---- 缺少 .btn 的按鈕 ---- */
.app-content .btn-primary:not(.btn),
.app-content .btn-sm.btn-primary:not(.btn),
.app-content input[type="button"].btn-primary:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--brand-600);
    border: 1px solid var(--brand-600);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}

    .app-content .btn-primary:not(.btn):hover,
    .app-content .btn-sm.btn-primary:not(.btn):hover,
    .app-content input[type="button"].btn-primary:not(.btn):hover {
        background-color: var(--brand-700);
        border-color: var(--brand-700);
        color: #fff;
    }

/* 正常的 .btn.btn-primary 走 §2 的 --bs-btn-* 覆寫，這裡只統一圓角與字重。 */
.app-content .btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.app-content .btn-sm {
    font-size: 13px;
}

/* 那顆圓形的重新整理鈕（#btnRefresh）帶 inline 的 width/height/border-radius，
   只需要把顏色接上品牌色，尺寸交給它自己的 inline style。 */
.app-content #btnRefresh {
    justify-content: center;
}

/* ---- 頁面上的藍色純文字 ---- */
.app-content .fl-ActiveCompany {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-500);
    text-align: left;
}

    .app-content .fl-ActiveCompany a,
    .app-content .fl-ActiveCompany span {
        color: var(--brand-600);
        font-weight: 600;
    }

/* ---- 表單控制項高度統一 ----
   同一列裡混著 select / input / EasyUI combo 時高度會參差，這裡拉齊。 */
.app-content .col-form-label,
.app-content label:not(.nav-link):not(.th) {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 4px;
}

.app-content table select,
.app-content table input[type="text"],
.app-content table input[type="number"] {
    font-size: 13px;
}

/* 頁面自帶的黃色錯誤標記，換成語意一致的紅色系。 */
.app-content .ErrorData {
    background-color: var(--danger-bg) !important;
    box-shadow: inset 0 0 0 1.5px #f3cccc;
}


/* ============================================================
   6c. Sales Order Add / Last Price of Item Sold per Customer
   ------------------------------------------------------------
   全部規則都掛在 .page-salesorderaddqbo 底下（class 由 _DLALMasterPage 依
   ViewData["Category"] 印出），所以絕對不會外溢到其他頁。

   為什麼是純 CSS：那支 .cshtml 有 101 KB、1584 行，畫面狀態幾乎全由 JS 切
   class 控制（.notOthers / .others / .isRefund / .isReceiptSelected /
   .balanceDue / .forSalesReceipt / .discountExist / .TaxFirst …），還有幾百個
   id 被外部 JS 直接抓。改 markup 的風險遠高於這裡多寫幾條選擇器。

   這一版把畫面重新分組成四張卡：
     ① 頁首資訊列（Active Company）
     ② 客戶卡（#customer_collapse）
     ③ 品項輸入列（.row.isNotRefund）—— POS 的主要動作區，給它最強的視覺重量
     ④ 明細表（#table2）＋ 金額結算（右側 .col-sm-7）
   最後把底部那條 fixed footer 修好 —— 它原本會壓在側邊欄底下。
   ============================================================ */

/* ---- 容器歸零 ----
   .container.body / .main_container 是舊 gentelella 佈局的殘留。現在外層已經
   是 .app-content，再套一層 .container 會多吃一個 Bootstrap 的
   `max-width: 1320px`（@media ≥1400px），整頁被夾在中間，右邊留一大片空白。

   這裡用 !important，是刻意的。上一版寫的是
   `.page-salesorderaddqbo > .container.body`，權重上贏得了 Bootstrap 的
   `.container`，實測卻沒生效 —— 代表那個 `>` 的假設不成立（頁面外層還有一層
   我沒看到的包裝）。改成後代選擇器就不必再賭 DOM 的巢狀層數；而 Bootstrap 的
   max-width 藏在 media query 裡，用 !important 是最不會再翻車的寫法。

   範圍涵蓋底部 footer 的 .container（它也是 .app-content 的子孫），
   所以那條動作列也會一起變成滿版；內距在下面的 footer 段落補回去。 */
.page-salesorderaddqbo .container,
.page-salesorderaddqbo .container-sm,
.page-salesorderaddqbo .container-md,
.page-salesorderaddqbo .container-lg,
.page-salesorderaddqbo .container-xl,
.page-salesorderaddqbo .container-xxl,
.page-salesorderaddqbo .main_container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

    .page-salesorderaddqbo .main_container > .col-md-12 {
        padding: 0;
    }

/* 底部有一條 fixed footer，內容要留出空間，否則最後一列會被永久蓋住。 */
.page-salesorderaddqbo {
    padding-bottom: 96px;
}

    /* ---- ① 頁首資訊列 ---- */
    .page-salesorderaddqbo > .container.body .input-group:first-child {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 0 0 12px;
        margin-bottom: 14px;
        border-bottom: 1px dashed var(--ink-200);
    }

    .page-salesorderaddqbo #lblActiveCompany {
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 600;
        color: var(--brand-600);
    }

    /* ---- 分頁列 + 右側的 Location ---- */
    .page-salesorderaddqbo .nav-tabs {
        flex: 1 1 auto;
        align-items: center;
        flex-wrap: wrap;
    }
        /* 重新整理鈕與 Location 是工具，不是分頁，把它們推到最右邊並拿掉列表語意的樣式。 */
        .page-salesorderaddqbo .nav-tabs > li:has(.refresh) {
            margin-left: auto;
        }

        .page-salesorderaddqbo .nav-tabs > li:has(.department) {
            border: 0;
        }

    .page-salesorderaddqbo .department .col-form-label {
        margin: 0 6px 0 0;
        font-size: 12.5px;
        color: var(--ink-500);
        white-space: nowrap;
    }

    .page-salesorderaddqbo #btnRefresh {
        background-color: var(--brand-600);
        border-color: var(--brand-600);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- 通用：把散落的 <p> 間距收掉 ----
   原本的 markup 大量用 <p> 當欄位容器，Bootstrap 給 <p> 的 1rem 下邊距讓
   每一列的高度都不一樣。 */
    .page-salesorderaddqbo p:empty {
        display: none;
    }

    .page-salesorderaddqbo .row > div > p,
    .page-salesorderaddqbo .row > span > p {
        margin-bottom: 0;
    }

    .page-salesorderaddqbo .col-form-label {
        padding-top: 0;
        padding-bottom: 4px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-700);
        line-height: 1.4;
    }

    /* 原始 markup 用 <hr> 分段。改成卡片之後這些線變成雜訊。 */
    .page-salesorderaddqbo .notReport > hr,
    .page-salesorderaddqbo .isReceiptSelected > hr {
        display: none;
    }

    /* ---- ② 客戶卡 ---- */
    .page-salesorderaddqbo .afterSelectedCustomer {
        display: flex !important; /* 只有 JS 把它從 display:none 打開時才會看到 */
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-bottom: 0;
        padding: 12px 16px;
        margin: 16px 0 0;
    }

        .page-salesorderaddqbo .afterSelectedCustomer[style*="display: none"],
        .page-salesorderaddqbo .afterSelectedCustomer[style*="display:none"] {
            display: none !important;
        }

    .page-salesorderaddqbo #customerSelected {
        font-size: 14px;
        font-weight: 600;
        color: var(--brand-600);
    }

    .page-salesorderaddqbo #customer_collapse {
        background: var(--surface);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        padding: 16px;
        margin-bottom: 16px;
        row-gap: 12px;
    }
        /* Bootstrap 的 .collapse 靠 display 切換；上面的 padding 不能讓它在收合時
   還撐出高度。 */
        .page-salesorderaddqbo #customer_collapse:not(.show):not(.collapsing) {
            padding: 0;
            border: 0;
        }

    .page-salesorderaddqbo #OnlinePayments {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 8px 0 0;
    }

        .page-salesorderaddqbo #OnlinePayments .form-check-label {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: var(--ink-700);
            margin: 0;
        }

    /* Bill To / Ship To / note 的 textarea 原本用 .form-control-sm（那是給
   input 用的高度類別），在 textarea 上會變成一條矮扁的框。 */
    .page-salesorderaddqbo textarea.form-control-sm {
        width: 100%;
        height: auto;
        min-height: 76px;
        font-size: 13.5px;
        border: 1.5px solid var(--ink-200);
        border-radius: var(--radius-sm);
        padding: 8px 11px;
    }

        .page-salesorderaddqbo textarea.form-control-sm:focus {
            border-color: var(--brand-400);
            box-shadow: 0 0 0 0.22rem rgba(124, 79, 217, 0.18);
            outline: none;
        }

    /* ---- ③ 品項輸入列 ----
   這是整頁使用頻率最高的一塊：選品項 → 數量 → 價格 → 稅 → 加一列。
   給它淡紫底與較粗的邊，一眼就能找到，也和下方的明細表分開。 */
    .page-salesorderaddqbo .row.isNotRefund {
        background: var(--brand-50);
        border: 1px solid var(--brand-100);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        margin: 0 0 16px;
        display: flex;
        flex-wrap: wrap;
        /* align-items: flex-end 是上一版跑版的元凶。
     這一列的兩個直接子元素是 Item/Sku/Barcode（col-sm-4）和右邊那組欄位
     （col-sm-8）。右邊那組內部是 2+3+4+2+3 = 14 欄，超過 12 所以會折成兩行、
     整塊變兩倍高；flex-end 把左邊的 Item 區塊推到那個高度的「底部」，看起來
     就是欄位標題全跑到第二行、跟右邊對不上。改成 flex-start 就對齊了。 */
        align-items: flex-start;
        gap: 12px 14px;
    }

        .page-salesorderaddqbo .row.isNotRefund > * {
            padding-left: 0;
            padding-right: 0;
            margin: 0;
            width: auto;
            max-width: none;
            min-width: 0;
        }

        .page-salesorderaddqbo .row.isNotRefund .col-form-label {
            color: var(--brand-700);
        }

    /* 順便把「14 欄塞進 12 欄」這件事一併解決：不再靠 Bootstrap 的 col-*，
   直接給每個欄位一個合理的 flex-basis，讓五個欄位排在同一行。
   寬度依內容決定：數量最窄、稅別最寬、動作鈕用自然寬度。
   .others / .notOthers 被 JS 切成 display:none 時不佔空間，
   所以 Take Payment on Account 那個模式下這組規則也不會出問題。 */
    .page-salesorderaddqbo #itemSelectSection_1 {
        flex: 1 1 300px;
    }

    .page-salesorderaddqbo .row.isNotRefund > .col-sm-2.others {
        flex: 0 0 auto;
    }

    .page-salesorderaddqbo #itemSelectSection_2 {
        flex: 2 1 560px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 14px;
        justify-content: flex-start; /* 原本是 .justify-content-end */
    }

        .page-salesorderaddqbo #itemSelectSection_2 > div {
            padding-left: 0;
            padding-right: 0;
            width: auto;
            max-width: none;
            min-width: 0;
        }

            .page-salesorderaddqbo #itemSelectSection_2 > div:nth-child(1) {
                flex: 0 1 88px;
            }
            /* Qty */
            .page-salesorderaddqbo #itemSelectSection_2 > div:nth-child(2) {
                flex: 0 1 124px;
            }
            /* Last Price */
            .page-salesorderaddqbo #itemSelectSection_2 > div:nth-child(3) {
                flex: 1 1 170px;
            }
    /* Tax */
    .page-salesorderaddqbo #itemSelectSection_6 {
        flex: 0 1 110px;
    }
    /* Sales Price */
    .page-salesorderaddqbo #itemSelectSection_5 {
        flex: 0 0 auto;
        padding-left: 0 !important;
    }

    .page-salesorderaddqbo #btnInventoryAdd {
        height: 42px;
    }
    /* Sales Price 是唯讀的計算結果，做成數字看板而不是又一個輸入框。 */
    .page-salesorderaddqbo #InventoryUnitPrice {
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--ink-900);
        padding-top: 8px;
    }

    /* 付款方式那一列（.others，Take Payment on Account 時才出現） */
    .page-salesorderaddqbo .col-sm-12.row.others {
        background: var(--surface);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        margin: 0 0 16px;
        row-gap: 10px;
    }

    /* ---- ④ 明細表 ---- */
    .page-salesorderaddqbo .input-group:has(#table2) {
        display: block;
        background: var(--surface);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        padding: 0;
        overflow: hidden;
        margin-bottom: 16px;
    }

    .page-salesorderaddqbo #table2 {
        margin-bottom: 0;
        font-size: 13.5px;
        border: 0;
    }

        .page-salesorderaddqbo #table2 > thead > tr > th {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-400);
            background: var(--bg);
            border: 0;
            border-bottom: 1px solid var(--ink-200);
            padding: 11px 12px !important;
            white-space: nowrap;
        }

        .page-salesorderaddqbo #table2 > tbody > tr > td {
            border: 0;
            border-bottom: 1px solid var(--ink-100);
            padding: 9px 12px;
            vertical-align: middle;
            font-variant-numeric: tabular-nums;
        }
        /* 斑馬紋與 hover 只留一個。兩個都開時，滑過斑馬列幾乎看不出變化。 */
        .page-salesorderaddqbo #table2 > tbody > tr:nth-of-type(odd) > * {
            background: transparent;
        }

        .page-salesorderaddqbo #table2 > tbody > tr:hover > * {
            background: var(--brand-50);
        }

        .page-salesorderaddqbo #table2 input,
        .page-salesorderaddqbo #table2 select {
            font-size: 13px;
            border: 1px solid transparent;
            border-radius: 6px;
            background: transparent;
            padding: 4px 6px;
            width: 100%;
        }

            .page-salesorderaddqbo #table2 input:hover,
            .page-salesorderaddqbo #table2 select:hover {
                border-color: var(--ink-200);
                background: var(--surface);
            }

            .page-salesorderaddqbo #table2 input:focus,
            .page-salesorderaddqbo #table2 select:focus {
                border-color: var(--brand-400);
                background: var(--surface);
                box-shadow: 0 0 0 0.18rem rgba(124, 79, 217, 0.16);
                outline: none;
            }

    .page-salesorderaddqbo #ItemImage {
        border-radius: var(--radius-md);
        border-color: var(--ink-200);
        object-fit: contain;
        background: var(--bg);
    }

    /* ---- 金額結算 ---- */
    .page-salesorderaddqbo .col-sm-7 > .table-borderless {
        background: var(--surface);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        margin-bottom: 0;
        overflow: hidden;
    }

    .page-salesorderaddqbo .table-borderless td {
        padding: 8px 16px;
        border: 0;
        vertical-align: middle;
    }

    .page-salesorderaddqbo .table-borderless tbody + tbody td {
        border-top: 1px solid var(--ink-100);
    }

    /* 原始 markup 把每一個金額都包在 <font color="red"> 裡。全部紅字等於沒有
   重點 —— 眼睛沒有地方可以停。改成：一般金額用中性墨色、等寬數字，
   只有 Grand Total 用品牌色放大。負數才紅。 */
    .page-salesorderaddqbo font[color="red"] > label.form-control-sm,
    .page-salesorderaddqbo font[color="red"] > label {
        color: var(--ink-900);
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        /* 左邊一定要留內距。這些數字在 markup 裡直接接在標籤後面，中間沒有任何
     間隔元素 —— 原本是靠 .form-control-sm 的 padding 撐開的。上一版把 padding
     歸零，結果就變成「Taxable Subtotal$12.20」黏成一團。 */
        padding: 0 0 0 10px;
        height: auto;
        display: inline-block;
    }

    /* 幣別符號是獨立的 <span>，緊貼在標籤文字後面（"Taxable Subtotal" + "$"）。
   補一個空白，讓它讀起來是 "Taxable Subtotal $" 而不是 "Subtotal$"。 */
    .page-salesorderaddqbo #TaxSubCurrencyTax::before,
    .page-salesorderaddqbo #TaxSubCurrencyDiscount::before,
    .page-salesorderaddqbo #GrandTotalCurrency::before,
    .page-salesorderaddqbo #GrandTotalHomeCurrency::before,
    .page-salesorderaddqbo #LastPriceCurrency::before,
    .page-salesorderaddqbo #SalesPriceCurrency::before {
        content: '\00a0';
    }

    /* Taxable Subtotal 是中間過程值，不是結論 —— 用比 Grand Total 弱的墨色。 */
    .page-salesorderaddqbo .TaxAndDiscount td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .page-salesorderaddqbo #TaxableSubtotalValueTax,
    .page-salesorderaddqbo #TaxableSubtotalValueDiscount {
        color: var(--ink-700) !important;
        font-weight: 600;
    }

    .page-salesorderaddqbo #GrandTotal,
    .page-salesorderaddqbo #GrandTotalHome {
        font-family: var(--font-display);
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--brand-700) !important;
    }

    .page-salesorderaddqbo .table-borderless tbody:last-child tr:first-child td {
        background: var(--brand-50);
        border-top: 1.5px solid var(--brand-100);
    }

    .page-salesorderaddqbo #DiscountValueDiscount,
    .page-salesorderaddqbo #DiscountValueTax {
        color: var(--danger) !important;
    }

    /* Discount then Tax / Tax then Discount：做成分段切換鈕 */
    .page-salesorderaddqbo label.btn-outline-primary {
        border: 1px solid var(--ink-200);
        background: var(--surface);
        color: var(--ink-500);
        font-size: 12.5px;
        font-weight: 600;
        padding: 6px 12px;
        border-radius: 999px;
        cursor: pointer;
        margin-left: 4px;
    }

    .page-salesorderaddqbo .btn-check:checked + label.btn-outline-primary {
        background: var(--brand-600);
        border-color: var(--brand-600);
        color: #fff;
    }

    /* 錯誤訊息 */
    .page-salesorderaddqbo #ErrorMsg,
    .page-salesorderaddqbo #emailErrorMessage,
    .page-salesorderaddqbo #refundErrorMsg {
        font-size: 13px;
        font-weight: 500;
    }

    /* ---- Daily report 分頁 ---- */
    .page-salesorderaddqbo .isReport {
        background: var(--surface);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        padding: 20px;
        margin-top: 16px;
    }

        .page-salesorderaddqbo .isReport input[type="date"] {
            height: 42px;
            border: 1.5px solid var(--ink-200);
            border-radius: var(--radius-sm);
            padding: 0 11px;
            font-size: 14px;
        }

/* ---- 底部動作列 ------------------------------------------------------
   原本是 position: fixed; left: 0; width: -webkit-fill-available —— 在沒有
   側邊欄的舊版是對的，現在它會整條壓在側邊欄底下，蓋掉最下面兩個選單項。
   改成從側邊欄右緣開始，寬度自己算。三種狀態都要照顧：一般、收合、手機。 */
/* 註：那個 <footer> 是 .app-content 的子元素（在 RenderBody 裡面），
   不是 .app-content 的兄弟，所以要從 .app-content 往下選。 */
.app-content .footer.footer {
    left: var(--sidebar-w) !important;
    right: 0;
    width: auto !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--ink-200);
    box-shadow: 0 -4px 12px rgba(20, 12, 45, 0.06);
    padding: 10px 0;
    transition: left 0.18s ease;
}

@media (min-width: 992px) {
    .sidebar-collapsed .footer.footer {
        left: 76px !important;
    }
}

@media (max-width: 991.98px) {
    .app-content .footer.footer {
        left: 0 !important;
    }
}
/* 上面的容器歸零把 footer 的 .container 也一起弄成滿版且無內距，
   這裡把左右內距補回來，讓 History 與 Submit 不會貼齊視窗邊緣。 */
.app-content .footer .container {
    padding-left: 22px;
    padding-right: 22px;
}

.app-content .footer .row {
    align-items: center;
}

.app-content .footer .btn {
    height: 40px;
}

.app-content .footer #btnSalesOrderSubmit {
    padding-inline: 24px;
    font-weight: 600;
}

.app-content .footer #btnInvoiceHistory {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
}

    .app-content .footer #btnInvoiceHistory:hover {
        background: var(--brand-50);
        color: var(--brand-700);
    }

.app-content .footer #dropdownMenuResize {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
}

/* ---- Modal ----
   這幾條沒有加頁面前綴，是刻意的：全站的 Bootstrap modal 都該長一樣，
   而目前唯一大量使用 modal 的就是這一頁。 */
.modal .modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal .modal-header {
    border-bottom: 1px solid var(--ink-200);
    padding: 16px 20px;
}

.modal .modal-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-900);
}

.modal .modal-footer {
    border-top: 1px solid var(--ink-200);
    background: var(--bg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px 20px;
}


/* ============================================================
   7. jQuery EasyUI 覆寫
   ------------------------------------------------------------
   EasyUI 的 DOM 是執行時期產生的，沒辦法改 markup，只能覆寫樣式。
   目標是讓 accordion 看起來像 panel-card、datagrid 看起來像 table-modern、
   表單控制項看起來像 Bootstrap 的 .form-control。
   ============================================================ */

/* ---- Panel / Accordion ---- */
.panel,
.accordion {
    border-color: var(--ink-200);
}

.accordion {
    border: 0;
    background: transparent;
}

    .accordion .accordion-header,
    .panel-header {
        background: var(--bg);
        border-color: var(--ink-200);
        padding: 11px 16px;
        border-radius: 0;
    }

        .accordion .accordion-header .panel-title,
        .panel-header .panel-title {
            font-family: var(--font-display);
            font-size: 12.5px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--brand-600);
            background-image: none;
            padding-left: 0;
        }

        .accordion .accordion-header:hover {
            background: var(--brand-50);
        }

        /* 展開 / 收合箭頭改用色塊，不用 EasyUI 的圖檔 sprite。 */
        .accordion .accordion-header .panel-tool {
            right: 12px;
        }

    .accordion .accordion-body,
    .panel-body {
        border-color: var(--ink-200);
        background: var(--surface);
        padding: 16px;
    }

    .accordion > div:last-child .accordion-body {
        border-bottom: 0;
    }

/* ---- 表單控制項（textbox / combobox / datebox / numberbox / searchbox） ---- */
.textbox {
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: var(--surface);
    height: 42px;
    vertical-align: middle;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .textbox-text,
    .textbox .textbox-text {
        font-family: var(--font-sans);
        font-size: 14px;
        color: var(--ink-900);
        height: 100%;
        padding: 0 12px;
    }

        .textbox-text::placeholder {
            color: var(--ink-400);
        }

    .textbox-focused,
    .textbox:focus-within {
        border-color: var(--brand-400);
        box-shadow: 0 0 0 0.22rem rgba(124, 79, 217, 0.18);
    }

.textbox-disabled,
.textbox-readonly {
    background: var(--ink-100);
    color: var(--ink-500);
}

.textbox-addon,
.textbox .textbox-addon {
    height: 100%;
}

.textbox-icon {
    height: 100%;
    width: 32px;
    opacity: 0.65;
}

    .textbox-icon:hover {
        opacity: 1;
    }

/* 原生 input 也一起對齊，避免同一列裡新舊控制項高度不一。 */
.app-content input.form-control,
.app-content select.form-select,
.app-content select.form-control,
.app-content textarea.form-control {
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

    .app-content input.form-control:not(textarea),
    .app-content select.form-select,
    .app-content select.form-control:not([size]):not([multiple]) {
        height: 42px;
    }

.app-content .form-control-sm {
    height: 34px;
    font-size: 13px;
    padding: 5px 10px;
}

/* 下拉面板 */
.combo-panel,
.menu {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background: var(--surface);
    padding: 4px;
}

    .combobox-item,
    .menu .menu-item {
        border-radius: 6px;
        font-size: 13.5px;
        color: var(--ink-700);
        padding: 6px 10px;
        height: auto;
        line-height: 1.5;
    }

    .combobox-item-hover,
    .combobox-item-selected,
    .menu .menu-active {
        background: var(--brand-50);
        color: var(--brand-700);
        border-color: transparent;
    }

.combobox-item-selected {
    font-weight: 600;
}

/* ---- 按鈕 (l-btn) ----
   OutputButton 產生的是 EasyUI 的 <a class="l-btn">，套上 Bootstrap 的
   .btn-primary 外觀，但保留 l-btn 的內部結構（icon + text 兩個 span）。 */
a.l-btn,
.l-btn {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--brand-600);
    border-radius: var(--radius-sm);
    background: var(--brand-600);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    margin-right: 8px;
    margin-bottom: 6px;
}

    a.l-btn:hover,
    .l-btn:hover {
        background: var(--brand-700);
        border-color: var(--brand-700);
        color: #fff;
    }

    a.l-btn:active, .l-btn:active {
        background: var(--brand-800);
        border-color: var(--brand-800);
    }

    a.l-btn:focus-visible {
        outline: 2px solid var(--brand-400);
        outline-offset: 2px;
    }

.l-btn-text {
    font-size: 13.5px;
    line-height: 38px;
    height: 38px;
    margin: 0;
    color: inherit;
}

.l-btn-icon-left .l-btn-text {
    padding-left: 24px;
}

.l-btn-icon {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.l-btn-disabled, .l-btn-disabled:hover {
    background: var(--brand-400);
    border-color: var(--brand-400);
    opacity: 0.65;
}

/* 次要動作（Reset / Cancel / Back）改成外框樣式。
   EasyUI 沒有語意 class，所以用 id 前綴挑出來 —— OutputButton 產生的 id
   固定是 btnReset / btnCancel / btnBack / btnClose。 */
a.l-btn#btnReset,
a.l-btn#btnCancel,
a.l-btn#btnBack,
a.l-btn#btnClose,
a.l-btn[id^="btnReset"],
a.l-btn[id^="btnCancel"],
a.l-btn[id^="btnBack"] {
    background: var(--surface);
    border-color: var(--ink-200);
    color: var(--ink-700);
}

    a.l-btn#btnReset:hover,
    a.l-btn#btnCancel:hover,
    a.l-btn#btnBack:hover,
    a.l-btn#btnClose:hover,
    a.l-btn[id^="btnReset"]:hover,
    a.l-btn[id^="btnCancel"]:hover,
    a.l-btn[id^="btnBack"]:hover {
        background: var(--brand-50);
        border-color: var(--brand-200);
        color: var(--brand-700);
    }

/* 刪除類動作用紅色 */
a.l-btn[id^="btnDelete"],
a.l-btn[id^="btnRemove"] {
    background: var(--danger);
    border-color: var(--danger);
}

    a.l-btn[id^="btnDelete"]:hover,
    a.l-btn[id^="btnRemove"]:hover {
        background: #b23434;
        border-color: #b23434;
    }

/* ---- DataGrid ---- */
.datagrid,
.datagrid-wrap {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
}

.datagrid-view,
.datagrid-view1,
.datagrid-view2 {
    border-color: var(--ink-200);
}

/* 工具列 */
.datagrid-toolbar {
    background: var(--surface);
    border-bottom: 1px solid var(--ink-200);
    height: auto;
    padding: 10px 14px;
}

#dgToolbar {
    font-size: 12.5px;
    color: var(--ink-500);
}

    #dgToolbar .l-btn-text {
        height: auto;
        line-height: 1.5;
        font-size: 12.5px;
        font-weight: 500;
    }
    /* 工具列裡那幾個「動作說明」不是真的按鈕，不要吃到上面的 .l-btn 藍底樣式。 */
    #dgToolbar .l-btn-left {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--ink-100);
        border-radius: 999px;
        padding: 2px 10px;
        margin-left: 8px;
        color: var(--ink-600, var(--ink-500));
    }

/* 表頭 */
.datagrid-header,
.datagrid-header-inner {
    background: var(--bg);
    border-color: var(--ink-200);
}

    .datagrid-header td {
        border-color: var(--ink-200);
    }

    .datagrid-header .datagrid-cell,
    .datagrid-header .datagrid-cell-group,
    .datagrid-header-rownumber {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-400);
        font-family: var(--font-sans);
        height: auto;
        padding: 10px 12px;
    }

        .datagrid-header .datagrid-cell span {
            white-space: nowrap;
        }

/* 資料列 */
.datagrid-body {
    font-size: 13.5px;
    color: var(--ink-700);
}

    .datagrid-body td {
        border-color: var(--ink-100);
    }

.datagrid-cell, .datagrid-cell-rownumber {
    padding: 8px 12px;
    height: auto;
}

.datagrid-row-alt {
    background: transparent;
}

.datagrid-row-over,
.datagrid-header td.datagrid-header-over {
    background: var(--brand-50);
}

.datagrid-row-selected {
    background: var(--brand-100);
    color: var(--brand-800);
}

    .datagrid-row-selected .datagrid-cell {
        color: inherit;
    }

/* 數字欄位用等寬數字，才對得齊 */
.datagrid-body td[field] .datagrid-cell {
    font-variant-numeric: tabular-nums;
}

/* 分頁列 */
.datagrid-pager,
.pagination {
    background: var(--bg);
    border-top: 1px solid var(--ink-200);
    height: auto;
    padding: 6px 10px;
}

.pagination-info {
    color: var(--ink-400);
    font-size: 12.5px;
}

.pagination td {
    font-size: 12.5px;
    color: var(--ink-500);
}

.pagination .pagination-num {
    border: 1.5px solid var(--ink-200);
    border-radius: 6px;
    height: 28px;
    padding: 0 8px;
}
/* 分頁列裡的翻頁鈕是 icon-only 的 l-btn，不要吃到主要按鈕的紫底。 */
.pagination .l-btn {
    height: 28px;
    padding: 0 4px;
    margin: 0 1px;
    background: transparent;
    border-color: transparent;
    color: var(--ink-500);
    border-radius: 6px;
}

    .pagination .l-btn:hover {
        background: var(--ink-100);
        border-color: transparent;
    }

.pagination .l-btn-plain:hover {
    background: var(--ink-100);
}

/* ---- Dialog / Window / Messager ------------------------------------------
   $.messager.alert() 實際產生的 DOM（對照 jquery.easyui.min.js 讀出來的，
   不是猜的 —— 之前猜錯過兩次，改這一段之前請先看清楚）：

     div.panel.window.messager-window
       ├ div.panel-header.window-header
       │    ├ div.panel-title.messager-title       ← 標題
       │    └ div.panel-tool > a.panel-tool-close  ← 右上角關閉
       ├ div.panel-body.window-body.messager-body
       │    ├ div.messager-icon.messager-error     ← 圖示
       │    ├ div                                  ← 訊息文字（有包 div）
       │    └ div[style="clear:both"]              ← float 時代的殘留
       └ div.dialog-button.messager-button         ← ⚠ body 的「兄弟」，不是子孫
            └ a.l-btn

   兩個要記住的重點：
     1. 訊息文字**有**包在 div 裡（$.messager.alert 是用字串拼出來的），
        所以 body 可以正常用 flex 排版。
     2. 按鈕列掛在「視窗」上而不是 body 裡（easyui 的 dialog 是
        `$("<div class='dialog-button'>").appendTo(win)` 再 insertAfter(body)）。
        寫成 `.messager-body .messager-button` 一條都不會命中。

   ⚠️ 更早的版本還把 .messager-body 和 .window 寫在同一條規則裡，等於在對話框
   「裡面」又畫了一張有圓角和陰影的卡片 —— 就是截圖上訊息文字外面那個多出來的方框。
   .messager-body 是內容區，不是視窗，兩者必須分開處理。
   -------------------------------------------------------------------------- */
.window,
.dialog {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
    padding: 0;
    overflow: hidden;
}

    .window .window-body,
    .window .panel-body {
        border: 0;
    }

.window-mask {
    background: rgba(20, 12, 45, 0.44);
}

.window .panel-header,
.dialog .panel-header {
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--ink-200);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 15px 18px;
    height: auto;
}

.window .panel-title,
.dialog .panel-title {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink-900);
    text-transform: none;
    letter-spacing: 0;
    background-image: none;
    padding-left: 0;
    line-height: 1.4;
}

/* 關閉鈕。原本是 panel_tools.png 的 sprite，在這個主題下顯得又髒又突兀，
   而且圖檔載不到時會變成一塊色塊。直接用文字 × 畫，不依賴任何圖檔。
   只挑 .window 底下的，才不會動到 accordion 表頭上的展開/收合鈕。 */
/* ⚠ easyui.css 的 .panel-tool 是 height:16px + overflow:hidden。
   下面把關閉鈕放大成 28×28（比較好點、也才有圓角 hover 底），
   但只要沒有一併處理這個容器，那顆 × 就會被裁掉下半部 ——
   畫面上看起來像一個「∨」，這正是先前回報「叉叉讓版面怪怪的」的真正原因。
   容器改成 flex 並讓它跟著內容長，就不會再裁到。
   top/right/transform 加 !important 是因為 easyui 會用 JS 寫 inline style。 */
.window .panel-tool {
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%);
    /* easyui 用 margin-top:-8px 去對齊它原本 16px 高的容器。
   我們改用 transform 置中，那個負邊距會多推一次，要歸零。 */
    margin-top: 0 !important;
    height: auto !important;
    min-height: 28px;
    overflow: visible !important;
    display: flex;
    align-items: center;
    gap: 2px;
}

    .window .panel-tool a,
    .window .panel-tool a.panel-tool-close {
        display: block;
        width: 28px;
        height: 28px;
        margin: 0;
        border-radius: 8px;
        background-image: none;
        background-color: transparent;
        position: relative;
        opacity: 1;
    }

        .window .panel-tool a.panel-tool-close::before {
            content: '\00d7';
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            font-size: 21px;
            line-height: 1;
            color: var(--ink-400);
        }

        .window .panel-tool a.panel-tool-close:hover {
            background-color: var(--ink-100);
        }

            .window .panel-tool a.panel-tool-close:hover::before {
                color: var(--ink-900);
            }

/* ---- messager 內容區 ----
   ⚠ 這一段改寫過。上一版有兩個基於錯誤假設的問題，會讓 Ok 按鈕跑到白框外面。

   假設一（錯）：「訊息是一個裸文字節點，包不起來」。
     實際上 EasyUI 的 $.messager.alert 產生的內容是
         <div class="messager-icon messager-error"></div>
         <div>訊息文字</div>
         <div style="clear:both;"></div>
     文字是有包在 div 裡的。所以可以正常用 flex，不需要「左內距 + 絕對定位圖示」
     那套繞道做法。flex item 寬度爆開的問題用 min-width:0 就解決了。

   假設二（錯）：「.messager-button 在 .messager-body 裡面」。
     實際上不是。EasyUI 的 dialog 是這樣組的（jquery.easyui.min.js，_2b1 / _2b7）：
         $("<div class=\"dialog-button\"></div>").appendTo(win);   ← 掛在「視窗」上
         bb.insertAfter(body);                                     ← 放在 body「後面」
     所以正確的 DOM 是：

         div.panel.window.messager-window
           ├ div.panel-header.window-header
           ├ div.panel-body.window-body.messager-body
           │    ├ div.messager-icon.messager-error
           │    ├ div                     ← 訊息文字
           │    └ div[style="clear:both"]
           └ div.dialog-button.messager-button      ← body 的「兄弟」，不是子孫
                └ a.l-btn

     上一版寫成 `.messager-body .messager-button {...}`，是後代選擇器，
     一條都沒有命中。按鈕列因此完全沒被套到樣式，同時 body 又被加了
     20px 上內距與 70px 左內距 —— 而 EasyUI 是用
         t._outerHeight(t._outerHeight() - 按鈕列高度)
     去算 body 高度的，內容一變高就超出視窗，按鈕列被擠到白框外面。
     Bug 回報那兩張截圖（CompanyData / Payment method）就是這個現象。

   現在的作法：body 用 flex 排圖示與文字，按鈕列用正確的「兄弟」選擇器，
   視窗高度改成 auto 讓它跟著內容長，怎麼加內距都不會再溢出。 */
.messager-window {
    height: auto !important; /* 不要用 EasyUI 依舊內容算出來的固定高 */
    overflow: hidden; /* 圓角之外一律裁掉，任何東西都跑不出去 */
}

.messager-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: auto !important;
    padding: 22px;
    overflow: visible;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-700);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
    /* EasyUI 插在最後的 <div style="clear:both"> 是給 float 版面用的，
   改成 flex 之後它只會多佔一個 item 的位置，直接收掉。 */
    .messager-body > div[style*="clear"] {
        display: none;
    }

    /* 文字欄。min-width:0 是關鍵 —— flex item 預設 min-width:auto，
   長訊息會撐開到最大內容寬度而把圖示擠掉。 */
    .messager-body > div:not(.messager-icon):not(.messager-progress) {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 圖示本身：原本是 messager_icons.png 的 sprite（32px 實心紅圓）。在這個
   300px 寬的小視窗裡，那顆實心紅圓比訊息本身還搶眼，而且跟全站其他地方的
   .icon-tile 語彙對不上。改成同一套語彙：圓角方塊 + 淡底 + 深色字符。
   字符用純文字畫，不依賴 bootstrap-icons 的字碼，也不依賴任何圖檔。 */
    .messager-body .messager-icon {
        flex: 0 0 34px;
        position: static;
        float: none;
        margin: 0;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background-image: none !important;
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 700;
        line-height: 1;
    }

        .messager-body .messager-icon.messager-error {
            background-color: var(--danger-bg);
            color: var(--danger);
        }

            .messager-body .messager-icon.messager-error::before {
                content: '\00d7';
                font-size: 25px;
            }

        .messager-body .messager-icon.messager-warning {
            background-color: #fdeedd;
            color: #b26a15;
        }

            .messager-body .messager-icon.messager-warning::before {
                content: '!';
            }

        .messager-body .messager-icon.messager-info {
            background-color: var(--brand-100);
            color: var(--brand-600);
        }

            .messager-body .messager-icon.messager-info::before {
                content: 'i';
                font-style: italic;
            }

        .messager-body .messager-icon.messager-question {
            background-color: var(--brand-100);
            color: var(--brand-600);
        }

            .messager-body .messager-icon.messager-question::before {
                content: '?';
            }
    /* 訊息字串裡常見 <font color="..."> 的寫法，色彩交給主題統一決定。 */
    .messager-body font[color] {
        color: var(--ink-700) !important;
    }

    .messager-body b, .messager-body strong {
        color: var(--ink-900);
    }

    /* 按鈕列。它是 .messager-body 的「兄弟」（見上面的 DOM 圖），
   所以選擇器是 `.messager-window > ...`，不是 `.messager-body ...`。
   本來就已經是視窗的滿寬（EasyUI 會 _outerWidth 設成跟 body 一樣），
   不需要任何負邊距去抵銷內距 —— 上一版那組 margin:-22px/-70px 正是
   讓它往左突出到白框外面的原因之一。 */
    .messager-window > .messager-button,
    .messager-window > .dialog-button {
        box-sizing: border-box;
        text-align: right;
        margin: 0;
        padding: 12px 22px;
        background: var(--bg);
        /* easyui.css 給 .dialog-button 四邊都是 1px #95B8E7 的藍框，
       左右兩條會在圓角外緣露出一小截藍線。只留上面那條分隔線。 */
        border: 0;
        border-top: 1px solid var(--ink-200);
        border-radius: 0;
    }
    /* EasyUI 寫死 .messager-button .l-btn { width: 70px }，"Cancel" 之類的字會被
   壓到擠在一起，所以改成最小寬度 + 依內容成長。
   顏色一律 !important：這顆按鈕的樣式在 easyui.css 裡分散在好幾條規則上，
   逐條比權重不如直接把結果講死。 */
    .messager-window > .messager-button .l-btn {
        width: auto !important;
        min-width: 92px;
        height: 38px;
        margin: 0 0 0 8px;
        padding: 0 18px;
        justify-content: center;
        background: var(--brand-600) !important;
        border: 1px solid var(--brand-600) !important;
        color: #fff !important;
        border-radius: var(--radius-sm);
    }

        .messager-window > .messager-button .l-btn:hover {
            background: var(--brand-700) !important;
            border-color: var(--brand-700) !important;
        }

        .messager-window > .messager-button .l-btn .l-btn-text {
            color: #fff !important;
            line-height: 36px;
            height: 36px;
            margin: 0;
            font-size: 13.5px;
            font-weight: 600;
        }
        /* 只有一顆鈕的時候（alert），第二顆才是 Cancel —— 給它次要樣式。 */
        .messager-window > .messager-button .l-btn + .l-btn,
        .messager-window > .messager-button .l-btn:nth-child(2) {
            background: var(--surface) !important;
            border-color: var(--ink-200) !important;
        }

            .messager-window > .messager-button .l-btn:nth-child(2) .l-btn-text {
                color: var(--ink-700) !important;
            }

            .messager-window > .messager-button .l-btn:nth-child(2):hover {
                background: var(--brand-50) !important;
                border-color: var(--brand-200) !important;
            }
        /* focus 環用 box-shadow，不用 outline。
   outline-offset 會在按鈕外面留一圈底色縫隙，疊在實心按鈕上很難看。

   ⚠ 只掛 :focus-visible，不要掛 :focus。EasyUI 在對話框開啟時會主動
   .find("a:first").focus()，掛 :focus 的話每一個訊息視窗一跳出來就先套一圈
   紫色光環，看起來像出了什麼事。:focus-visible 只有鍵盤操作才會亮，
   滑鼠使用者看到的是乾淨的按鈕，鍵盤使用者仍然看得到焦點在哪。 */
        .messager-window > .messager-button .l-btn:focus {
            outline: none !important;
            box-shadow: none;
        }

        .messager-window > .messager-button .l-btn:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px rgba(124, 79, 217, 0.35);
        }

    .messager-body .messager-input {
        border: 1.5px solid var(--ink-200);
        border-radius: var(--radius-sm);
        padding: 9px 11px;
        font-size: 14px;
    }

        .messager-body .messager-input:focus {
            border-color: var(--brand-400);
            box-shadow: 0 0 0 0.22rem rgba(124, 79, 217, 0.18);
            outline: none;
        }

/* 進度視窗（$.messager.progress）的內容也是 .messager-body 底下的一個 div，
   外層已經有 22px 內距，這裡再給一次就變成兩層。改成 0，只保留佔滿寬度。 */
.messager-progress {
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.messager-p-msg {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--ink-700);
}

/* dialog（非 messager）的按鈕列 */
.dialog-button,
.window-body .dialog-button {
    background: var(--bg);
    border-top: 1px solid var(--ink-200);
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    text-align: right;
}

    .dialog-button .l-btn {
        min-width: 92px;
        justify-content: center;
    }

/* ---- Tooltip / Validatebox ---- */
.tooltip {
    border-radius: var(--radius-sm);
}

.validatebox-invalid,
.textbox-invalid {
    border-color: var(--danger) !important;
    background-color: var(--danger-bg);
}

/* ---- Linkbutton icon（EasyUI icon.css 的 sprite 保持原樣） ---- */
.l-btn .l-btn-icon {
    opacity: 0.95;
}


/* ============================================================
   8. bootstrap-table 覆寫
   ============================================================ */
.bootstrap-table .fixed-table-container {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.bootstrap-table .table {
    font-size: 13.8px;
    margin-bottom: 0;
    --bs-table-hover-bg: var(--brand-50);
}

    .bootstrap-table .table > thead > tr > th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-400);
        background: var(--bg);
        border-bottom: 1px solid var(--ink-200);
        padding: 11px 14px;
    }

    .bootstrap-table .table > tbody > tr > td {
        padding: 11px 14px;
        border-color: var(--ink-100);
        vertical-align: middle;
    }

.bootstrap-table .fixed-table-toolbar {
    padding: 0 0 12px;
}

.bootstrap-table .fixed-table-pagination {
    padding: 12px 2px 0;
    font-size: 13px;
}

.bootstrap-table .page-link {
    color: var(--brand-600);
    border-radius: 6px;
}

.bootstrap-table .page-item.active .page-link {
    background: var(--brand-600);
    border-color: var(--brand-600);
}


/* ============================================================
   9. 列印
   ============================================================ */
@media print {
    .app-sidebar,
    .app-topbar,
    .app-footer,
    .sidebar-backdrop,
    .toolbar-card,
    .print-hide {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .app-content {
        padding: 0 !important;
    }

    .panel-card, .x_panel, .datagrid {
        box-shadow: none !important;
        border-color: #ccc !important;
    }

    body {
        background: #fff;
    }
}

/* ------------------------------------------------------------
   3b. 兩階段驗證（2FA）
   給 _TwoFactorSetupPage / _TwoFactorVerifyPage 用，
   與 RetailReportQBO.Client 的同名 class 逐條對齊。
   ------------------------------------------------------------ */

/* 設定流程的步驟指示。只有 Setup 頁有 —— Verify 頁不是一段流程的中途，
   它就是登入本身的一部分，加步驟條反而讓人以為還有好幾關要過。 */
.auth-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
}
.auth-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-400);
}
.auth-step .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: 12px;
  flex-shrink: 0;
}
.auth-step.active { color: var(--brand-600); }
.auth-step.active .dot { background: var(--brand-600); color: #fff; }
.auth-step.done .dot { background: var(--green-500); color: #fff; }
.auth-step-line { flex: 1; height: 1.5px; background: var(--ink-200); min-width: 18px; }

/* QR 外框。底色寫死白色，不吃主題色 —— QR 必須是深色在淺底上才掃得到。 */
.qr-frame {
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-md);
  padding: 14px;
  display: inline-block;
  box-shadow: var(--shadow-sm);
}
.qr-frame img { width: 180px; height: 180px; display: block; }

/* 手動輸入的金鑰。等寬字型 + 虛線框，一看就知道是「要照抄的東西」。 */
.manual-key {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-700);
  word-break: break-all;
}

/* 六格驗證碼輸入 */
.code-input-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.code-box {
  width: 50px;
  height: 58px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--ink-900);
  border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.code-box:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 0.22rem rgba(124, 79, 217, 0.18);
}
@media (max-width: 400px) {
  .code-box { width: 42px; height: 52px; font-size: 20px; }
}