:root {
    --jcs-design-bg: #ebf0f6;
    --jcs-design-surface: #ffffff;
    --jcs-design-surface-soft: #f4f7fb;
    --jcs-design-text: #1e293b;
    --jcs-design-muted: #475569;
    --jcs-design-border: #d2dae6;
    --jcs-design-border-soft: #e2e8f1;
    --jcs-design-nav: #0e1c24;
    --jcs-design-nav-hover: #17323d;
    --jcs-design-nav-text: #9fbfc9;
    --jcs-design-nav-active: #e6f6fa;
    --jcs-design-accent: #30a0c0;
    --jcs-design-accent-dark: #1c6f8b;
    --jcs-design-accent-soft: #e8f6fa;
    --jcs-design-success: #16a34a;
    --jcs-design-danger: #dc2626;
    --jcs-design-warning: #d97706;
    --jcs-design-blue: #2563eb;
    --jcs-shell-sidebar-w: 280px;
    --jcs-shell-sidebar-collapsed-w: 76px;
    --jcs-shell-topbar-h: 72px;
    --jcs-shell-content-max: 1480px;
    --jcs-design-topbar-bg: rgba(255, 255, 255, 0.96);
    --jcs-design-statusbar-bg: #f3f7f8;
    --jcs-design-success-soft: #f0fdf4;
    --jcs-design-warning-soft: #fffbeb;
    --jcs-design-danger-soft: #fef2f2;
    --jcs-design-zoom: 1;
    --jcs-design-font-scale: 1;
}

/* ------------------------------------------------------------------
   JCS 橋接層：暗色時把 --jcs-design-* 改指向上面的 Claude Design 深色 token。
   本檔與 css/jcs-common.css 合計 263 處在消費這 18 個變數，
   因此只要改這一段，外殼與共用層就會整組變暗，不需要逐條改樣式。

   兩件事刻意這樣寫：
   1. 亮色的 :root 宣告（在 jcs-common.css / jcs-shell.css 內）一個字都不動 →
      亮色模式零回歸，tests/jcs_design_refresh_source_test.php 鎖的 6 個色值維持原樣。
      :root[data-theme="dark"] 特異性 (0,1,1) 高於 :root (0,1,0)，
      所以不論那兩個檔案的載入順序如何都會勝出。
   2. 整段包在 @media screen 內 → 列印時自動落回亮色，不會印出黑底。
   ------------------------------------------------------------------ */
@media screen {
    :root[data-theme="dark"] {
        --jcs-design-bg: var(--bg);
        --jcs-design-surface: var(--surface);
        --jcs-design-surface-soft: var(--surface-2);
        --jcs-design-text: var(--fg);
        --jcs-design-muted: var(--fg-muted);
        --jcs-design-border: var(--border);
        --jcs-design-border-soft: var(--divider);
        --jcs-design-nav: var(--slate-950);
        --jcs-design-nav-hover: var(--slate-900);
        --jcs-design-nav-text: var(--fg-muted);
        --jcs-design-nav-active: var(--fg-strong);
        --jcs-design-accent: var(--primary);
        --jcs-design-accent-dark: var(--primary-hover);
        --jcs-design-accent-soft: var(--primary-soft);
        /* 狀態色在暗色改用 -700 亮階：#16a34a 放在 #0B1220 上對比只有 3.0 */
        --jcs-design-success: var(--success-700);
        --jcs-design-danger: var(--danger-500);
        --jcs-design-warning: var(--warning-700);
        --jcs-design-blue: var(--info-700);
        --jcs-design-topbar-bg: rgba(20, 28, 43, 0.96);
        --jcs-design-statusbar-bg: var(--surface-2);
        --jcs-design-success-soft: var(--success-50);
        --jcs-design-warning-soft: var(--warning-50);
        --jcs-design-danger-soft: var(--danger-50);
    }
}

html {
    min-height: 100%;
    background: var(--jcs-design-bg);
}

body.jcs-erp-shell,
body.jcs-login-shell {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--jcs-design-bg);
    color: var(--jcs-design-text);
    /* Inter 為設計指定字型（1.2b 起自架）；後面的 fallback 鏈不得拿掉——
       字型檔載入失敗時要能落回系統字。 */
    font-family: "Inter", "Noto Sans TC", "Source Sans Pro", "Microsoft JhengHei", Arial, sans-serif;
    font-size: calc(15px * var(--jcs-design-font-scale, 1));
    line-height: 1.5;
    letter-spacing: 0;
}

body.jcs-erp-shell * ,
body.jcs-login-shell * {
    box-sizing: border-box;
}

body.jcs-erp-shell a,
body.jcs-login-shell a {
    color: var(--jcs-design-accent-dark);
}

body.jcs-erp-shell a:hover,
body.jcs-login-shell a:hover {
    color: #17657d;
}

.jcs-erp-layout {
    display: grid;
    grid-template-columns: var(--jcs-shell-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--jcs-design-bg);
}

.jcs-erp-sidebar {
    position: sticky;
    top: 0;
    z-index: 920;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--jcs-design-nav);
    color: var(--jcs-design-nav-text);
}

.jcs-erp-brand {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 14px 16px;
    color: var(--jcs-design-nav-active);
    text-decoration: none;
}

.jcs-erp-brand:hover,
.jcs-erp-brand:focus {
    color: var(--jcs-design-nav-active);
    text-decoration: none;
}

.jcs-erp-brand img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ffffff;
    object-fit: contain;
}

.jcs-erp-brand strong,
.jcs-erp-brand small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: 0;
}

.jcs-erp-brand strong {
    font-size: 17px;
    line-height: 1.1;
}

.jcs-erp-brand small {
    margin-top: 3px;
    color: var(--jcs-design-nav-text);
    font-size: 12px;
}

.jcs-erp-nav {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 10px 18px;
}

.jcs-erp-nav-search,
.jcs-erp-nav-empty {
    display: none;
}

.jcs-erp-nav-group[hidden],
.jcs-erp-nav-link[hidden],
.jcs-erp-nav-empty[hidden] {
    display: none !important;
}

.jcs-erp-nav-group {
    margin: 0 0 14px;
}

.jcs-erp-nav-group h2 {
    margin: 12px 10px 6px;
    color: #d4e7ed;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
}

