/* =============================================================
   QLiEER 電子發票系統 — 現代化前端主題（Bootstrap 5 基底）
   取代舊 INSPINIA style.css。品牌色取自 logo：#40BFEB
   ============================================================= */

:root {
    /* --- 品牌色階（cyan，取自 logo #40BFEB）--- */
    --brand-50:  #EAF8FD;
    --brand-100: #CFF0FB;
    --brand-200: #A5E4F7;
    --brand-300: #6FD2F0;
    --brand-400: #40BFEB;   /* logo 原色 / 強調、連結、active 指示 */
    --brand-500: #1DA8DA;
    --brand-600: #1188B6;   /* 主要按鈕底色（白字可讀）*/
    --brand-700: #0F6F94;
    --brand-800: #115B78;

    /* --- 中性灰階 --- */
    --gray-50:  #F7F9FB;
    --gray-100: #EEF2F6;
    --gray-200: #E3E8EE;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    --radius:    10px;
    --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow:    0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 6px 16px -6px rgba(15,23,42,.16);
    --transition: 160ms cubic-bezier(.4,0,.2,1);

    --sidebar-w: 248px;
    --topbar-h:  60px;
    --sidebar-bg: #0F1B2E;   /* 深藍灰側邊欄 */

    /* Bootstrap 覆寫 */
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 17,136,182;
    --bs-body-bg: var(--gray-50);
    --bs-body-color: var(--gray-800);
    --bs-body-font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-link-color: var(--brand-600);
    --bs-link-hover-color: var(--brand-700);
    --bs-border-color: var(--gray-200);
}

