/* Notifly analytics — warm-paper Design System
   色票抄自 static/design-system + dashboard/theme.py（terracotta 主、sage 副、
   amber、奶油底）。字體：Noto Serif TC（主標/數字/卡片標題/時間）+ Noto Sans TC。*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@500;600;700&display=swap");

:root{
  --paper-50:#FFFCF4; --paper-100:#FAF5EB; --paper-200:#F3EDDE; --paper-300:#E8DFCC;
  --paper-400:#D8CCB4; --paper-500:#C9BCA4;
  --ink-900:#2B2117; --ink-700:#4A3C2E; --ink-500:#6B5D4C; --ink-400:#8A7F70; --ink-300:#B5A99A;
  --terracotta-600:#B04F2F; --terracotta-500:#D4633F; --terracotta-400:#E8743B;
  --terracotta-100:#FBE7DE; --terracotta-50:#FDF3ED;
  --sage-600:#2D5E44; --sage-500:#3E7D5C; --sage-100:#E0EDDF; --sage-50:#F2F8F1;
  --amber-600:#B07A12; --amber-500:#E8A33B; --amber-100:#FAEBC8;
  --rouge-600:#B23A30; --rouge-500:#C8332A; --rouge-100:#FCE5E1;
  --bg:var(--paper-100); --bg-elev:var(--paper-50); --border:var(--paper-300);
  --rule:var(--paper-400); --primary:var(--terracotta-500); --primary-ink:var(--terracotta-600);
  --serif:"Noto Serif TC",Georgia,serif;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --shadow-sm:0 1px 0 rgba(70,50,30,.04),0 1px 2px rgba(70,50,30,.05);
  --shadow-md:0 2px 0 rgba(70,50,30,.04),0 10px 24px -12px rgba(70,50,30,.2);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink-900); background:var(--bg);
  background-image:repeating-linear-gradient(180deg,transparent 0,transparent 39px,rgba(140,95,45,.03) 39px,rgba(140,95,45,.03) 40px);
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:var(--serif)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:218px 1fr;min-height:100vh}
.sidebar{
  background:var(--paper-200); border-right:1px solid var(--border);
  padding:22px 16px; display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 18px}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--terracotta-500);
  color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:18px}
.brand .name{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink-900);line-height:1}
.brand .name small{display:block;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.18em;color:var(--ink-400);text-transform:uppercase;margin-top:3px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--ink-700);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:all .12s}
.nav-item i{font-size:18px;color:var(--ink-400)}
.nav-item:hover{background:var(--paper-300)}
.nav-item.active{background:var(--terracotta-50);color:var(--terracotta-600)}
.nav-item.active i{color:var(--terracotta-500)}
.sidebar .spacer{flex:1}
.sidebar .foot{font-size:10.5px;color:var(--ink-400);padding:8px;line-height:1.6}

.main{padding:24px 30px 48px;max-width:1080px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;gap:16px}
.kicker{font-size:11px;letter-spacing:.22em;color:var(--terracotta-600);font-weight:500;text-transform:uppercase}
.page-title{font-family:var(--serif);font-weight:700;font-size:27px;line-height:1.15;margin:3px 0 0;letter-spacing:-.01em}
.topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.date{font-family:var(--serif);font-size:14px;color:var(--ink-500);letter-spacing:.04em}
.controls{display:flex;align-items:center;gap:8px}
.inst-seg{display:inline-flex;background:var(--paper-200);border:1px solid var(--border);border-radius:999px;padding:2px}
.inst-seg button{border:none;background:none;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink-500);
  padding:4px 12px;border-radius:999px;cursor:pointer}
.inst-seg button.on{background:var(--terracotta-500);color:#fff}
.pill{font-size:11px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--sage-100);color:var(--sage-600);display:inline-flex;align-items:center;gap:5px}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--sage-500)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.kpi{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 15px}
.kpi .l{font-size:11.5px;color:var(--ink-400);font-weight:500;display:flex;align-items:center;gap:5px}
.kpi .l i{font-size:15px}
.kpi .v{font-family:var(--serif);font-weight:700;font-size:34px;line-height:1;color:var(--terracotta-600);margin-top:9px;letter-spacing:-.01em}
.kpi .s{font-size:11px;color:var(--ink-400);margin-top:6px}
.kpi.warn .v{color:var(--rouge-500)}
.kpi.sage .v{color:var(--sage-600)}

/* ---------- cards / grid ---------- */
.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch}
.grid-2.even{grid-template-columns:1fr 1fr}
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 17px;box-shadow:var(--shadow-sm)}
.card-title{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink-700);display:flex;align-items:center;gap:7px;margin-bottom:2px}
.card-title i{font-size:18px}
.card-sub{font-size:11px;color:var(--ink-400);margin-bottom:13px}
.section-h{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink-900);margin:26px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:8px}
.section-h i{font-size:19px;color:var(--terracotta-500)}