.jcs-erp-nav-link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 38px;
    margin: 2px 0;
    padding: 8px 10px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    color: var(--jcs-design-nav-text);
    text-decoration: none;
}

.jcs-erp-nav-link:hover,
.jcs-erp-nav-link:focus {
    background: var(--jcs-design-nav-hover);
    color: var(--jcs-design-nav-active);
    text-decoration: none;
}

.jcs-erp-nav-link.is-active {
    border-left-color: var(--jcs-design-accent);
    background: var(--jcs-design-nav-hover);
    color: var(--jcs-design-nav-active);
}

.jcs-erp-nav-link .menu-icon {
    width: 20px;
    text-align: center;
}

.jcs-erp-nav-link span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jcs-erp-nav-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.jcs-erp-nav-label {
    flex: 1 1 auto;
    min-width: 0;
}

.jcs-erp-nav-status {
    display: none;
}

.jcs-erp-backdrop {
    display: none;
}

.jcs-erp-workspace {
    display: flex;
    min-width: 0;
    min-height: 100vh;
    flex-direction: column;
}

.jcs-erp-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: var(--jcs-shell-topbar-h);
    padding: 12px 24px;
    border-bottom: 1px solid var(--jcs-design-border);
    background: var(--jcs-design-topbar-bg);
    backdrop-filter: blur(12px);
}

.jcs-erp-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    color: var(--jcs-design-text);
    line-height: 1;
}

.jcs-erp-icon-button:hover,
.jcs-erp-icon-button:focus {
    border-color: var(--jcs-design-accent);
    color: var(--jcs-design-accent-dark);
    outline: none;
}

/* 8.2z-3：系統狀態收納鈕（topbar 驚嘆號）。警示點在任一項 is-danger 時由 PHP 輸出。 */
.jcs-erp-status-btn {
    position: relative;
}

.jcs-erp-status-btn .jcs-erp-status-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jcs-design-danger);
}

.jcs-erp-page-title {
    min-width: 0;
}

.jcs-erp-page-title span {
    display: block;
    color: var(--jcs-design-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.jcs-erp-page-title h1 {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--jcs-design-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
}

.jcs-erp-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.jcs-erp-user-action {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    color: var(--jcs-design-text);
    text-decoration: none;
}

.jcs-erp-user-action:hover,
.jcs-erp-user-action:focus {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent-soft);
    color: var(--jcs-design-accent-dark);
    text-decoration: none;
}

/* 8.2z-3：系統狀態列收納為 popover（topbar 驚嘆號開關）。原本常駐整條列
   （92px）改為預設 hidden 的浮出面板；top/right 是無 JS 時的 fallback，
   開啟時由 js/jcs-common.js 依按鈕位置覆寫（topbar 是 sticky，捲動不重算）。 */
.jcs-erp-statusbar {
    position: fixed;
    top: calc(var(--jcs-shell-topbar-h, 56px) + 8px);
    right: 24px;
    z-index: 910;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 264px;
    max-width: min(340px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid var(--jcs-design-border);
    border-radius: 10px;
    background: var(--jcs-design-surface);
    box-shadow: 0 12px 30px rgba(15, 35, 46, 0.18);
}

/* display:flex 會壓過 hidden 屬性（8.2u q-m1-alert 同一個坑），必須明寫 */
.jcs-erp-statusbar[hidden] {
    display: none;
}

.jcs-erp-status-item {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    color: var(--jcs-design-muted);
    font-size: 13px;
    white-space: nowrap;
}

.jcs-erp-status-item strong {
    overflow: hidden;
    color: var(--jcs-design-text);
    text-overflow: ellipsis;
}

.jcs-erp-status-item.is-ok i,
.jcs-erp-status-item.is-ok strong {
    color: var(--jcs-design-success);
}

.jcs-erp-status-item.is-danger i,
.jcs-erp-status-item.is-danger strong {
    color: var(--jcs-design-danger);
}

.jcs-erp-status-item.is-info i,
.jcs-erp-status-item.is-info strong {
    color: var(--jcs-design-accent-dark);
}

.jcs-erp-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--jcs-shell-content-max);
    margin: 0 auto;
    padding: 24px 24px 32px;
}

body.jcs-erp-shell .jcs-erp-content {
    zoom: var(--jcs-design-zoom, 1);
}

body.jcs-page-quote .jcs-erp-topbar,
body.jcs-page-quote .jcs-erp-statusbar {
    padding-right: 16px;
    padding-left: 16px;
}

body.jcs-page-quote .jcs-erp-content,
body.jcs-page-jcs_design_settings .jcs-erp-content {
    max-width: none;
    padding: 16px 14px 32px;
}

/* 這兩個外觀偏好覆寫的是**亮色**數值，而且掛在 body 上（特異性高於 :root[data-theme="dark"]）。
   不限定的話，暗色 ＋ 高對比／柔和 會把亮色底色蓋回來，讓 1.4d 的暗色橋接失效。
   目前只定義亮色版；暗色下這兩個外觀等同「標準」（見 tasks.md 的待辦）。 */
:root:not([data-theme="dark"]) body[data-jcs-design-appearance="contrast"] {
    --jcs-design-bg: #f3f4f6;
    --jcs-design-border: #9ca3af;
    --jcs-design-muted: #374151;
    --jcs-design-accent: #007fa3;
    --jcs-design-accent-dark: #005f7a;
}

:root:not([data-theme="dark"]) body[data-jcs-design-appearance="soft"] {
    --jcs-design-bg: #f7fbfb;
    --jcs-design-surface-soft: #f2f8f8;
    --jcs-design-border: #dce9e9;
    --jcs-design-accent-soft: #e9f7f4;
}

body[data-jcs-design-frame="pwa"] .jcs-erp-content,
body[data-jcs-design-frame="liff"] .jcs-erp-content {
    padding-right: 10px;
    padding-left: 10px;
}

body[data-jcs-design-state="readonly"] .jcs-erp-content {
    cursor: default;
}

.jcs-erp-footer {
    width: 100%;
    max-width: var(--jcs-shell-content-max);
    margin: 0 auto;
    padding: 16px 24px 24px;
    color: var(--jcs-design-muted);
    font-size: 13px;
}

body.jcs-erp-sidebar-collapsed .jcs-erp-layout {
    grid-template-columns: var(--jcs-shell-sidebar-collapsed-w) minmax(0, 1fr);
}

