/* 旅人娛樂 CRM — 設計系統(2026-11-03 改版,結構參考良辰/貸立輕:深色側邊欄+頂列+色帶數字卡+彩色狀態標籤)
   配色沿用 LINE 圖文選單:海島藍綠 #1FA5A0、深海藍 #0C3C4A、珊瑚橘做強調 */
:root{
  --teal:#1FA5A0; --teal-2:#17938E; --teal-light:#E3F5F3; --navy:#0C3C4A; --navy-2:#0A3340; --deep:#072A35;
  --coral:#F0784A; --coral-light:#FDEDE5;
  --ink:#16313B; --sub:#557079; --muted:#8CA1A8; --line:#E2EAEC; --line-2:#EEF3F4; --soft:#F5F8F9; --bg:#EFF4F5;
  --ok:#148A5C; --ok-bg:#E5F6EE; --warn:#B26A00; --warn-bg:#FFF4E2; --bad:#C43A2C; --bad-bg:#FDECEB;
  --info:#2563A8; --info-bg:#E8F0FB;
  --r:14px; --shadow-s:0 1px 2px rgba(7,42,53,.05),0 1px 8px rgba(7,42,53,.05); --shadow-m:0 10px 28px rgba(7,42,53,.12);
  --side:232px; --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--teal-2);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.i{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── 版面:側邊欄+主區 ── */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{background:radial-gradient(130% 60% at 0% 0%,#14576A 0%,var(--navy) 55%,var(--deep) 100%);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30}
.brand{display:flex;align-items:center;gap:12px;padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand .logo{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:20px}
.brand b{font-size:16px;letter-spacing:2px;display:block;line-height:1.2}
.brand small{font-size:10px;letter-spacing:2.5px;opacity:.55}
.nav{padding:10px 12px;flex:1;overflow:auto}
.nav-label{font-size:10.5px;letter-spacing:2px;color:rgba(255,255,255,.42);padding:14px 10px 5px;font-weight:700}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:rgba(255,255,255,.78);font-size:13.5px;margin:1px 0}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.nav a.on{color:#fff;background:rgba(255,255,255,.14);font-weight:700}
.nav a .i{color:rgba(255,255,255,.65)} .nav a.on .i{color:#7FE0D9}
.side-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);font-size:12px}
.who{display:flex;align-items:center;gap:10px} .who b{font-weight:700;display:block} .who small{opacity:.65}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#5FD0C6);display:grid;place-items:center;font-weight:800;color:#fff}
.side-foot .acts{display:flex;gap:8px;margin-top:10px}
.side-foot .acts a{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:8px;padding:5px 10px}
.side-foot .acts a:hover{background:rgba(255,255,255,.16);text-decoration:none} .side-foot .acts .i{width:14px;height:14px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:0 28px;height:60px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.crumb b{color:var(--navy);font-size:15px} .crumb span::after{content:"/";margin-left:8px;opacity:.5}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:0 12px;width:min(340px,38vw);height:38px;color:var(--muted)}
.search:focus-within{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(31,165,160,.12)}
.search input{border:0;background:transparent;flex:1;outline:none;font-size:13.5px;color:var(--ink);min-width:0}
.menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;width:38px;height:38px;place-items:center;color:var(--sub);cursor:pointer}
.content{padding:24px 28px 48px;max-width:1240px;width:100%}
.scrim,.tabbar{display:none}

/* ── 標題 ── */
h1{font-size:22px;color:var(--navy);letter-spacing:.5px;line-height:1.3}
.content>h1+.sub,.page-head .sub{color:var(--sub);font-size:13px;margin:4px 0 18px}
.sub{color:var(--muted);font-size:12.5px}
.page-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-head .sub{margin:4px 0 0} .page-head .sp{flex:1}

/* ── 卡片、數字卡 ── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-s);min-width:0}
.card h2{font-size:14.5px;color:var(--navy);margin:-2px 0 14px;display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--teal)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.kpi>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 14px;position:relative;overflow:hidden;box-shadow:var(--shadow-s)}
.kpi>div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--navy)}
.kpi>div.hl::before{background:var(--teal)} .kpi>div.o::before{background:var(--coral)}
.kpi .n{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .hl .n{color:var(--teal-2)} .kpi .o .n{color:var(--coral)}
.kpi .l{font-size:12px;color:var(--sub);margin-top:4px}

/* ── 表格 ── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
th{background:#F4F8F9;color:var(--navy);font-weight:700;font-size:12px;letter-spacing:.3px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{border-top-left-radius:10px} th:last-child{border-top-right-radius:10px}
td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
td>a{white-space:nowrap}
tr:hover td{background:#F8FBFB}

/* ── 標籤(狀態用色)── */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 10px;border-radius:12px;background:#EDF2F3;color:#5E737A;white-space:nowrap}
.tag.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok{background:var(--ok-bg);color:var(--ok)} .tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.go{background:var(--teal-light);color:var(--teal-2)} .tag.off{background:#EEF1F2;color:#97A5AA}
.tag.info{background:var(--info-bg);color:var(--info)} .tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.navy{background:#E3ECEF;color:var(--navy)}

/* ── 按鈕、表單 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--teal);background:var(--teal);color:#fff;border-radius:10px;
  padding:8px 16px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px rgba(31,165,160,.25);transition:all .15s}
.btn:hover{background:var(--teal-2);border-color:var(--teal-2);text-decoration:none;color:#fff}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:0 1px 1px rgba(7,42,53,.04)}
.btn.sec:hover{background:var(--soft);color:var(--teal-2);border-color:#C9D8DB}
.btn.red{background:var(--bad);border-color:var(--bad);box-shadow:none} .btn.red:hover{background:#A92F23}
.btn .i{width:15px;height:15px}
input,select,textarea{border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:#fff;font-size:14px;width:100%;outline:none;transition:all .15s}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,165,160,.12)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--teal)}
textarea{line-height:1.8}
label{display:block;font-size:12px;color:var(--sub);font-weight:700;margin:12px 0 5px}
.row{display:flex;gap:14px;flex-wrap:wrap} .row>*{flex:1;min-width:160px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filters>a{background:#fff;border:1px solid var(--line);border-radius:16px;padding:4px 14px;font-size:12.5px;color:var(--sub);font-weight:700}
.filters>a:hover{text-decoration:none;border-color:#C9D8DB}
.filters>a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.filters label{margin:0}

/* ── 提示框 ── */
.flash{background:var(--teal-light);border:1px solid #BFE6E2;color:#0F5E5A;padding:11px 16px;border-radius:12px;margin-bottom:16px;font-size:13.5px}
.warnbox{background:var(--warn-bg);border:1px solid #F3D1A6;color:#7A4A0C;padding:12px 16px;border-radius:12px;margin:0 0 16px;font-size:13.2px;line-height:1.7}
.note{font-size:12.5px;color:var(--muted)}
.pre{white-space:pre-wrap;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.85}
.empty{padding:40px 16px;text-align:center;color:var(--muted)} .empty b{display:block;color:var(--sub);font-size:15px;margin-bottom:4px}

/* ── 出團表:一組一張卡 ── */
.daybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.daybar .day{font-size:15px;font-weight:800;color:var(--navy);padding:0 6px}
.daybar .btn{padding:7px 12px} .daybar input{width:auto}
.meet{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;border-radius:var(--r);padding:12px 16px;margin-bottom:14px;font-size:13.5px}
.meet .i{color:#7FE0D9}
.trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.trip{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);display:grid;grid-template-columns:86px 1fr;overflow:hidden}
.trip .when{background:linear-gradient(160deg,var(--teal),var(--teal-2));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 6px;text-align:center}
.trip .when b{font-size:21px;font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.trip .when small{font-size:11px;opacity:.85}
.trip .body{padding:14px 16px;min-width:0}
.trip .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trip .name{font-size:16px;font-weight:800;color:var(--navy)}
.trip .pax{margin-left:auto;font-size:13px;font-weight:800;color:var(--teal-2);background:var(--teal-light);border-radius:10px;padding:2px 10px}
.trip .meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.trip .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.trip .tel{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:5px 10px}
.trip .tel .i{width:15px;height:15px;color:var(--teal-2)} .trip .tel:hover{text-decoration:none;border-color:var(--teal)}
.trip .owner{color:var(--muted);font-size:12.5px} .trip .detail{margin-left:auto;font-weight:700}

/* ── 手機精簡清單(訂單、客戶):電腦看表格、手機看這個 ── */
.mlist{display:none}
.mitem{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow-s);color:var(--ink)}
.mitem:hover{text-decoration:none;border-color:var(--teal)}
.mitem .l1{display:flex;align-items:center;gap:8px}
.mitem .l1 b{font-size:16px;color:var(--navy)} .mitem .l1 .tag{margin-left:auto}
.mitem .l2{font-size:13.5px;color:var(--sub);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px}
.mitem .l2 b{color:var(--ink)}
.mitem .l3{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--muted)}
.mitem .l3 .more{color:var(--teal-2);font-weight:700}

/* ── 登入頁 ── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(120% 80% at 0% 0%,#14576A 0%,var(--navy) 50%,var(--deep) 100%)}
.login-panel{display:grid;grid-template-columns:1.05fr 1fr;width:min(860px,100%);background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.login-hero{background:linear-gradient(160deg,var(--teal),#147F7B);color:#fff;padding:40px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.login-hero .logo{font-size:40px} .login-hero h2{font-size:24px;line-height:1.45;margin-top:14px}
.login-hero p{opacity:.9;font-size:13.5px;margin-top:10px;line-height:1.8}
.login-hero ul{list-style:none;margin-top:18px;display:grid;gap:8px;font-size:13px}
.login-hero li::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.22);margin-right:8px;font-size:11px}
.login-hero .ft{font-size:10.5px;letter-spacing:3px;opacity:.6}
.login-box{padding:44px 38px}
.login-box h1{font-size:24px} .login-box .sub{margin:6px 0 20px}
.login-box .btn{width:100%;padding:11px;margin-top:20px;font-size:15px}

/* ── 手機版 ── */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;transform:translateX(-105%);transition:transform .25s}
  body.side-open .side{transform:none}
  body.side-open .scrim{display:block;position:fixed;inset:0;background:rgba(7,42,53,.45);z-index:25}
  .menu-btn{display:grid}
  .topbar{padding:0 14px;height:56px}
  .crumb span{display:none}
  .search{width:auto;flex:1;max-width:none}
  .content{padding:16px 14px 92px}
  h1{font-size:19px}
  .kpi{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
  .kpi>div{padding:10px 10px 9px} .kpi .n{font-size:21px} .kpi .n small{display:block;font-size:11px!important}
  .kpi .l{font-size:11px}
  .m-hide{display:none!important}
  .page-head h1{display:none} .page-head .sub{margin:0;font-size:13px;font-weight:700;color:var(--navy)}
  .daybar{gap:6px} .daybar .btn{padding:7px 10px;font-size:13px} .daybar input{flex:1;min-width:0}
  .card{padding:14px}
  .trips{grid-template-columns:1fr}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);font-weight:700;padding:4px 0}
  .tabbar a .i{width:22px;height:22px} .tabbar a.on{color:var(--teal-2)} .tabbar a:hover{text-decoration:none}
  /* 手機:資料表 → 一列一張卡片(欄位名在左、值在右),不再壓扁成一字一行 */
  .tw{overflow:visible;margin:0;padding:0}
  table.stack,table.stack tbody{display:block}
  table.stack tr.thead{display:none}
  table.stack tr{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:10px;box-shadow:var(--shadow-s)}
  table.stack td{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;border:0;padding:5px 0 5px 86px;position:relative;font-size:14px;min-width:0;word-break:break-word;min-height:30px}
  table.stack td::before{content:attr(data-label);position:absolute;left:0;top:7px;width:78px;font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.stack td.blank{display:none}
  table.stack td.nolabel{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--line);margin-top:6px;padding:9px 0 2px}
  table.stack td.nolabel::before{content:none}
  table.stack td input,table.stack td select{min-width:0;flex:1}
  table.stack td{text-align:left!important;justify-content:flex-start}
  table.stack td input[type=checkbox]{flex:none}
  .row{gap:10px} .row>*{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .savebar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:10;background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);margin:16px -14px -14px!important;padding:10px 14px;border-top:1px solid var(--line);
    border-radius:0 0 var(--r) var(--r);display:flex;gap:8px}
  .savebar .btn{flex:1}
  .mlist{display:block} .desk-only{display:none!important}
  table.stack tr:hover td{background:none}
  .card:has(> .tw > table.stack){background:transparent;border:0;box-shadow:none;padding:0}
  .card:has(> .tw > table.stack) h2{margin:4px 2px 10px}
  table.kv th{width:84px;white-space:normal;padding:9px 10px}
  table.kv td{padding:9px 10px;word-break:break-word}
  .filters form{flex:1 1 100%!important;margin-left:0!important}
  .login-panel{grid-template-columns:1fr} .login-hero{padding:28px 24px} .login-hero ul{display:none} .login-box{padding:28px 24px}
}
@media print{.side,.topbar,.tabbar{display:none}.app{display:block}.content{padding:0}}