/* ---------- bars ---------- */
.bar-row{display:flex;align-items:center;gap:9px;margin:11px 0}
.bar-row .nm{font-size:13px;color:var(--ink-700);width:62px;flex-shrink:0;font-weight:500}
.track{flex:1;height:13px;background:var(--paper-200);border-radius:7px;overflow:hidden}
.fill{height:100%;border-radius:7px}
.bar-row .ct{font-family:var(--serif);font-size:16px;color:var(--ink-500);width:30px;text-align:right;flex-shrink:0;font-weight:600}

/* ---------- list ---------- */
.list .li{display:flex;align-items:center;gap:11px;padding:9px 4px;border-top:1px solid var(--paper-200);border-radius:8px;transition:background .12s}
.list .li:first-child{border-top:none}
.list .li:hover{background:var(--paper-50)}
.av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;font-weight:600}
.email{font-size:13px;color:var(--ink-900);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.email .full{display:none}
.list .li:hover .email .mask{display:none}
.list .li:hover .email .full{display:inline}
.tag{font-size:10.5px;font-weight:500;padding:2px 9px;border-radius:999px;flex-shrink:0}
.tm{font-family:var(--serif);font-size:13px;color:var(--ink-500);width:46px;text-align:right;flex-shrink:0;font-weight:500}

/* agency/colour tags */
.c-terracotta{background:var(--terracotta-100);color:var(--terracotta-600)}
.c-sage{background:var(--sage-100);color:var(--sage-600)}
.c-amber{background:var(--amber-100);color:var(--amber-600)}
.c-ink{background:var(--paper-300);color:var(--ink-700)}
.c-rouge{background:var(--rouge-100);color:var(--rouge-600)}

/* ---------- 評分：航班卡片手風琴 ---------- */
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--ink-500);margin-bottom:10px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.fcards{display:flex;flex-direction:column;gap:9px}
.fcard{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.fcard.open{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.fcard-head{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;user-select:none}
.fcard-head:hover{background:var(--paper-100)}
.fcard-score{font-size:22px;font-weight:700;width:46px;text-align:center;flex-shrink:0;line-height:1}
.fcard-main{flex:1;min-width:0}
.fcard-row1{display:flex;align-items:baseline;gap:8px}
.fcard-flight{font-size:15px;font-weight:600;color:var(--ink-900)}
.fcard-row1 .muted{font-size:12px}
.ministack{margin-top:6px;height:8px;width:100%;max-width:240px;background:var(--paper-200);border-radius:5px;overflow:hidden;display:flex}
.ministack span{display:block;height:100%}
.fcard-flag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--rouge-600);background:var(--rouge-100);padding:2px 8px;border-radius:999px;flex-shrink:0}
.fcard-chev{font-size:18px;color:var(--ink-400);transition:transform .34s cubic-bezier(.4,0,.2,1),color .2s;flex-shrink:0}
.fcard.open .fcard-chev{transform:rotate(180deg);color:var(--primary)}
/* max-height 由 JS 量測實際內容高度設定（openCard/closeCard）→ 動畫到真實高度，無死區。
   inner padding 常駐（collapsed 時被 max-height:0 + overflow 裁掉），讓 scrollHeight 量測準確 */
.fcard-body{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1)}
.fcard-inner{overflow:hidden;padding:4px 14px 16px;border-top:1px solid var(--paper-200)}
.fc-stats{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--ink-500);margin:12px 0 4px}
.fc-stats b{color:var(--ink-900);font-size:15px;margin-left:2px}
.fc-note{font-size:11px;margin-top:6px;line-height:1.5}