body.jcs-erp-sidebar-collapsed .jcs-erp-brand {
    grid-template-columns: 44px;
    justify-content: center;
}

body.jcs-erp-sidebar-collapsed .jcs-erp-brand span,
body.jcs-erp-sidebar-collapsed .jcs-erp-nav-group h2,
body.jcs-erp-sidebar-collapsed .jcs-erp-nav-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.jcs-erp-sidebar-collapsed .jcs-erp-nav-link {
    grid-template-columns: 28px;
    justify-content: center;
}

body.jcs-erp-shell .jcs-nav {
    z-index: 880;
}

/* 行動端底部快捷導覽（階段 1.4e）。
   PHP 在所有寬度都輸出這段 DOM，桌機預設以 display:none 隱藏；
   主要規則全部收在 @media (max-width: 980px) 內，
   與 1.4c 的 drawer 同一個斷點，不引入第三個門檻。 */
.jcs-erp-mobilenav {
    display: none;
}

body.jcs-erp-shell .jcs-wrap {
    width: 100%;
    padding-bottom: 0;
}

body.jcs-erp-shell .content-header {
    margin: 0 0 16px;
    padding: 0;
}

body.jcs-erp-shell .content-header h1,
body.jcs-erp-shell .content-header h2 {
    margin: 0;
    color: var(--jcs-design-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

body.jcs-erp-shell .row {
    margin-right: -10px;
    margin-left: -10px;
}

body.jcs-erp-shell [class^="col-"],
body.jcs-erp-shell [class*=" col-"] {
    padding-right: 10px;
    padding-left: 10px;
}

body.jcs-erp-shell .box,
body.jcs-erp-shell .small-box,
body.jcs-erp-shell .info-box,
body.jcs-erp-shell .nav-tabs-custom,
body.jcs-login-shell .box,
body.jcs-login-shell .card {
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

body.jcs-erp-shell .box {
    margin-bottom: 18px;
}

body.jcs-erp-shell .box-header,
body.jcs-login-shell .box-header {
    min-height: 48px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--jcs-design-border-soft);
}

body.jcs-erp-shell .box-header.with-border,
body.jcs-login-shell .box-header.with-border {
    border-bottom-color: var(--jcs-design-border);
}

body.jcs-erp-shell .box-title,
body.jcs-login-shell .box-title {
    margin: 0;
    color: var(--jcs-design-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
}

body.jcs-erp-shell .box-body,
body.jcs-login-shell .box-body {
    padding: 16px;
}

body.jcs-erp-shell .box-footer,
body.jcs-login-shell .box-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--jcs-design-border-soft);
    background: var(--jcs-design-surface-soft);
}

body.jcs-erp-shell .box.box-primary,
body.jcs-login-shell .box.box-primary {
    border-top: 3px solid var(--jcs-design-accent);
}

body.jcs-erp-shell .box.box-info,
body.jcs-login-shell .box.box-info {
    border-top: 3px solid var(--jcs-design-blue);
}

body.jcs-erp-shell .box.box-success,
body.jcs-login-shell .box.box-success {
    border-top: 3px solid var(--jcs-design-success);
}

body.jcs-erp-shell .box.box-warning,
body.jcs-login-shell .box.box-warning {
    border-top: 3px solid var(--jcs-design-warning);
}

body.jcs-erp-shell .box.box-danger,
body.jcs-login-shell .box.box-danger {
    border-top: 3px solid var(--jcs-design-danger);
}

body.jcs-erp-shell .collapsed-box > .box-body,
body.jcs-erp-shell .collapsed-box > .box-footer,
body.jcs-login-shell .collapsed-box > .box-body,
body.jcs-login-shell .collapsed-box > .box-footer {
    display: none;
}

body.jcs-erp-shell .box-tools {
    float: right;
}

body.jcs-erp-shell .btn,
body.jcs-login-shell .btn {
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0;
}

body.jcs-erp-shell .btn-primary,
body.jcs-login-shell .btn-primary {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent);
    color: #ffffff;
}

body.jcs-erp-shell .btn-primary:hover,
body.jcs-erp-shell .btn-primary:focus,
body.jcs-login-shell .btn-primary:hover,
body.jcs-login-shell .btn-primary:focus {
    border-color: var(--jcs-design-accent-dark);
    background: var(--jcs-design-accent-dark);
    color: #ffffff;
}

body.jcs-erp-shell .btn-default,
body.jcs-login-shell .btn-default {
    border-color: var(--jcs-design-border);
    background: var(--jcs-design-surface);
    color: var(--jcs-design-text);
}

body.jcs-erp-shell .btn-default:hover,
body.jcs-login-shell .btn-default:hover {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent-soft);
    color: var(--jcs-design-accent-dark);
}

body.jcs-erp-shell .form-control,
body.jcs-login-shell .form-control {
    min-height: 38px;
    border-color: var(--jcs-design-border);
    border-radius: 8px;
    box-shadow: none;
    color: var(--jcs-design-text);
}

body.jcs-erp-shell .form-control:focus,
body.jcs-login-shell .form-control:focus {
    border-color: var(--jcs-design-accent);
    box-shadow: 0 0 0 3px rgba(48, 160, 192, 0.15);
}

body.jcs-erp-shell .input-group-addon,
body.jcs-login-shell .input-group-addon {
    border-color: var(--jcs-design-border);
    background: var(--jcs-design-surface-soft);
    color: var(--jcs-design-muted);
}

body.jcs-erp-shell table,
body.jcs-login-shell table {
    color: var(--jcs-design-text);
}

body.jcs-erp-shell .table > thead > tr > th {
    border-bottom: 1px solid var(--jcs-design-border);
    background: var(--jcs-design-surface-soft);
    color: var(--jcs-design-muted);
    font-size: 13px;
}

body.jcs-erp-shell .table > tbody > tr > td,
body.jcs-erp-shell .table > tbody > tr > th,
body.jcs-erp-shell .table > tfoot > tr > td,
body.jcs-erp-shell .table > tfoot > tr > th,
body.jcs-erp-shell .table > thead > tr > td,
body.jcs-erp-shell .table > thead > tr > th {
    border-top-color: var(--jcs-design-border-soft);
}

