/* 即時監控類頁面（工時效率、自主表儀表板、客訴追蹤、通知中心、提醒設定）共用樣式：手機優先 */
.m-wrap{max-width:900px; margin:0 auto; padding:14px 14px 90px;}
.m-wrap h1{font-size:19px; margin:6px 0 2px;}
.m-meta{color:var(--muted); font-size:12.3px; margin:0 0 12px; line-height:1.55;}

.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0;}
@media (min-width:640px){.kpis{grid-template-columns:repeat(4,1fr);}.kpis.five{grid-template-columns:repeat(5,1fr);}}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow);}
.kpi .n{font-size:24px; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums;}
.kpi .l{font-size:12px; color:var(--muted); margin-top:2px;}
.kpi.bad .n{color:var(--danger);} .kpi.warn .n{color:var(--warn);} .kpi.good .n{color:var(--good);}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:7px 13px; font-size:13px; cursor:pointer; min-height:36px;}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.m-sel,.m-inp{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; padding:9px 11px; font-size:14px; min-height:40px; max-width:100%;}
.m-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;}

.m-box{border-radius:12px; padding:12px 14px; margin:12px 0; border:1px solid var(--line); background:var(--surface);}
.m-box h2{font-size:14.5px; margin:0 0 8px;}
.m-box.alert{border-color:var(--danger); background:color-mix(in srgb, var(--danger) 7%, var(--surface));}
.m-box.est{border-color:var(--warn); background:color-mix(in srgb, var(--warn) 8%, var(--surface));}
.m-row{padding:8px 0; border-top:1px dashed var(--line); font-size:13.3px;}
.m-row:first-of-type{border-top:none;}
.dim{color:var(--muted);}
.warn-t{color:var(--warn); font-weight:700;} .bad-t{color:var(--danger); font-weight:700;} .good-t{color:var(--good); font-weight:700;}

details.sec{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:10px 0; overflow:hidden;}
details.sec > summary{display:flex; justify-content:space-between; gap:8px; padding:12px 14px; font-weight:700; cursor:pointer; background:var(--surface-2); list-style:none; font-size:14.5px;}
details.sec > summary::-webkit-details-marker{display:none;}
details.sec > summary .sum{font-weight:400; font-size:12px; color:var(--muted); text-align:right;}
details.grp{border-top:1px solid var(--line);}
details.grp > summary{display:flex; justify-content:space-between; gap:8px; padding:9px 14px; font-weight:600; cursor:pointer; list-style:none; font-size:13.5px;}
details.grp > summary::-webkit-details-marker{display:none;}
.part{padding:6px 14px 10px;}
.part .pn{font-size:12.5px; font-weight:700; color:var(--accent); margin:4px 0;}
.step{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:8px 0; border-top:1px solid var(--line); font-size:13.3px;}
.step:first-of-type{border-top:none;}
.step .sub2{grid-column:1/-1; font-size:11.8px; color:var(--muted);}
.meter{height:7px; background:var(--surface-2); border-radius:5px; overflow:hidden; margin-top:4px; min-width:90px;}
.meter i{display:block; height:100%; background:var(--good);}
.meter.warn i{background:var(--warn);} .meter.bad i{background:var(--danger);}