/* ---------- 評分：次要按鈕 + 面板 ---------- */
.sec-actions{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 4px}
.sec-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-500);background:var(--paper-200);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 14px;cursor:pointer;transition:all .12s}
.sec-btn i{font-size:16px}
.sec-btn:hover{border-color:var(--border-strong);color:var(--ink-700)}
.sec-btn.on{background:var(--terracotta-50);border-color:var(--primary);color:var(--primary-ink)}
.sec-panel{display:none;margin-top:12px}
.fill-terracotta{background:var(--terracotta-500)}
.fill-sage{background:var(--sage-500)}
.fill-amber{background:var(--amber-500)}
.fill-ink{background:var(--ink-400)}

/* ---------- tables ---------- */
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-weight:500;color:var(--ink-400);font-size:11.5px;padding:7px 10px;border-bottom:1px solid var(--border)}
table.t td{padding:8px 10px;border-bottom:1px solid var(--paper-200);color:var(--ink-700)}
table.t td.num{font-family:var(--serif);font-weight:600;color:var(--ink-900);text-align:right}
table.t tr:last-child td{border-bottom:none}

/* ---------- 使用分析：stacked 訪客圖 legend + 單日明細 ---------- */
.stack-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--ink-500);margin-top:10px}
.stack-legend span{display:inline-flex;align-items:center;gap:5px}
.stack-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.day-detail{margin-top:14px;border-top:1px solid var(--paper-200);padding-top:10px}
.day-detail-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:14px}
.day-detail-h b{font-size:15px}
.day-close{margin-left:auto;border:1px solid var(--border);background:var(--paper-200);color:var(--ink-500);
  border-radius:6px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.day-close:hover{color:var(--ink-700);border-color:var(--rule)}
td.muted-num{color:var(--ink-400)!important;font-weight:400!important}

/* ---------- misc ---------- */
.muted{color:var(--ink-400);font-size:12px}
.note{font-size:11.5px;color:var(--ink-400);line-height:1.6;margin-top:13px;padding-top:11px;border-top:1px solid var(--paper-200)}
.note b{color:var(--terracotta-600)}
.badge-warn{background:var(--amber-100);color:var(--amber-600);font-size:11px;font-weight:500;padding:2px 8px;border-radius:6px}
.badge-bad{background:var(--rouge-100);color:var(--rouge-600);font-size:11px;font-weight:500;padding:2px 8px;border-radius:6px}
.badge-good{background:var(--sage-100);color:var(--sage-600);font-size:11px;font-weight:500;padding:2px 8px;border-radius:6px}
.chart-wrap{position:relative;width:100%}
.empty{color:var(--ink-400);font-size:13px;padding:18px;text-align:center;background:var(--paper-50);border-radius:var(--r-md);border:1px dashed var(--border)}
.notice{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-md);margin:8px 0;font-size:13px;line-height:1.5}
.notice i{font-size:18px;flex-shrink:0;margin-top:1px}
.notice.good{background:var(--sage-50);color:var(--sage-600)}
.notice.warn{background:var(--amber-100);color:var(--amber-600)}
.notice.bad{background:var(--rouge-100);color:var(--rouge-600)}
#map{height:440px;border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden}
.spin{padding:60px;text-align:center;color:var(--ink-400);font-size:13px}

/* ---------- 子分頁（今日/長期） + 可點表格 ---------- */
.subtabs{display:inline-flex;background:var(--paper-200);border:1px solid var(--border);border-radius:999px;padding:3px;margin-bottom:18px;gap:2px}
.subtabs button{border:none;background:none;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-500);padding:6px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.subtabs button i{font-size:16px}
.subtabs button.on{background:var(--terracotta-500);color:#fff}
table.tclick tbody tr{cursor:pointer;transition:background .12s}
table.tclick tbody tr:hover{background:var(--paper-100)}
table.tclick tbody tr.sel{background:var(--terracotta-50)}
table.tclick tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--terracotta-500)}
.err-sage{color:var(--sage-600)!important}
.err-rouge{color:var(--rouge-500)!important}