body.jcs-erp-shell .label,
body.jcs-erp-shell .badge {
    border-radius: 999px;
    font-weight: 700;
}

body.jcs-erp-shell .label-success,
body.jcs-erp-shell .badge-success,
body.jcs-erp-shell .bg-green {
    background-color: var(--jcs-design-success) !important;
}

body.jcs-erp-shell .label-warning,
body.jcs-erp-shell .badge-warning,
body.jcs-erp-shell .bg-yellow {
    background-color: var(--jcs-design-warning) !important;
}

body.jcs-erp-shell .label-danger,
body.jcs-erp-shell .badge-danger,
body.jcs-erp-shell .bg-red {
    background-color: var(--jcs-design-danger) !important;
}

body.jcs-erp-shell .text-green,
body.jcs-erp-shell .text-green-light {
    color: var(--jcs-design-success) !important;
}

body.jcs-erp-shell .text-red {
    color: var(--jcs-design-danger) !important;
}

body.jcs-erp-shell .text-yellow {
    color: var(--jcs-design-warning) !important;
}

body.jcs-erp-shell .text-vivid-blue,
body.jcs-erp-shell .text-blue {
    color: var(--jcs-design-accent-dark) !important;
}

body.jcs-erp-shell .alert {
    border-radius: 8px;
}