.badge{display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; font-weight:700; margin-left:6px; vertical-align:1px;}
.b-pre{background:#E8EEF7; color:#33557F;} .b-over{background:#FBE3E1; color:#9B1C14;} .b-unset{background:#FBEBD2; color:#8A5200;}
.b-ok{background:#DDF0E6; color:#1F6A47;} .b-late{background:#FBEBD2; color:#8A5200;} .b-miss{background:#EADFF5; color:#5B2E91;}
@media (prefers-color-scheme: dark){
  .b-pre{background:#1C2B44; color:#9DC1F0;} .b-over{background:#43201D; color:#F4B2AC;} .b-unset{background:#40300F; color:#EBC275;}
  .b-ok{background:#16382A; color:#8FD9B4;} .b-late{background:#40300F; color:#EBC275;} .b-miss{background:#2E2142; color:#C9ABF0;}
}

.m-card{display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:10px 0; box-shadow:var(--shadow);}
.m-card.unread{border-left:4px solid var(--accent-2);}
.m-card .t{font-weight:700; font-size:14.2px; line-height:1.45;}
.m-card .b{font-size:12.6px; color:var(--muted); margin-top:3px; line-height:1.5;}
.m-card .d{font-size:11.5px; color:var(--muted); margin-top:5px;}

.btn-big{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 16px; border-radius:12px; font-size:15.5px; font-weight:700; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; min-height:48px;}
.btn-big.sec{background:var(--surface); color:var(--accent);}
.fab{position:fixed; right:16px; bottom:18px; z-index:20; box-shadow:0 6px 18px rgba(0,0,0,.28); width:auto; border-radius:999px; padding:13px 20px;}

.m-field{margin:10px 0;} .m-field label{display:block; font-size:12.8px; font-weight:700; margin-bottom:4px;}
.m-field input,.m-field textarea,.m-field select{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:15px; background:var(--surface); color:var(--ink); font-family:inherit;}
.m-field textarea{min-height:92px;}
.m-dialog{border:none; border-radius:16px; padding:0; width:min(560px,96vw); max-height:94vh; background:var(--surface); color:var(--ink);}
.m-dialog::backdrop{background:rgba(0,0,0,.45);}
.m-dialog .inner{padding:16px; overflow:auto; max-height:92vh;}
.files{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0;}
.files .f{position:relative; width:92px;}
.files .f img,.files .f video{width:92px; height:92px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#000; display:block;}
.files .f .x{position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff; border:none; border-radius:50%; width:22px; height:22px; font-size:12px; cursor:pointer; line-height:22px; padding:0;}
.files .f .cap{font-size:10.5px; color:var(--muted); margin-top:2px; line-height:1.3; word-break:break-all;}
.prog{height:8px; background:var(--surface-2); border-radius:6px; overflow:hidden; margin:4px 0;}
.prog i{display:block; height:100%; background:var(--accent); width:0;}

.stage{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; margin:12px 0;}
.stage h2{font-size:15.5px; margin:0 0 6px; display:flex; align-items:center; gap:8px;}
.stage .no{width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; display:inline-flex; align-items:center; justify-content:center;}
.stage.done .no{background:var(--good);} .stage.lock{opacity:.6;}
.dots{display:inline-flex; gap:4px; vertical-align:middle;} .dots i{width:9px; height:9px; border-radius:50%; background:var(--line); display:inline-block;} .dots i.on{background:var(--good);}

.bars .r{display:grid; grid-template-columns:96px 1fr 52px; gap:8px; align-items:center; font-size:13px; margin:7px 0;}
.bars .track{height:16px; background:var(--surface-2); border-radius:8px; overflow:hidden; display:flex;}
.bars .track i{display:block; height:100%;}
.heat td,.heat th{text-align:center; padding:7px 6px; font-size:12.5px;} .heat td:first-child,.heat th:first-child{text-align:left;}

.tabs-m{display:flex; gap:6px; overflow-x:auto; margin:10px 0; padding-bottom:4px;}
.tabs-m .chip{white-space:nowrap;}
.rule{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:10px 0;}
.rule.off{opacity:.62;}
.rule .hd{display:flex; gap:10px; align-items:flex-start; justify-content:space-between;}
.rule .nm{font-weight:700; font-size:14.5px;}
.tok{display:inline-flex; align-items:center; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 6px 3px 10px; font-size:12.5px; margin:3px 4px 3px 0;}
.tok button{border:none; background:none; color:var(--muted); cursor:pointer; font-size:14px; padding:0 4px;}
.sw{position:relative; width:46px; height:26px; flex:0 0 auto;} .sw input{opacity:0; width:100%; height:100%; margin:0; position:absolute; cursor:pointer; z-index:1;}
.sw span{position:absolute; inset:0; background:var(--line); border-radius:13px; transition:.15s;} .sw span::after{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.15s;}
.sw input:checked + span{background:var(--good);} .sw input:checked + span::after{left:23px;}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#142235; color:#fff; padding:10px 16px; border-radius:10px; font-size:13.5px; z-index:99; box-shadow:0 8px 24px rgba(0,0,0,.3); max-width:92vw;}
.empty{text-align:center; color:var(--muted); padding:30px 10px; font-size:14px;}