/* ===================== 響應式 ===================== */
/* ≤980：側欄收成頂部橫向導航條（可橫向捲動），主內容滿版 */
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:sticky;top:0;z-index:20;height:auto;flex-direction:row;align-items:center;
    gap:2px;padding:8px 12px;border-right:none;border-bottom:1px solid var(--border);
    overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-sm);
  }
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar{scrollbar-width:none}
  .brand{padding:0 12px 0 2px;flex-shrink:0}
  .brand .name small{display:none}
  .nav-item{flex-shrink:0;white-space:nowrap;padding:8px 12px}
  .sidebar .spacer,.sidebar .foot{display:none}
  .main{padding:20px 22px 40px;max-width:none}
}
/* ≤860：左圖右榜雙欄改上下堆疊；地圖頁同理 */
@media (max-width:860px){
  .grid-2,.grid-2.even{grid-template-columns:1fr}
}
/* ≤760：KPI 由 4 欄改 2 欄 */
@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}
/* ≤560：手機 — topbar 改直排、字級/間距/地圖高度縮小 */
@media (max-width:560px){
  .main{padding:16px 15px 36px}
  .topbar{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:18px}
  .topbar-right{align-items:flex-start;width:100%;gap:10px}
  .controls{width:100%}
  .inst-seg{width:100%;justify-content:space-between}
  .inst-seg button{flex:1;text-align:center}
  .page-title{font-size:23px}
  .kpis{gap:10px}
  .kpi .v{font-size:30px}
  .section-h{font-size:16px;margin-top:22px}
  #map{height:320px}
  .email{font-size:12.5px}
  /* 今日航班表：手機隱藏次要的「出發」欄，並讓判定方式 tag 不換行擠壓 */
  table.tclick th:nth-child(2),table.tclick td:nth-child(2){display:none}
  table.tclick .tag{white-space:nowrap}
  .subtabs button{padding:6px 14px}
  /* 評分一覽表（次要）手機隱藏出發欄 */
  table.scoretbl th:nth-child(2),table.scoretbl td:nth-child(2){display:none}
  .fcard-score{font-size:20px;width:40px}
  .ministack{max-width:180px}
}
/* ≤380：極窄機 — KPI 單欄避免擠壓 */
@media (max-width:380px){
  .kpi .v{font-size:27px}
}

/* ============ 手機優化（2026-08-07）============
   目標：單手可用。側欄橫捲導航 → 底部固定分頁列；卡片單欄直向捲動；
   表格/圖表在窄螢幕不爆版。桌機（>980）完全不受影響。 */
.tabbar{display:none}

@media (max-width:980px){
  /* 側欄退成純品牌列（不再是導航）；導航交給底部分頁列 */
  .sidebar{justify-content:space-between}
  .sidebar .nav-item{display:none}

  /* 底部分頁列 —— 固定、含 iOS home indicator 安全區 */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:color-mix(in srgb, var(--bg-elev) 92%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar .tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:7px 2px;border-radius:12px;cursor:pointer;
    color:var(--ink-400);text-decoration:none;
    /* 44pt 最小觸控目標（Apple HIG） */
    min-height:44px;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar .tab i{font-size:21px;line-height:1}
  .tabbar .tab span{font-size:11px;letter-spacing:.02em}
  .tabbar .tab.active{color:var(--terracotta-500)}
  .tabbar .tab.active i{transform:translateY(-1px)}
  .tabbar .tab:active{background:var(--terracotta-100)}

  /* 內容不被分頁列蓋住 */
  .main{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}

@media (max-width:560px){
  /* 卡片單欄；KPI 兩欄（四欄在手機是擠成一團的主因） */
  .kpis{grid-template-columns:repeat(2,1fr)}
  /* 寬表格改為可橫捲的容器，不要撐破版面 */
  .card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .note-warn{font-size:12.5px}
  /* 圖表在窄螢幕壓低，避免一屏只看得到一張圖 */
  .chart-wrap{height:150px!important}
  #map{height:300px}
}

/* 收費頁的到期提醒條 */
.note-warn{
  margin-top:16px;padding:12px 14px;border-radius:12px;line-height:1.65;font-size:13px;
  background:var(--amber-100);color:var(--ink-700);
  border:1px solid color-mix(in srgb, var(--amber-500) 35%, transparent);
  border-left:3px solid var(--amber-500);
}