body.jcs-erp-shell .modal-content {
    overflow: hidden;
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

body.jcs-erp-shell .modal-header,
body.jcs-erp-shell .modal-footer {
    border-color: var(--jcs-design-border);
    background: var(--jcs-design-surface-soft);
}

body.jcs-erp-shell .modal-title {
    color: var(--jcs-design-text);
    font-weight: 800;
    letter-spacing: 0;
}

body.jcs-erp-shell .dropdown-menu {
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

body.jcs-erp-shell .nav-tabs-custom {
    margin-bottom: 18px;
}

body.jcs-erp-shell .nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid var(--jcs-design-border);
    border-radius: 8px 8px 0 0;
    background: var(--jcs-design-surface-soft);
}

body.jcs-erp-shell .nav-tabs-custom > .nav-tabs > li > a {
    color: var(--jcs-design-muted);
}

body.jcs-erp-shell .nav-tabs-custom > .nav-tabs > li.active > a,
body.jcs-erp-shell .nav-tabs-custom > .nav-tabs > li.active > a:hover {
    border-top-color: var(--jcs-design-accent);
    color: var(--jcs-design-text);
}

body.jcs-erp-shell .small-box,
body.jcs-erp-shell .info-box {
    display: block;
    min-height: 90px;
    padding: 16px;
    color: var(--jcs-design-text);
}

body.jcs-erp-shell .small-box .inner h3,
body.jcs-erp-shell .info-box-number {
    margin: 0;
    color: var(--jcs-design-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

body.jcs-erp-shell .small-box .inner p,
body.jcs-erp-shell .info-box-text {
    color: var(--jcs-design-muted);
}

body.jcs-erp-shell .pull-right {
    float: right;
}

body.jcs-erp-shell .pull-left {
    float: left;
}

body.jcs-erp-shell .pointer {
    cursor: pointer;
}

body.jcs-erp-shell .no-user-select {
    user-select: none;
}

/* Master-data pages still ship local module CSS. Keep their DOM stable
   while routing the visible ERP surface through the shared JCS design tokens. */
body.jcs-erp-shell .cm-panel,
body.jcs-erp-shell .vm-panel,
body.jcs-erp-shell .cm-card,
body.jcs-erp-shell .vm-card,
body.jcs-erp-shell .cm-modal,
body.jcs-erp-shell .vm-modal,
body.jcs-erp-shell .cm-detail-panel,
body.jcs-erp-shell .vm-detail-panel,
body.jcs-erp-shell .cm-alias-panel,
body.jcs-erp-shell .cm-ocr-loading-card,
body.jcs-erp-shell .vm-ocr-loading-card {
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    color: var(--jcs-design-text);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

body.jcs-erp-shell .cm-head,
body.jcs-erp-shell .vm-head,
body.jcs-erp-shell .cm-modal-head,
body.jcs-erp-shell .vm-modal-head,
body.jcs-erp-shell .cm-detail-head,
body.jcs-erp-shell .vm-detail-head,
body.jcs-erp-shell .cm-alias-head {
    border-bottom: 1px solid var(--jcs-design-border);
    background: var(--jcs-design-surface-soft);
}

body.jcs-erp-shell .cm-body,
body.jcs-erp-shell .vm-body,
body.jcs-erp-shell .cm-modal-body,
body.jcs-erp-shell .vm-modal-body,
body.jcs-erp-shell .cm-detail-body,
body.jcs-erp-shell .vm-detail-body,
body.jcs-erp-shell .cm-alias-body,
body.jcs-erp-shell .cm-alias-toolbar,
body.jcs-erp-shell .cm-alias-foot {
    background: var(--jcs-design-surface);
}

body.jcs-erp-shell .cm-title,
body.jcs-erp-shell .vm-title,
body.jcs-erp-shell .cm-card-title,
body.jcs-erp-shell .vm-card-title,
body.jcs-erp-shell .cm-ocr-loading-title,
body.jcs-erp-shell .vm-ocr-loading-title,
body.jcs-erp-shell .vm-notify-title {
    color: var(--jcs-design-text);
    letter-spacing: 0;
}

body.jcs-erp-shell .cm-sub,
body.jcs-erp-shell .vm-sub,
body.jcs-erp-shell .cm-empty,
body.jcs-erp-shell .vm-empty,
body.jcs-erp-shell .cm-pager-info,
body.jcs-erp-shell .vm-pager-info,
body.jcs-erp-shell .cm-ocr-loading-msg,
body.jcs-erp-shell .vm-ocr-loading-msg,
body.jcs-erp-shell .cm-alias-count,
body.jcs-erp-shell .cm-alias-loading,
body.jcs-erp-shell .vm-form label small,
body.jcs-erp-shell .vm-notify-loading {
    color: var(--jcs-design-muted);
}

body.jcs-erp-shell .cm-card,
body.jcs-erp-shell .vm-card {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

body.jcs-erp-shell .cm-card:hover,
body.jcs-erp-shell .vm-card:hover {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent-soft);
}

body.jcs-erp-shell .vm-card.disabled {
    background: var(--jcs-design-surface-soft);
    opacity: 0.72;
}

body.jcs-erp-shell .cm-card-code,
body.jcs-erp-shell .vm-card-code,
body.jcs-erp-shell .vm-notify-status code {
    color: var(--jcs-design-accent-dark);
}

body.jcs-erp-shell .vm-card-tag {
    border-color: rgba(220, 38, 38, 0.24);
    background: var(--jcs-design-danger-soft);
    color: var(--jcs-design-danger);
}

body.jcs-erp-shell .cm-meta-box,
body.jcs-erp-shell .vm-meta-box,
body.jcs-erp-shell .cm-detail-field,
body.jcs-erp-shell .vm-detail-field,
body.jcs-erp-shell .vm-notify-status {
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface-soft);
}

body.jcs-erp-shell .cm-meta-label,
body.jcs-erp-shell .vm-meta-label,
body.jcs-erp-shell .cm-detail-label,
body.jcs-erp-shell .vm-detail-label,
body.jcs-erp-shell .cm-alias-table th,
body.jcs-erp-shell .vm-table th,
body.jcs-erp-shell .vm-form label,
body.jcs-erp-shell .cm-form label,
body.jcs-erp-shell .vm-notify-grid label,
body.jcs-erp-shell .vm-notify-checks label {
    color: var(--jcs-design-muted);
    letter-spacing: 0;
}

body.jcs-erp-shell .cm-meta-value,
body.jcs-erp-shell .vm-meta-value,
body.jcs-erp-shell .cm-detail-value,
body.jcs-erp-shell .vm-detail-value,
body.jcs-erp-shell .cm-alias-table,
body.jcs-erp-shell .cm-alias-table td,
body.jcs-erp-shell .vm-table td {
    color: var(--jcs-design-text);
}

body.jcs-erp-shell .cm-toolbar input,
body.jcs-erp-shell .cm-toolbar select,
body.jcs-erp-shell .cm-form input,
body.jcs-erp-shell .cm-form select,
body.jcs-erp-shell .cm-form textarea,
body.jcs-erp-shell .cm-alias-toolbar input.search,
body.jcs-erp-shell .cm-alias-table .col-alias input,
body.jcs-erp-shell .vm-toolbar input[type="text"],
body.jcs-erp-shell .vm-toolbar select,
body.jcs-erp-shell .vm-form input,
body.jcs-erp-shell .vm-form select,
body.jcs-erp-shell .vm-form textarea,
body.jcs-erp-shell .vm-notify-grid input[type="text"],
body.jcs-erp-shell .vm-notify-grid select {
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    color: var(--jcs-design-text);
    box-shadow: none;
}

body.jcs-erp-shell .cm-toolbar input:focus,
body.jcs-erp-shell .cm-toolbar select:focus,
body.jcs-erp-shell .cm-form input:focus,
body.jcs-erp-shell .cm-form select:focus,
body.jcs-erp-shell .cm-form textarea:focus,
body.jcs-erp-shell .cm-alias-toolbar input.search:focus,
body.jcs-erp-shell .cm-alias-table .col-alias input:focus,
body.jcs-erp-shell .vm-toolbar input[type="text"]:focus,
body.jcs-erp-shell .vm-toolbar select:focus,
body.jcs-erp-shell .vm-form input:focus,
body.jcs-erp-shell .vm-form select:focus,
body.jcs-erp-shell .vm-form textarea:focus,
body.jcs-erp-shell .vm-notify-grid input[type="text"]:focus,
body.jcs-erp-shell .vm-notify-grid select:focus {
    border-color: var(--jcs-design-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(48, 160, 192, 0.15);
}

body.jcs-erp-shell #cmCustIdPrefix,
body.jcs-erp-shell #cmCustIdSerial,
body.jcs-erp-shell #cmCustIdEditDisplay,
body.jcs-erp-shell #vmBindUrl {
    border-color: rgba(48, 160, 192, 0.24) !important;
    background: var(--jcs-design-accent-soft) !important;
    color: var(--jcs-design-accent-dark) !important;
}

body.jcs-erp-shell #cmCustIdHint,
body.jcs-erp-shell .cm-form label .required,
body.jcs-erp-shell .vm-form label .required,
body.jcs-erp-shell .vm-notify-badge.none {
    color: var(--jcs-design-warning);
}

body.jcs-erp-shell .cm-btn,
body.jcs-erp-shell .vm-btn {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.jcs-erp-shell .cm-btn:hover,
body.jcs-erp-shell .vm-btn:hover {
    opacity: 1;
}

body.jcs-erp-shell .cm-btn-primary,
body.jcs-erp-shell .vm-btn-primary {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent);
    color: #ffffff;
}

body.jcs-erp-shell .cm-btn-primary:hover,
body.jcs-erp-shell .vm-btn-primary:hover {
    border-color: var(--jcs-design-accent-dark);
    background: var(--jcs-design-accent-dark);
    color: #ffffff;
}

body.jcs-erp-shell .cm-btn-secondary,
body.jcs-erp-shell .vm-btn-secondary {
    border-color: var(--jcs-design-blue);
    background: var(--jcs-design-blue);
    color: #ffffff;
}

body.jcs-erp-shell .cm-btn-muted,
body.jcs-erp-shell .vm-btn-muted,
body.jcs-erp-shell .cm-pager button,
body.jcs-erp-shell .vm-pager button {
    border-color: var(--jcs-design-border);
    background: var(--jcs-design-surface);
    color: var(--jcs-design-text);
}

body.jcs-erp-shell .cm-btn-muted:hover,
body.jcs-erp-shell .vm-btn-muted:hover,
body.jcs-erp-shell .cm-pager button:hover,
body.jcs-erp-shell .vm-pager button:hover {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent-soft);
    color: var(--jcs-design-accent-dark);
}

body.jcs-erp-shell .cm-btn-danger,
body.jcs-erp-shell .vm-btn-danger {
    border-color: var(--jcs-design-danger);
    background: var(--jcs-design-danger);
    color: #ffffff;
}

body.jcs-erp-shell .cm-pager button.active,
body.jcs-erp-shell .vm-pager button.active {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent);
    color: #ffffff;
}

body.jcs-erp-shell .cm-modal-close,
body.jcs-erp-shell .vm-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    color: var(--jcs-design-muted);
    line-height: 1;
}

