/* ============================================================ 沐學 Muxue Design System — CallHub 本地共用樣式來源：沐學 tokens/colors.css + get_claude_design_prompt 脈絡。原則：專業溫暖可信賴・去 AI 味（無發光/漸層/紫藍）・少卡片多分隔線・輸入框寬度貼合資料・數字 tabular・小圓角・Lucide 線性圖示・無深色模式。用法：頁面，Lucide 走 CDN。 ============================================================ */ /* ── 切頁過場（View Transitions，方案A）── 整頁導覽自動淡入淡出取代白閃；側欄/頂列標名→過場中保持不動（只內容淡出）。 Chrome/Edge 生效；Safari/Firefox 自動忽略＝維持原本行為。尊重 reduce-motion。 */ @view-transition{ navigation: auto; } ::view-transition-group(*){ animation-duration:.22s; } aside.side{ view-transition-name: mx-side; } header.top{ view-transition-name: mx-top; } @media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none; } } :root{ --mx-canvas:#F7F4EE; --mx-surface:#FCFAF6; --mx-surface-sunk:#F2EEE5; --mx-ink:#2A3742; --mx-ink-2:#5E6B75; --mx-ink-3:#909AA1; --mx-line:#E4DFD3; --mx-line-strong:#D2CBBC; --mx-primary:#3E5266; --mx-primary-ink:#2B3A47; --mx-primary-soft:#EAEFF3; --mx-accent:#B47B4A; --mx-accent-soft:#F3E9DD; --mx-ok:#4F7A5B; --mx-ok-soft:#E7EFE7; --mx-warn:#B98A2E; --mx-warn-soft:#F5EDD9; --mx-danger:#B4553F; --mx-danger-soft:#F5E3DC; --mx-on-primary:#FCFAF6; --mx-on-accent:#FCFAF6; --mx-font-sans:'Noto Sans TC',system-ui,sans-serif; --mx-font-serif:'Noto Serif TC',serif; --mx-radius:6px; --mx-radius-sm:4px; } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--mx-canvas);font-family:var(--mx-font-sans);color:var(--mx-ink);line-height:1.6;-webkit-font-smoothing:antialiased} /* ── 游標紀律（規範9）── 滑鼠：非輸入/非可點一律箭頭（文字/表格不顯示 I-beam）；可點元件各自 cursor:pointer。文字 caret：只有真正的輸入框顯示——避免 Turbo 導覽後取得焦點時， Chrome 在內容起點（左上 logo「沐」前）畫出殘留閃爍 caret。 */ body{cursor:default;caret-color:transparent} input,textarea,select,[contenteditable]{caret-color:auto} h1,h2,h3,h4{font-family:var(--mx-font-serif);font-weight:600;color:var(--mx-ink)} .tnum{font-variant-numeric:tabular-nums} .serif{font-family:var(--mx-font-serif)} button,input,select,textarea{font-family:inherit} .lucide{width:1em;height:1em;stroke-width:1.7;flex-shrink:0} .muted{color:var(--mx-ink-3)} .ink2{color:var(--mx-ink-2)} /* ── App shell ── */ .app{display:flex;min-height:100vh} aside.side{width:220px;flex-shrink:0;background:var(--mx-surface);border-right:1px solid var(--mx-line-strong);display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .side-head{display:flex;align-items:center;border-bottom:1px solid var(--mx-line)} .side-head .brand{flex:1;min-width:0;border-bottom:none} .side-head .side-collapse-btn{margin-right:10px} .brand{padding:14px 16px 11px;display:flex;align-items:center;gap:7px;font-weight:700;font-size:20px;color:var(--mx-primary);cursor:pointer} .brand .lucide{width:24px;height:24px;color:var(--mx-primary)} .brand .brand-logo{height:20px;width:auto;color:var(--mx-primary);flex-shrink:0} .brand span{font-family:var(--mx-font-serif);font-weight:600;letter-spacing:.06em} nav.side-nav{padding:8px;display:flex;flex-direction:column;gap:1px;flex:1;overflow:auto} .nav-group{font-size:11px;font-weight:600;color:var(--mx-ink-3);padding:9px 12px 3px;letter-spacing:.04em} .nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:6px 12px;border:none;border-radius:var(--mx-radius);background:transparent;color:var(--mx-ink-2);font-size:14px;font-weight:500;text-align:left;text-decoration:none;transition:background .15s;cursor:pointer} .nav-item .lucide{width:18px;height:18px;color:var(--mx-ink-3)} .nav-item:hover{background:rgba(62,82,102,.05)} .nav-item.on{background:var(--mx-primary-soft);color:var(--mx-primary);font-weight:600} .nav-item.on .lucide{color:var(--mx-primary)} /* 🛠 開發用切換角色（僅 local 顯示） */ .dev-switch{padding:10px 12px;border-top:1px dashed var(--mx-line-strong);background:var(--mx-warn-soft);display:flex;flex-direction:column;gap:5px} .dev-switch label{font-size:11px;color:var(--mx-warn);font-weight:600;display:flex;align-items:center;gap:5px} .dev-switch select{font-family:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--mx-line-strong);border-radius:6px;background:var(--mx-surface);color:var(--mx-ink);cursor:pointer;width:100%} .side-user{padding:12px;border-top:1px solid var(--mx-line);display:flex;align-items:center;gap:6px} .avatar{width:34px;height:34px;border-radius:999px;background:var(--mx-accent-soft);color:var(--mx-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0} /* 側欄收合（桌面，個人偏好存 session，SSR 直接渲染 class 不閃爍） */ aside.side{transition:width .15s ease} aside.side.collapsed{width:64px} aside.side.collapsed .nav-label{display:none} aside.side.collapsed .side-head{flex-direction:column;gap:2px;padding-bottom:8px} aside.side.collapsed .side-head .side-collapse-btn{margin-right:0} aside.side.collapsed .brand{justify-content:center;padding:14px 0 11px} aside.side.collapsed .nav-group{display:none} aside.side.collapsed .nav-item{justify-content:center;padding:8px 0} aside.side.collapsed .nav-item .lucide{margin:0} aside.side.collapsed .dev-switch{display:none} aside.side.collapsed .side-user{flex-direction:column;padding:10px 0;gap:4px} /* 收合/展開兩個圖示都預渲染，CSS 切換顯示（見 layout.blade.php 註解說明原因） */ .side-collapse-btn .ic-expand{display:none} aside.side.collapsed .side-collapse-btn .ic-collapse{display:none} aside.side.collapsed .side-collapse-btn .ic-expand{display:inline-flex} .main{flex:1;display:flex;flex-direction:column;min-width:0} header.top{height:60px;flex-shrink:0;background:var(--mx-surface);border-bottom:1px solid var(--mx-line-strong);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:5} header.top h1{font-size:18px} .top-right{display:flex;align-items:center;gap:14px;color:var(--mx-ink-2)} .bell{position:relative;display:inline-flex} .bell .dot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--mx-accent)} .top-date{font-size:13px;color:var(--mx-ink-3)} main.content{flex:1;overflow:auto} .wrap{padding:22px 30px 48px;margin:0 auto} .wrap-narrow{max-width:780px} .wrap-mid{max-width:900px} .wrap-wide{max-width:1160px} .wrap-form{max-width:880px} /* ── Badge ── */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px} .badge .bdot{width:6px;height:6px;border-radius:50%;background:currentColor} .badge.primary{background:var(--mx-primary-soft);color:var(--mx-primary)} .badge.ok{background:var(--mx-ok-soft);color:var(--mx-ok)} .badge.warn{background:var(--mx-warn-soft);color:var(--mx-warn)} .badge.danger{background:var(--mx-danger-soft);color:var(--mx-danger)} .badge.accent{background:var(--mx-accent-soft);color:var(--mx-accent)} .badge.slate{background:var(--mx-surface-sunk);color:var(--mx-ink-3)} /* ── Button ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid transparent;transition:background .15s,filter .15s;cursor:pointer;text-decoration:none} .btn .lucide{width:14px;height:14px} .btn-sm{padding:6px 11px;font-size:13px} .btn-block{width:100%} .btn-pri{background:var(--mx-primary);color:var(--mx-on-primary)} .btn-pri:hover{background:var(--mx-primary-ink)} .btn-accent{background:var(--mx-accent);color:var(--mx-on-accent)} .btn-accent:hover{filter:brightness(.96)} .btn-sec{background:var(--mx-surface);border-color:var(--mx-line-strong);color:var(--mx-ink-2)} .btn-sec:hover{background:rgba(62,82,102,.05)} .btn-ghost{background:transparent;color:var(--mx-primary)} .btn-ghost:hover{background:var(--mx-primary-soft)} /* ── Segmented / Tabs ── */ .seg{display:inline-flex;border:1px solid var(--mx-line-strong);border-radius:8px;overflow:hidden} .seg button{padding:9px 16px;border:none;border-left:1px solid var(--mx-line);background:transparent;color:var(--mx-ink-2);font-size:13.5px;font-weight:500;cursor:pointer} .seg button:first-child{border-left:none} .seg button.on{background:var(--mx-primary);color:#fff;font-weight:600} .tabs{display:flex;gap:20px;border-bottom:1px solid var(--mx-line-strong)} .tabs a{padding:10px 2px;font-size:14px;color:var(--mx-ink-3);text-decoration:none;border-bottom:2px solid transparent;font-weight:500;cursor:pointer} .tabs a.on{color:var(--mx-primary);border-bottom-color:var(--mx-accent);font-weight:600} /* ── Panel / Card (弱卡片，克制用) ── */ .panel{border:1px solid var(--mx-line-strong);border-radius:var(--mx-radius);background:var(--mx-surface);padding:16px 18px;margin-bottom:18px} .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} /* 含整寬表格的 panel：表格貼齊外框（去 panel↔表格雙邊框間距），head 加分隔線、分頁留邊 */ .panel-table{padding:0;overflow:hidden} .panel-table>.panel-head{padding:14px 18px;margin-bottom:0;border-bottom:1px solid var(--mx-line-strong)} .panel-table>.tbl{border:none;border-radius:0} .panel-table>.mx-pager{padding:12px 18px;margin-top:0;border-top:1px solid var(--mx-line)} .panel-title{font-size:13px;font-weight:600;color:var(--mx-ink-2)} .card{border:1px solid var(--mx-line-strong);border-radius:var(--mx-radius);background:var(--mx-surface);padding:14px 16px;margin-bottom:14px} .card.warn{border-color:var(--mx-warn)} .card.accent{border-color:var(--mx-accent);background:var(--mx-accent-soft)} .card .c-title{font-size:12.5px;font-weight:600;color:var(--mx-ink-2);margin-bottom:10px} .card.warn .c-title{color:var(--mx-warn)} .card.accent .c-title{color:var(--mx-accent)} .note{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--mx-ink-3)} .note .lucide{width:13px;height:13px} /* ── KPI 卡（單框內細線切格） ── */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--mx-line-strong);border-radius:var(--mx-radius);background:var(--mx-surface);overflow:hidden;margin-bottom:20px} .kpi{padding:16px 18px;border-left:1px solid var(--mx-line)} .kpi:first-child{border-left:none} .kpi .k-label{font-size:12.5px;color:var(--mx-ink-3)} .kpi .k-val{font-size:26px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums} .kpi .k-val.accent{color:var(--mx-accent)} .kpi .k-sub{font-size:12px;color:var(--mx-ink-3);margin-top:2px} /* ── Field / Form ── */ .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px} .field{display:flex;gap:12px} .field .k{width:72px;flex-shrink:0;font-size:13px;color:var(--mx-ink-3)} .field .v{font-size:13.5px} .form-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end} .f{display:flex;flex-direction:column;gap:5px} .f label{font-size:12px;color:var(--mx-ink-3)} .inp{border:1px solid var(--mx-line-strong);border-radius:var(--mx-radius);background:var(--mx-surface);padding:8px 10px;font-size:13.5px;color:var(--mx-ink)} .inp:focus{outline:none;box-shadow:0 0 0 3px rgba(62,82,102,.18);border-color:var(--mx-primary)} textarea.inp{resize:vertical} .w-xs{width:64px}.w-sm{width:90px}.w-m{width:120px}.w-md{width:150px}.w-l{width:180px}.w-xl{width:240px}.w-full{width:100%} .sec{border-top:1px solid var(--mx-line);padding-top:16px;margin-top:16px} .sec-title{font-size:13px;font-weight:600;color:var(--mx-ink-2);margin-bottom:12px} .pills{display:flex;gap:7px;flex-wrap:wrap} .pill{padding:6px 13px;border-radius:999px;border:1px solid var(--mx-line-strong);background:var(--mx-surface);color:var(--mx-ink-2);font-size:13px;cursor:pointer} .pill.on{border-color:var(--mx-primary);background:var(--mx-primary);color:#fff} .stickybar{position:sticky;bottom:0;background:var(--mx-canvas);border-top:1px solid var(--mx-line);padding:14px 0;margin-top:18px;display:flex;justify-content:flex-end;gap:10px} /* ── Table（hairline zebra） ── */ .tbl{width:100%;border:1px solid var(--mx-line-strong);border-radius:var(--mx-radius);overflow:hidden;background:var(--mx-surface);border-collapse:collapse} .tbl thead th{text-align:left;font-size:12px;color:var(--mx-ink-3);font-weight:600;padding:10px 16px;border-bottom:1px solid var(--mx-line-strong)} .tbl tbody td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--mx-line)} .tbl tbody tr:last-child td{border-bottom:none} .tbl tbody tr:nth-child(even){background:var(--mx-surface-sunk)} .tbl .num{text-align:right;font-variant-numeric:tabular-nums} .tbl .serial{font-weight:700;color:var(--mx-primary);font-variant-numeric:tabular-nums} .list-grid{border:1px solid var(--mx-line-strong);border-radius:var(--mx-radius);overflow:hidden;background:var(--mx-surface)} .list-row{display:grid;gap:12px;padding:12px 16px;align-items:center;border-bottom:1px solid var(--mx-line);cursor:pointer} .list-row:last-child{border-bottom:none} .list-row:nth-child(even){background:var(--mx-surface-sunk)} .list-head{font-size:12px;color:var(--mx-ink-3);font-weight:600;border-bottom:1px solid var(--mx-line-strong);cursor:default} /* ── Rate bar / ProgressBar ── */ .rate{display:flex;align-items:center;gap:8px} .rate .track{flex:1;height:6px;border-radius:999px;background:var(--mx-surface-sunk);overflow:hidden;min-width:60px} .rate .fill{height:100%;border-radius:999px;background:var(--mx-primary)} .rate .fill.ok{background:var(--mx-ok)} .rate .fill.warn{background:var(--mx-warn)} .rate .pct{font-size:12.5px;color:var(--mx-ink-2);font-variant-numeric:tabular-nums;min-width:40px;text-align:right} /* ── Timeline ── */ .tl-item{display:flex;gap:12px;padding-bottom:16px;position:relative} .tl-item:last-child{padding-bottom:0} .tl-item:not(:last-child)::after{content:"";position:absolute;left:15px;top:32px;bottom:0;width:1px;background:var(--mx-line)} .tl-dot{width:32px;height:32px;border-radius:999px;background:var(--mx-primary-soft);color:var(--mx-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0} .tl-dot.accent{background:var(--mx-accent-soft);color:var(--mx-accent)} .tl-dot .lucide{width:15px;height:15px} .tl-body{padding-top:4px} .tl-body .lbl{font-size:13.5px;font-weight:600} .tl-body .at{font-size:12px;color:var(--mx-ink-3);margin-left:8px;font-variant-numeric:tabular-nums} /* ── Section title / grid helpers ── */ .section-title{font-size:14px;font-weight:600;margin-bottom:10px} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--mx-ink-3);text-transform:uppercase} .grid-2{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start} .grid-half{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .row{display:flex;align-items:center;gap:10px} .between{display:flex;align-items:center;justify-content:space-between;gap:12px} .serial-chip{width:44px;height:44px;border-radius:8px;background:var(--mx-primary-soft);color:var(--mx-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;flex-shrink:0} /* ── Empty state ── */ .empty{text-align:center;padding:48px 20px;color:var(--mx-ink-3)} .empty .lucide{width:34px;height:34px;color:var(--mx-line-strong);margin-bottom:10px} .empty .e-title{font-size:15px;font-weight:600;color:var(--mx-ink-2)} .empty .e-hint{font-size:13px;margin-top:5px} /* ── Chart placeholder（本地稿用；實作換 Chart.js） ── */ .chart-ph{border:1px dashed var(--mx-line-strong);border-radius:var(--mx-radius);background:var(--mx-surface);display:flex;align-items:center;justify-content:center;color:var(--mx-ink-3);font-size:13px;min-height:180px} .bars{display:flex;align-items:flex-end;gap:10px;height:160px;padding:12px} .bars .bar{flex:1;background:var(--mx-primary);border-radius:3px 3px 0 0;min-width:14px} .bars .bar.soft{background:var(--mx-line-strong)} .donut{width:150px;height:150px;border-radius:999px;background:conic-gradient(var(--mx-primary) 0 45%,var(--mx-accent) 45% 68%,var(--mx-warn) 68% 82%,var(--mx-line-strong) 82% 100%);position:relative} .donut::after{content:"";position:absolute;inset:38px;border-radius:999px;background:var(--mx-surface)} /* ============================================================ 手機/平板 RWD ── 漢堡離屏抽屜 + 寬表水平捲動 + grid/kpi/篩選重排 ============================================================ */ .mxnav-cb{display:none} .hamburger{display:none;align-items:center;justify-content:center;width:38px;height:38px;margin-right:10px;border:1px solid var(--mx-line-strong);border-radius:8px;background:var(--mx-surface);color:var(--mx-ink-2);cursor:pointer;flex-shrink:0} .hamburger .lucide{width:20px;height:20px} .mxnav-overlay{display:none} .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--mx-radius)} .header-left{display:flex;align-items:center;min-width:0} @media(max-width:1024px){ .grid-2,.grid-half{grid-template-columns:1fr} } @media(max-width:820px){ /* 側欄 → 離屏抽屜（CSS-only checkbox 控制） */ aside.side{position:fixed;top:0;left:0;z-index:60;height:100vh;width:250px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(42,55,66,.2)} /* 手機走離屏抽屜：桌面收合偏好在此不生效，抽屜開啟時一律完整寬度顯示 */ aside.side.collapsed{width:250px} aside.side.collapsed .side-head{flex-direction:row;gap:0;padding-bottom:0} aside.side.collapsed .nav-label{display:inline} aside.side.collapsed .nav-group{display:block} aside.side.collapsed .brand{justify-content:flex-start;padding:14px 16px 11px} aside.side.collapsed .nav-item{justify-content:flex-start;padding:6px 12px} aside.side.collapsed .side-user{flex-direction:row;padding:12px;gap:10px} aside.side.collapsed .dev-switch{display:flex} .mxnav-cb:checked ~ .app aside.side{transform:none} .mxnav-cb:checked ~ .app .mxnav-overlay{display:block;position:fixed;inset:0;z-index:55;background:rgba(42,55,66,.42)} .hamburger{display:inline-flex} header.top{padding:0 14px} header.top h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .top-date{display:none} main.content .wrap,.wrap{padding:16px 14px 40px} /* KPI / 卡牆 / 二欄版面手機重排 */ .kpi-row{grid-template-columns:1fr 1fr} .kpi{border-left:none;border-top:1px solid var(--mx-line)} .kpi:nth-child(-n+2){border-top:none} .kpi:nth-child(2n){border-left:1px solid var(--mx-line)} .cards{grid-template-columns:1fr !important} /* 寬表格：水平捲動（.tbl-scroll 由 layout JS 自動包） */ .tbl,table.tbl{min-width:600px} /* 篩選列堆疊、輸入放寬 */ .form-row{flex-direction:column;align-items:stretch;gap:12px} .form-row .f{width:100%} .form-row .inp,.form-row select.inp,.f .inp{width:100%} .seg{width:100%}.seg button{flex:1;text-align:center} .w-l,.w-xl,.w-md,.w-full{width:100%} .stickybar{flex-wrap:wrap} } @media(max-width:480px){ /* KPI 維持 2 欄（更緊湊，避免單欄過空過長）；欄間補左框 */ .kpi{padding:13px 14px} .kpi:nth-child(2n){border-left:1px solid var(--mx-line)} .kpi .k-val{font-size:23px} header.top{height:54px} } /* 側欄導覽 badge（如約訪提醒「需盡快確認」筆數）：暖色小藥丸，靠右；收合時縮到角落 */ .nav-item{position:relative} .nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--mx-warn);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none} .side.collapsed .nav-badge{position:absolute;top:5px;right:6px;margin:0;min-width:16px;height:16px;font-size:10px}