* { -webkit-font-smoothing: antialiased; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
    background: var(--gray-50);
    color: var(--gray-800);
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    /* 數字等寬：金額/發票號碼/統編/日期/分頁的數字位數整齊對齊 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 表格與分頁的數字對齊：
   CJK 字型的數字是比例寬度（「1」較窄）→ tabular-nums 對其無效。
   這裡把西文/數字優先指定給本身即等寬數字的 Helvetica/Arial，
   中文則自動 fallback 到 Noto Sans TC，達成位數整齊對齊。 */
.table td, .table th, .pagination {
    font-family: "Helvetica Neue", Arial, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.app-main { min-width: 0; }
.app-content { min-width: 0; }

/* =============================================================
   應用外框：側邊欄 + 頂欄 + 主內容
   ============================================================= */
.app-shell { min-height: 100vh; }

/* --- 側邊欄（深色；桌機固定，手機用 offcanvas）--- */
.app-sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
}
.app-sidebar .sidebar-brand {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-sidebar .sidebar-brand img { height: 36px; max-width: 100%; object-fit: contain; }
.app-sidebar .nav, .mobile-nav .nav { padding: 12px 10px; gap: 2px; }
.app-sidebar .nav-section, .mobile-nav .nav-section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    padding: 16px 12px 6px;
}
.app-sidebar .nav-link, .mobile-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.72);
    font-weight: 500;
    transition: all var(--transition);
    border-left: 3px solid transparent;
}
.app-sidebar .nav-link i, .mobile-nav .nav-link i { width: 18px; text-align: center; font-size: 15px; color: rgba(255,255,255,.45); transition: color var(--transition); }
.app-sidebar .nav-link:hover, .mobile-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.app-sidebar .nav-link:hover i, .mobile-nav .nav-link:hover i { color: var(--brand-400); }
.app-sidebar .nav-link.active, .mobile-nav .nav-link.active {
    background: rgba(64,191,235,.16);
    color: #FFFFFF;
    border-left-color: var(--brand-400);
    font-weight: 600;
}
.app-sidebar .nav-link.active i, .mobile-nav .nav-link.active i { color: var(--brand-400); }
.app-sidebar .sidebar-foot, .mobile-nav .sidebar-foot {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-foot-avatar {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(64,191,235,.18);
    color: var(--brand-400);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.sidebar-foot-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sidebar-foot-account {
    font-size: 13px; font-weight: 600; color: #FFFFFF;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-foot-role { font-size: 11px; color: rgba(255,255,255,.5); }

/* 桌機：固定側邊欄 */
@media (min-width: 992px) {
    .app-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        overflow-y: auto; z-index: 1030;
    }
    .app-main { margin-left: var(--sidebar-w); }
}
/* 手機專用選單（offcanvas，獨立於桌機側邊欄）*/
.mobile-nav {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: #fff;
}
.mobile-nav .offcanvas-header {
    height: var(--topbar-h);
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-nav .offcanvas-header .mobile-nav-logo { height: 30px; }
.mobile-nav .offcanvas-header .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: .7;
}
.mobile-nav .offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.mobile-nav .sidebar-foot { margin-top: auto; }

/* --- 頂欄 --- */
.app-topbar {
    height: var(--topbar-h);
    background: #FFFFFF;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    position: sticky; top: 0; z-index: 1020;
}
.app-topbar .topbar-title { font-size: 16px; font-weight: 600; color: var(--gray-900); margin: 0; }
.app-topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.app-topbar .topbar-user {
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--gray-50);
}
.topbar-user-avatar {
    width: 30px; height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.topbar-user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar-user-name {
    font-size: 12.5px; font-weight: 600; color: var(--gray-800);
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-user-id { font-size: 11px; color: var(--gray-500); }
.topbar-user-id-label {
    display: inline-block;
    background: var(--brand-50); color: var(--brand-700);
    font-size: 10px; font-weight: 600;
    padding: 0 5px; border-radius: 4px; margin-right: 3px;
}
.sidebar-toggle { border: none; background: transparent; font-size: 20px; color: var(--gray-600); padding: 4px 8px; }
@media (min-width: 992px) { .sidebar-toggle { display: none; } }

/* --- 主內容 --- */
.app-content { padding: 22px; }
@media (max-width: 575.98px) { .app-content { padding: 14px; } }

/* =============================================================
   卡片（.ibox 相容別名 → 用 BS5 卡片風格呈現）
   ============================================================= */
.card, .ibox {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}
.card-header, .ibox-title {
    background: #FFFFFF;
    border-bottom: 1px solid var(--gray-200);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    border-radius: var(--radius) var(--radius) 0 0;
}
.card-header h5, .ibox-title h5, .card-header .card-title {
    font-size: 15px; font-weight: 600; color: var(--gray-900); margin: 0;
}
.ibox-tools, .card-header .card-tools { margin-left: auto; display: flex; gap: 8px; }
.card-body, .ibox-content { padding: 20px; }
.ibox.float-e-margins, .float-e-margins { margin-bottom: 22px; }

/* =============================================================
   按鈕（品牌化）
   ============================================================= */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.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);
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--brand-400); --bs-btn-border-color: var(--brand-400);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-500); --bs-btn-hover-border-color: var(--brand-500);
    --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600);
    /* disabled（修改鈕作廢/上傳後）維持藍底白字並淡化，與作廢/折讓 disabled 一致，不要 BS5 預設的黑字 cyan 底 */
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--brand-400); --bs-btn-disabled-border-color: var(--brand-400);
}
/* 列表「修改」鈕（.edit）啟用態用 brand-500：比原 brand-400 深（與 disabled 的 brand-400 淡化拉開對比），
   又不同於「搜尋」primary 的 brand-600。只針對 .edit，不影響其他 btn-info（如「增加品項」）。 */
.btn-info.edit {
    --bs-btn-bg: var(--brand-500); --bs-btn-border-color: var(--brand-500);
    --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
}
/* 列表操作鈕 disabled 時再淡一些（修改/作廢/折讓 一致）。
   折讓鈕用 inline 橘底、作廢用 btn-danger 預設底，唯一能一致淡化三者的槓桿是 opacity：
   把 BS5 預設的 --bs-btn-disabled-opacity .65 降到 .4。 */