body.jcs-erp-shell .cm-modal-close:hover,
body.jcs-erp-shell .vm-modal-close:hover {
    border-color: var(--jcs-design-accent);
    background: var(--jcs-design-accent-soft);
    color: var(--jcs-design-accent-dark);
}

body.jcs-erp-shell .cm-overlay,
body.jcs-erp-shell .cm-detail-overlay,
body.jcs-erp-shell .cm-alias-overlay,
body.jcs-erp-shell .cm-ocr-loading,
body.jcs-erp-shell .vm-overlay,
body.jcs-erp-shell .vm-detail-overlay,
body.jcs-erp-shell .vm-ocr-loading {
    background: rgba(15, 23, 42, 0.36);
}

body.jcs-erp-shell .cm-alias-table th,
body.jcs-erp-shell .vm-table th {
    border-bottom: 1px solid var(--jcs-design-border);
    background: var(--jcs-design-surface-soft);
}

body.jcs-erp-shell .cm-alias-table td,
body.jcs-erp-shell .vm-table td {
    border-bottom: 1px solid var(--jcs-design-border-soft);
}

body.jcs-erp-shell .vm-table tr:hover td {
    background: var(--jcs-design-accent-soft);
}

body.jcs-erp-shell .cm-alias-table .col-code,
body.jcs-erp-shell .cm-alias-table .col-master,
body.jcs-erp-shell .cm-alias-table .col-time,
body.jcs-erp-shell .cm-alias-head .cm-sub-cust {
    color: var(--jcs-design-muted);
}

body.jcs-erp-shell .cm-alias-table .col-act .btn-save {
    background: var(--jcs-design-accent);
    color: #ffffff;
}

body.jcs-erp-shell .cm-alias-table .col-act .btn-del {
    background: var(--jcs-design-danger);
    color: #ffffff;
}

body.jcs-erp-shell .cm-ocr-spinner,
body.jcs-erp-shell .vm-ocr-spinner {
    border-color: var(--jcs-design-border);
    border-top-color: var(--jcs-design-accent);
    border-right-color: var(--jcs-design-accent);
}

body.jcs-erp-shell .vm-notify-section {
    border-top-color: var(--jcs-design-border);
}

body.jcs-erp-shell .vm-notify-badge.set {
    border-color: rgba(22, 163, 74, 0.24);
    background: var(--jcs-design-success-soft);
    color: var(--jcs-design-success);
}

body.jcs-erp-shell .vm-notify-badge.none {
    border-color: rgba(217, 119, 6, 0.24);
    background: var(--jcs-design-warning-soft);
}

body.jcs-erp-shell .vm-notify-status.bound {
    border-color: rgba(22, 163, 74, 0.24);
    background: var(--jcs-design-success-soft);
    color: var(--jcs-design-success);
}

body.jcs-login-shell {
    display: grid;
    place-items: center;
    padding: 24px;
}

.jcs-login-shell::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, rgba(48, 160, 192, 0.12), rgba(22, 163, 74, 0.08)),
        var(--jcs-design-bg);
    content: "";
}

.jcs-login-card {
    width: min(100%, 420px);
    padding: 28px;
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
}

.jcs-login-brand {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-bottom: 22px;
    text-align: center;
}

.jcs-login-brand img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.jcs-login-brand h1 {
    margin: 0;
    color: var(--jcs-design-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
}

.jcs-login-form {
    display: grid;
    gap: 14px;
}

.jcs-login-password {
    position: relative;
}

.jcs-login-password .form-control {
    padding-right: 40px;
}

.jcs-login-password .fa {
    position: absolute;
    top: 50%;
    right: 14px;
    color: var(--jcs-design-muted);
    transform: translateY(-50%);
}

.jcs-login-remember {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--jcs-design-muted);
    font-weight: 600;
}

.jcs-login-help {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--jcs-design-border-soft);
}

.jcs-login-help summary {
    cursor: pointer;
    color: var(--jcs-design-accent-dark);
    font-weight: 800;
}

.jcs-login-help pre {
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid var(--jcs-design-border);
    border-radius: 8px;
    background: var(--jcs-design-surface-soft);
    color: var(--jcs-design-text);
    white-space: pre-wrap;
}

body.jcs-login-shell #cookieInfo,
body.jcs-login-shell .jcs-login-error {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;
    background: var(--jcs-design-danger-soft);
    color: var(--jcs-design-danger);
    font-weight: 800;
}

@media (max-width: 980px) {
    .jcs-erp-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 關閉態必須同時退出 tab 序列與可及性樹，否則鍵盤會 tab 進一個看不見的側欄。
       用 visibility 而不是 inert（舊 WebView 不支援時會靜默失效、測不出來），
       也不用 display:none（會讓 transform 過場失效變成瞬間跳出）。 */
    .jcs-erp-sidebar {
        position: fixed;
        left: 0;
        width: min(86vw, var(--jcs-shell-sidebar-w));
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform 0.18s ease, visibility 0s linear 0.18s;
    }

    body.jcs-erp-sidebar-open .jcs-erp-sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.18s ease, visibility 0s;
    }

    .jcs-erp-nav-search {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        min-height: 44px;
        margin: 0 10px 4px;
        padding: 0 10px;
        border: 1px solid var(--jcs-design-nav-text);
        border-radius: 8px;
        background: var(--jcs-design-nav-hover);
        color: var(--jcs-design-nav-text);
    }

    .jcs-erp-nav-search:focus-within {
        border-color: var(--jcs-design-accent);
        color: var(--jcs-design-nav-active);
    }

    .jcs-erp-nav-search input {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--jcs-design-nav-active);
        font: inherit;
        font-size: 16px;
    }

    .jcs-erp-nav-search input::placeholder {
        color: var(--jcs-design-nav-text);
        opacity: 1;
    }

    .jcs-erp-nav-empty {
        display: block;
        margin: 20px 10px;
        color: var(--jcs-design-nav-text);
        font-size: 14px;
        text-align: center;
    }

    /* 觸控目標 >= 44px。桌機（>= 980.02px）的 30px 列高與 36px 漢堡鈕不受影響。 */
    .jcs-erp-nav-link {
        min-height: 44px;
    }

    .jcs-erp-icon-button {
        width: 44px;
        height: 44px;
    }

    .jcs-erp-backdrop {
        position: fixed;
        inset: 0;
        z-index: 910;
        display: block;
        background: rgba(15, 23, 42, 0.38);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
    }

    body.jcs-erp-sidebar-open .jcs-erp-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.jcs-erp-sidebar-collapsed .jcs-erp-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.jcs-erp-sidebar-collapsed .jcs-erp-brand span,
    body.jcs-erp-sidebar-collapsed .jcs-erp-nav-group h2,
    body.jcs-erp-sidebar-collapsed .jcs-erp-nav-link span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }

    body.jcs-erp-sidebar-collapsed .jcs-erp-brand {
        grid-template-columns: 44px minmax(0, 1fr);
        justify-content: start;
    }

    body.jcs-erp-sidebar-collapsed .jcs-erp-nav-link {
        grid-template-columns: 28px minmax(0, 1fr);
        justify-content: stretch;
    }

    .jcs-erp-topbar {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 10px 14px;
    }

    .jcs-erp-page-title h1 {
        font-size: 19px;
    }

    .jcs-erp-topbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .jcs-erp-statusbar {
        right: 14px;
    }

    .jcs-erp-content {
        padding: 16px 14px 28px;
    }

    .jcs-erp-footer {
        padding-right: 14px;
        padding-left: 14px;
    }

    /* 底部導覽的讓位空間「只在這裡補一次」。
       掛在 workspace 而不是 .jcs-erp-content 或 .jcs-erp-footer，有兩個實測理由：
       ① 26 個 ERP 頁裡只有 4 個會輸出 .jcs-erp-footer（其餘連 </body> 都沒有）
          → 掛在 footer 等於 22 頁沒有讓位空間
       ② 有 footer 的那 4 頁，footer 排在 content 之後
          → 只補 content 的話，被固定導覽蓋住的會變成 footer
       workspace 是包住兩者的 flex column，補在它身上兩種情況都對，且只補一次。
       box-sizing:border-box + min-height:100vh 讓短頁面總高仍是 100vh（不會多出捲動）。 */
    .jcs-erp-workspace {
        padding-bottom: calc(var(--jcs-nav-h, 56px) + env(safe-area-inset-bottom, 0px));
    }

    .jcs-erp-mobilenav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 880;
        display: flex;
        align-items: stretch;
        height: calc(var(--jcs-nav-h, 56px) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 1px solid var(--jcs-design-border);
        background: var(--jcs-design-surface);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.1);
    }

    /* ⚠️ 選擇器必須是 `.jcs-erp-mobilenav a.jcs-erp-mobilenav-link`，不能只寫 class。
       css/jcs-shell.css:99 有 `body.jcs-erp-shell a { color: var(--jcs-design-accent-dark) }`，
       特異性 (0,2,1) 高於單一 class (0,1,0) → 未選取與選取會渲染成同一個顏色，
       active 狀態等於看不見。headless 實測抓到，不是理論顧慮。 */
    /* 8.2v：「更多」是 <button>，border／background／font-family 一併在此歸零。
       ⚠️ 不可另外開一條 `.jcs-erp-mobilenav button.jcs-erp-mobilenav-link {}` 來放這些屬性——
       那個選擇器與本群組最後一行逐字相同，會讓測試的 mnExtractBlock 抓到那條、
       使顏色護欄改為檢查一個沒有 color 宣告的區塊而靜默失效。 */
    .jcs-erp-mobilenav a.jcs-erp-mobilenav-link,
    .jcs-erp-mobilenav button.jcs-erp-mobilenav-link {
        flex: 1 1 0;
        border: 0;
        background: transparent;
        font-family: inherit;
        cursor: pointer;
        min-width: 0;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        color: var(--jcs-design-muted);
        font-size: calc(11px * var(--jcs-design-font-scale, 1));
        font-weight: 600;
        line-height: 1.05;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .jcs-erp-mobilenav a.jcs-erp-mobilenav-link span,
    .jcs-erp-mobilenav button.jcs-erp-mobilenav-link span {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .jcs-erp-mobilenav a.jcs-erp-mobilenav-link i,
    .jcs-erp-mobilenav button.jcs-erp-mobilenav-link i {
        font-size: calc(16px * var(--jcs-design-font-scale, 1));
    }

    /* hover 也要壓過 body.jcs-erp-shell a:hover（(0,3,1)，且寫死 #17657d） */
    .jcs-erp-mobilenav a.jcs-erp-mobilenav-link:hover,
    .jcs-erp-mobilenav a.jcs-erp-mobilenav-link:focus,
    .jcs-erp-mobilenav a.jcs-erp-mobilenav-link.is-active,
    .jcs-erp-mobilenav button.jcs-erp-mobilenav-link:hover,
    .jcs-erp-mobilenav button.jcs-erp-mobilenav-link:focus,
    .jcs-erp-mobilenav button.jcs-erp-mobilenav-link.is-active {
        color: var(--jcs-design-accent-dark);
        text-decoration: none;
    }
}
@media (max-width: 560px) {
    body.jcs-login-shell {
        padding: 14px;
    }

    .jcs-login-card {
        padding: 20px;
    }

    .jcs-erp-statusbar {
        left: 8px;
        right: 8px;
        min-width: 0;
        max-width: none;
    }

    .jcs-erp-status-item {
        max-width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }
}

@media (min-width: 980.02px) {
    /* 尺寸 token 只在桌機覆寫。這樣 <=980px、980-980.02px 的小數空窗、
       以及不認得本查詢的舊瀏覽器，都會落回「完整的舊外觀」(280/72 + 舊幾何)，
       而不是「新 token + 舊幾何」的混合破版狀態。 */
    :root {
        --jcs-shell-sidebar-w: 240px;
        --jcs-shell-topbar-h: 56px;
    }

    .jcs-erp-brand {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 10px;
        min-height: var(--jcs-shell-topbar-h);
        padding: 0 16px;
    }

    .jcs-erp-brand img {
        width: 26px;
        height: 26px;
    }

    .jcs-erp-nav {
        padding: 10px 8px 6px;
    }

    .jcs-erp-nav-group {
        display: flex;
        gap: 1px;
        flex-direction: column;
        margin: 0 0 5px;
    }

    .jcs-erp-nav-group h2 {
        margin: 0;
        padding: 5px 10px 3px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
    }

    /* 導覽項目字級：13px 為設計基準，但必須跟著使用者的字級設定縮放
       （緊湊 0.94 / 標準 1 / 大字 1.08）。寫死 px 會讓「大字」對核心導覽失效。 */
    .jcs-erp-nav-link {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 10px;
        height: 30px;
        min-height: 30px;
        margin: 0;
        padding: 0 10px;
        font-size: calc(13px * var(--jcs-design-font-scale, 1));
        font-weight: 400;
    }

    .jcs-erp-nav-link.is-active {
        font-weight: 600;
    }

    .jcs-erp-nav-link .menu-icon {
        width: 16px;
        font-size: 16px;
        line-height: 1;
    }

    .jcs-erp-nav-status {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        max-width: 72px;
        height: 18px;
        padding: 0 6px;
        border: 1px solid rgba(159, 191, 201, 0.24);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--jcs-design-nav-text);
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
    }

    .jcs-erp-nav-link:hover .jcs-erp-nav-status,
    .jcs-erp-nav-link:focus .jcs-erp-nav-status,
    .jcs-erp-nav-link.is-active .jcs-erp-nav-status {
        border-color: rgba(230, 246, 250, 0.34);
        color: var(--jcs-design-nav-active);
    }

    .jcs-erp-topbar {
        min-height: var(--jcs-shell-topbar-h);
        padding: 0 24px;
    }

    .jcs-erp-icon-button {
        width: 36px;
        height: 36px;
    }

    .jcs-erp-page-title span {
        font-size: 11px;
        line-height: 1.25;
    }

    .jcs-erp-page-title h1 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;
    }

    body.jcs-erp-sidebar-collapsed .jcs-erp-brand {
        grid-template-columns: 26px;
    }

    body.jcs-erp-sidebar-collapsed .jcs-erp-nav-link {
        grid-template-columns: 16px;
    }
}