.btn-info.disabled,
.btn-danger:disabled, .btn-danger.disabled,
.allowance.disabled {
    --bs-btn-disabled-opacity: .4;
}
.btn-outline-info {
    --bs-btn-color: var(--brand-600); --bs-btn-border-color: var(--brand-400);
    --bs-btn-hover-bg: var(--brand-500); --bs-btn-hover-border-color: var(--brand-500); --bs-btn-hover-color: #fff;
}
/* 舊 class 相容（逐頁改寫期間仍可能殘留） */
.btn-default { --bs-btn-bg: #fff; --bs-btn-border-color: var(--gray-300); --bs-btn-color: var(--gray-700);
    --bs-btn-hover-bg: var(--gray-100); --bs-btn-hover-border-color: var(--gray-300); --bs-btn-hover-color: var(--gray-900); }
.btn-outline { border: 1px solid var(--gray-300); background: #fff; }
.btn-xs { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .78rem; }

/* =============================================================
   表單
   ============================================================= */
.form-label, .control-label { font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
.form-control, .form-select {
    border-color: var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(64,191,235,.20);
}

/* =============================================================
   表格
   ============================================================= */
.table { --bs-table-color: var(--gray-800); vertical-align: middle; }
.table > thead th {
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { background: var(--brand-50); }

/* 作廢 / 停用列（沿用舊 class 名，樣式重寫）*/
tr.row-voided > td, .row-voided { background: #FEF2F2 !important; color: #B91C1C !important; text-decoration: line-through; }
tr.row-disabled > td, .row-disabled { background: var(--gray-100) !important; color: var(--gray-400) !important; }

/* =============================================================
   狀態標籤（沿用 .label-status* 名稱）
   ============================================================= */
.label-status {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.4;
}
.label-status-ok, .label-status-active { background: #DCFCE7; color: #15803D; }
.label-status-void, .label-status-danger { background: #FEE2E2; color: #B91C1C; }
.label-status-warn { background: #FEF3C7; color: #92400E; }
.label-status-info { background: var(--brand-50); color: var(--brand-700); }
.label-status-muted { background: var(--gray-100); color: var(--gray-500); }

/* =============================================================
   Select2 ↔ BS5 對齊（品牌化）
   ============================================================= */
.select2-container .select2-selection--single {
    height: calc(1.5em + .75rem + 2px);
    border-color: var(--gray-300);
    border-radius: var(--radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .75rem);
    padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .75rem); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand-500); }
.select2-container--open .select2-dropdown { border-color: var(--brand-400); }
.select2-container { width: 100% !important; }
/* 搜尋列篩選 select2：固定寬度，覆蓋上方 100% !important（否則在 col-auto 內會隨選中文字跳動）。
   ID 相鄰選擇器權重高於 .select2-container，兩者皆 !important 時本規則勝出。 */
#invoiceAutoImport + .select2-container { width: 150px !important; }
#invoiceStatus + .select2-container,
#allowanceStatus + .select2-container,
#trackStatus + .select2-container { width: 130px !important; }

/* =============================================================
   分頁（BS5 pagination 品牌化）
   ============================================================= */
.pagination {
    --bs-pagination-color: var(--gray-600);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--gray-200);
    --bs-pagination-border-radius: var(--radius-sm);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--brand-500);
    --bs-pagination-hover-border-color: var(--brand-500);
    --bs-pagination-active-bg: var(--brand-600);
    --bs-pagination-active-border-color: var(--brand-600);
    --bs-pagination-disabled-color: var(--gray-300);
    --bs-pagination-disabled-border-color: var(--gray-200);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(64,191,235,.20);
    gap: 6px;
}
.pagination .page-link {
    min-width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.pagination .page-link:hover { transform: translateY(-1px); }
.pagination .page-item.active .page-link { box-shadow: 0 4px 10px -3px rgba(17,136,182,.5); }
.pagination .page-item.disabled .page-link { background: transparent; transform: none; box-shadow: none; }

/* 細節：頁面主標題 */
.page-heading { display:flex; align-items:center; gap:10px; margin-bottom: 18px; }
.page-heading h2 { font-size: 20px; font-weight: 700; color: var(--gray-900); margin: 0; }
.page-heading .page-heading-icon { color: var(--brand-500); }