/* ===== 8.2g ERP 殼手機 topbar 對齊 M1（<=600px；桌機與平板不動）===== */
@media (max-width: 600px) {
    .jcs-erp-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 6px;
        min-height: 56px;
        padding: 0 8px 0 6px;
        background: var(--jcs-design-topbar-bg);
        border-bottom: 1px solid var(--jcs-design-border-soft);
    }
    .jcs-erp-topbar .jcs-erp-icon-button {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 6px;
        background: transparent;
    }
    .jcs-erp-page-title span {
        font-size: 11px;
        font-weight: 600;
        color: var(--jcs-design-muted);
    }
    .jcs-erp-page-title h1 {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        color: var(--jcs-design-text);
    }
    /* <=980px 舊規則把 actions 甩到第二行（grid-column:1/-1 → topbar 變 95px 高），歸回單行右側 */
    .jcs-erp-topbar-actions {
        grid-column: auto;
        justify-content: flex-end;
    }
    /* 登出改 icon 圓鈕（M1 app bar 帳號位視覺；文字由 icon 取代，aria 靠原連結語意） */
    .jcs-erp-user-action {
        width: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--jcs-design-muted);
    }
    .jcs-erp-user-action span {
        display: none;
    }
    .jcs-erp-user-action i {
        font-size: 17px;
    }
}
/* ===== 8.2g ERP 殼手機 topbar END ===== */

/* ===== 8.2v ERP 殼 app bar：分類 kicker／連線徽章／帳號鈕 ===== */
/* ⚠️ 選擇器一律帶 .jcs-erp-topbar 前綴（0,2,0），不可簡化成裸 class：
   - .jcs-erp-page-title span 是 (0,1,1)，裸 .jcs-erp-kicker-* (0,1,0) 會被它的 display:block 蓋掉
   - .jcs-app-topbar-chip 與裸 class 同為 (0,1,0)，而 jcs-app-shell.css 載入在本檔之後會勝出
   2026-08-29 實測：不帶前綴時桌機會同時出現兩層 kicker 與連線徽章（12 項驗證失敗）。 */
/* 桌機預設：只顯示品牌 kicker 與登出連結，其餘三個手機專屬元件收起。
   （這三條放在 @media 外，桌機與 600–980px 平板都吃得到，維持既有桌機外觀不變） */
.jcs-erp-topbar .jcs-erp-kicker-section,
.jcs-erp-topbar .jcs-erp-topbar-chip,
.jcs-erp-topbar .jcs-erp-acct-btn {
    display: none;
}

@media (max-width: 600px) {
    /* 手機：kicker 改顯示所屬分組，品牌名讓位（app bar 只有一層 11px 的空間） */
    .jcs-erp-topbar .jcs-erp-kicker-brand {
        display: none;
    }

    .jcs-erp-topbar .jcs-erp-kicker-section {
        display: block;
    }

    /* 連線徽章：沿用 jcs-app-shell.css 的 .jcs-app-topbar-chip 視覺，
       這裡只補 ERP 殼需要的顯示與收縮行為（標題區才是可壓縮的那一欄） */
    .jcs-erp-topbar .jcs-erp-topbar-chip {
        display: inline-flex;
        flex: none;
    }

    /* 帳號鈕取代登出連結（尺寸沿用既有 .jcs-erp-user-action 的 44×44 觸控區） */
    .jcs-erp-topbar .jcs-erp-user-action {
        display: none;
    }

    .jcs-erp-topbar .jcs-erp-acct-btn {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--jcs-design-muted);
        cursor: pointer;
    }

    .jcs-erp-acct-btn:active {
        background: var(--jcs-design-surface-soft);
    }
}
/* ===== 8.2v ERP 殼 app bar END ===== */



@media (prefers-reduced-motion: reduce) {
    .jcs-erp-sidebar,
    body.jcs-erp-sidebar-open .jcs-erp-sidebar,
    .jcs-erp-backdrop {
        transition: none;
    }
}

@media print {
    body.jcs-erp-shell {
        background: #ffffff !important;
    }

    .jcs-erp-sidebar,
    .jcs-erp-topbar,
    .jcs-erp-status-btn,
    .jcs-erp-statusbar,
    .jcs-erp-footer,
    .jcs-erp-backdrop,
    .jcs-erp-mobilenav,
    body.jcs-erp-shell .jcs-nav {
        display: none !important;
    }

    .jcs-erp-layout,
    .jcs-erp-workspace,
    .jcs-erp-content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }
}