/* =================================================================
   Studio Ops — 後台設計系統落地（Claude Design 方向 B：柔和現代 + 金額等寬）
   注入 django-unfold；類名以 s- 命名空間，避免與 Unfold/Tailwind 衝突。
   來源：pmsys-design / styles/ds.css + 04 Unfold 落地對映。
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --s-blue-50:#EFF6FF; --s-blue-100:#DBEAFE; --s-blue-600:#2563EB; --s-blue-700:#1D4ED8;
  --s-app-bg:#F3F5F9; --s-surface:#FFFFFF; --s-surface-3:#F7F9FC;
  --s-border:#E6EAF1; --s-border-strong:#D6DCE6;
  --s-ink:#101828; --s-ink-2:#344054; --s-muted:#667085; --s-faint:#98A2B3;
  /* status palette */
  --s-gray-bg:#F1F5F9; --s-gray-fg:#475569;
  --s-blue-bg:#EFF6FF; --s-blue-fg:#1D4ED8;
  --s-green-bg:#ECFDF3; --s-green-fg:#067647;
  --s-amber-bg:#FFFAEB; --s-amber-fg:#B54708;
  --s-red-bg:#FEF3F2; --s-red-fg:#B42318;
  --s-purple-bg:#F4F3FF; --s-purple-fg:#5925DC;
  --s-teal-bg:#ECFDFA; --s-teal-fg:#107569;
  --s-pos:#067647; --s-neg:#B42318; --s-warn:#B54708;
  --s-r-card:14px; --s-r-ctl:9px; --s-r-sm:7px;
  --s-sh-card:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -14px rgba(16,24,40,.14);
  --s-font-sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --s-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

/* ---- 全站字體：套用 Noto Sans TC ---- */
body, .unfold, button, input, select, textarea, .text-font-default-light{
  font-family:var(--s-font-sans);
}

/* 鎖定亮色：原生控件（捲軸/表單/日期選擇器）不隨 OS 深色偏好變暗（D-034）*/
html{color-scheme:light !important;}

/* ---- 狀態徽章（7 色語彙，跨模型共用）---- */
.s-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;line-height:1.4;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.05);
}
.s-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.s-badge--gray{background:var(--s-gray-bg);color:var(--s-gray-fg);}
.s-badge--blue{background:var(--s-blue-bg);color:var(--s-blue-fg);}
.s-badge--green{background:var(--s-green-bg);color:var(--s-green-fg);}
.s-badge--amber{background:var(--s-amber-bg);color:var(--s-amber-fg);}
.s-badge--red{background:var(--s-red-bg);color:var(--s-red-fg);}
.s-badge--purple{background:var(--s-purple-bg);color:var(--s-purple-fg);}
.s-badge--teal{background:var(--s-teal-bg);color:var(--s-teal-fg);}

/* 優先級小標（無圓點）*/
.s-prio{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--s-r-sm);}
.s-prio--high{background:var(--s-red-bg);color:var(--s-red-fg);}
.s-prio--mid{background:var(--s-amber-bg);color:var(--s-amber-fg);}
.s-prio--low{background:var(--s-gray-bg);color:var(--s-gray-fg);}

/* ---- 金額 / 數字：等寬 + 表格數字 ---- */
.s-money{font-family:var(--s-font-mono);font-feature-settings:"tnum";font-weight:700;letter-spacing:-.01em;color:var(--s-ink);white-space:nowrap;}
.s-money .cur{font-family:var(--s-font-sans);font-size:.85em;color:var(--s-muted);font-weight:700;margin-right:1px;}
.s-money--pos{color:var(--s-pos);} .s-money--neg{color:var(--s-neg);} .s-money--warn{color:var(--s-warn);}
.s-num{font-family:var(--s-font-mono);font-feature-settings:"tnum";color:var(--s-muted);white-space:nowrap;}

/* ---- 列內動作連結（PDF / 看板）---- */
.s-action{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--s-blue-700);text-decoration:none;}
.s-action:hover{text-decoration:underline;}

/* ===== 儀表板（覆寫 admin/index.html 用）===== */
.s-dash{margin-bottom:28px;}
.s-dash__h{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--s-ink);margin:0 0 14px;}
.s-grid{display:grid;gap:16px;margin-bottom:18px;}
.s-grid--3{grid-template-columns:repeat(1,1fr);}
.s-grid--2{grid-template-columns:repeat(1,1fr);}
@media(min-width:640px){.s-grid--3{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.s-grid--2{grid-template-columns:repeat(2,1fr);}}

.s-kpi{background:linear-gradient(180deg,#fff,#FBFCFE);border:1px solid var(--s-border);border-radius:var(--s-r-card);padding:16px 18px;box-shadow:var(--s-sh-card);}
.s-kpi__label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--s-muted);font-weight:500;margin-bottom:8px;}
.s-kpi__val{font-size:26px;font-weight:900;letter-spacing:-.025em;font-family:var(--s-font-mono);font-feature-settings:"tnum";color:var(--s-ink);}
.s-kpi__val .cur{font-size:14px;font-weight:700;color:var(--s-muted);font-family:var(--s-font-sans);margin-right:2px;}
.s-kpi--green .s-kpi__val{color:var(--s-pos);}
.s-kpi--amber .s-kpi__val{color:var(--s-warn);}

.s-card{background:var(--s-surface);border:1px solid var(--s-border);border-radius:var(--s-r-card);box-shadow:var(--s-sh-card);overflow:hidden;}
.s-card__head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--s-border);font-size:14px;font-weight:700;}
.s-card__head .muted{font-weight:500;color:var(--s-muted);font-size:12.5px;}
.s-card__body{padding:6px 0;}

.s-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.s-tbl td{padding:9px 18px;border-bottom:1px solid var(--s-border);color:var(--s-ink-2);}
.s-tbl tr:last-child td{border-bottom:none;}
.s-tbl tr:hover td{background:var(--s-blue-50);}
.s-tbl .right{text-align:right;}
.s-tbl a{color:var(--s-blue-700);font-weight:600;text-decoration:none;}
.s-tbl a:hover{text-decoration:underline;}
.s-empty{padding:22px 18px;font-size:13px;color:var(--s-faint);}

/* 快速動作列 */
.s-quick{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.s-quick a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff;background:var(--s-blue-600);border-radius:var(--s-r-ctl);padding:9px 14px;text-decoration:none;box-shadow:0 1px 2px rgba(37,99,235,.35);}
.s-quick a:hover{background:var(--s-blue-700);}
.s-quick a.ghost{background:#fff;color:var(--s-ink-2);border:1px solid var(--s-border-strong);box-shadow:0 1px 2px rgba(16,24,40,.05);}
.s-quick a.ghost:hover{background:var(--s-surface-3);}

/* =================== 自訂操作頁（console）=================== */
.s-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.s-h1{font-size:23px;font-weight:900;letter-spacing:-.015em;color:var(--s-ink);margin:0;}
.s-sub{font-size:13.5px;color:var(--s-muted);margin:5px 0 0;max-width:680px;line-height:1.55;}
.s-back{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--s-muted);text-decoration:none;margin-bottom:14px;}
.s-back:hover{color:var(--s-blue-700);}
.s-actions{display:flex;gap:8px;flex-wrap:wrap;}

.s-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:var(--s-r-ctl);padding:8px 13px;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;}
.s-btn--primary{background:var(--s-blue-600);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.35);}
.s-btn--primary:hover{background:var(--s-blue-700);}
.s-btn--ghost{background:#fff;color:var(--s-ink-2);border-color:var(--s-border-strong);}
.s-btn--ghost:hover{background:var(--s-surface-3);}
.s-btn--dark{background:var(--s-ink);color:#fff;}

/* KPI strip（緊湊，多欄）*/
.s-strip{display:grid;gap:14px;margin-bottom:18px;grid-template-columns:repeat(2,1fr);}
@media(min-width:720px){.s-strip{grid-template-columns:repeat(4,1fr);}}
.s-strip--5{grid-template-columns:repeat(2,1fr);}
@media(min-width:960px){.s-strip--5{grid-template-columns:repeat(5,1fr);}}
.s-ck{background:linear-gradient(180deg,#fff,#FBFCFE);border:1px solid var(--s-border);border-radius:var(--s-r-card);padding:14px 16px;box-shadow:var(--s-sh-card);}
.s-ck__l{font-size:12px;color:var(--s-muted);font-weight:500;margin-bottom:6px;}
.s-ck__v{font-size:21px;font-weight:900;letter-spacing:-.02em;font-family:var(--s-font-mono);font-feature-settings:"tnum";color:var(--s-ink);}
.s-ck--green .s-ck__v{color:var(--s-pos);} .s-ck--amber .s-ck__v{color:var(--s-warn);} .s-ck--blue .s-ck__v{color:var(--s-blue-700);}

/* tabs */
.s-tabs{display:flex;gap:2px;border-bottom:1px solid var(--s-border);margin-bottom:18px;flex-wrap:wrap;}
.s-tab{font-size:13px;font-weight:600;color:var(--s-muted);padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;}
.s-tab:hover{color:var(--s-ink-2);}
.s-tab.on{color:var(--s-blue-700);border-bottom-color:var(--s-blue-600);}
.s-tab .n{color:var(--s-faint);font-weight:700;margin-left:4px;}

/* avatar / chip */
.s-avatar{width:26px;height:26px;border-radius:50%;background:var(--s-blue-100);color:var(--s-blue-700);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;}
.s-chip{font-size:11px;font-weight:600;color:var(--s-ink-2);background:var(--s-surface-3);border:1px solid var(--s-border);padding:2px 8px;border-radius:var(--s-r-sm);}

/* aging bar */
.s-aging{display:grid;grid-template-columns:repeat(1,1fr);gap:12px;margin-bottom:18px;}
@media(min-width:720px){.s-aging{grid-template-columns:repeat(5,1fr);}}
.s-aging-cell{background:#fff;border:1px solid var(--s-border);border-radius:var(--s-r-card);padding:13px 15px;box-shadow:var(--s-sh-card);}
.s-aging-cell .l{font-size:11.5px;font-weight:600;color:var(--s-muted);}
.s-aging-cell .v{font-size:18px;font-weight:800;font-family:var(--s-font-mono);font-feature-settings:"tnum";margin-top:5px;}
.s-aging-cell .meter{height:4px;border-radius:3px;background:var(--s-surface-3);margin-top:8px;overflow:hidden;}
.s-aging-cell .meter i{display:block;height:100%;border-radius:3px;}
.s-aging-cell.amber .v{color:var(--s-warn);} .s-aging-cell.amber .meter i{background:#F79009;}
.s-aging-cell.red .v{color:var(--s-neg);} .s-aging-cell.red .meter i{background:#F04438;}
.s-aging-cell.gray .meter i{background:var(--s-faint);}
.s-aging-cell.total{background:linear-gradient(180deg,#fff,#FFF8EE);}

/* commission flow stepper */
.s-flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.s-stage{flex:1;min-width:170px;background:#fff;border:1px solid var(--s-border);border-radius:var(--s-r-card);padding:14px 16px;box-shadow:var(--s-sh-card);}
.s-stage .h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--s-ink-2);}
.s-stage .h .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.s-stage .v{font-size:19px;font-weight:900;font-family:var(--s-font-mono);font-feature-settings:"tnum";margin:7px 0 3px;}
.s-stage .d{font-size:11.5px;color:var(--s-faint);line-height:1.5;}
.dot-accrued{background:#F79009;} .dot-payable{background:var(--s-blue-600);} .dot-stmt{background:#7A5AF8;} .dot-paid{background:#12B76A;}
.s-flow .arrow{display:flex;align-items:center;color:var(--s-faint);font-weight:700;font-size:18px;}

/* renewals timeline */
.s-renew-month{margin-bottom:18px;}
.s-rm-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.s-rm-head .dot{width:9px;height:9px;border-radius:50%;background:var(--s-blue-500,#3B82F6);}
.s-rm-head .m{font-size:14px;font-weight:800;color:var(--s-ink);}
.s-rm-head .c{font-size:11px;font-weight:700;color:var(--s-muted);background:var(--s-surface-3);border:1px solid var(--s-border);border-radius:var(--s-r-sm);padding:1px 7px;}
.s-renew-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--s-border);border-radius:var(--s-r-card);padding:13px 16px;box-shadow:var(--s-sh-card);margin-bottom:8px;}
.s-renew-card.urgent{border-color:#FEC84B;background:linear-gradient(180deg,#fff,#FFFCF5);}
.s-renew-card .rc-ic{width:36px;height:36px;border-radius:9px;background:var(--s-blue-50);color:var(--s-blue-600);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;}
.s-renew-card .rc-main{flex:1;min-width:0;}
.s-renew-card .rc-top{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;flex-wrap:wrap;}
.s-renew-card .rc-meta{font-size:12px;color:var(--s-muted);margin-top:3px;}
.s-renew-card .rc-right{display:flex;align-items:center;gap:12px;flex:none;}

/* 表單列（記錄收款 / 開票）*/
.s-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.s-field{display:flex;flex-direction:column;gap:5px;}
.s-field label{font-size:11.5px;font-weight:600;color:var(--s-ink-2);}
.s-input{font-family:inherit;font-size:13px;color:var(--s-ink);background:#fff;border:1px solid var(--s-border-strong);border-radius:var(--s-r-ctl);padding:8px 10px;}
.s-input--mono{font-family:var(--s-font-mono);text-align:right;}
.s-input:focus{outline:none;border-color:var(--s-blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.s-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--s-muted);background:var(--s-blue-50);border:1px solid var(--s-blue-100);border-radius:var(--s-r-ctl);padding:10px 12px;margin-bottom:16px;line-height:1.55;}
.s-empty{padding:22px 18px;font-size:13px;color:var(--s-faint);}
.s-2col{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:980px){.s-2col{grid-template-columns:1fr 1fr;}}

/* =================== Unfold 外殼微調，向原型靠（A＋）=================== */
/* 純白側欄（原型側欄為 #fff，襯 slate 頁底）*/
#nav-sidebar, #nav-sidebar-inner{background:#fff !important;}
#nav-sidebar{border-right:1px solid var(--s-border) !important;}
/* 群組標題：原型風 tiny / 大寫 / 字距 / faint 灰 */
#nav-sidebar-apps h2{
  font-size:10.5px !important;font-weight:700 !important;
  letter-spacing:.1em;text-transform:uppercase;color:var(--s-faint) !important;
  margin-bottom:2px !important;
}
/* 導覽項目 + 作用中態（原型＝藍底藍字）*/
#nav-sidebar-apps a{font-size:13px;}
#nav-sidebar-apps a.active{background:var(--s-blue-50) !important;color:var(--s-blue-700) !important;}
#nav-sidebar-apps a.active .material-symbols-outlined{color:var(--s-blue-600) !important;}

/* ---- 報價 / 合約 編輯器（設計規格：主欄 + sticky 摘要側欄 + 即時計算）---- */
.s-edit-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
@media(min-width:1000px){.s-edit-grid{grid-template-columns:1fr 330px;}}
.s-side-sticky{position:sticky;top:16px;}
.s-itable{width:100%;border-collapse:collapse;}
.s-itable th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--s-faint);text-align:left;padding:8px;border-bottom:1px solid var(--s-border);font-weight:700;}
.s-itable th.right,.s-itable td.right{text-align:right;}
.s-itable td{padding:6px 8px;border-bottom:1px solid var(--s-border);vertical-align:middle;}
.s-itable .s-input{padding:6px 8px;width:100%;}
.s-iconbtn{border:none;background:transparent;color:var(--s-faint);cursor:pointer;font-size:16px;padding:4px 6px;line-height:1;}
.s-iconbtn:hover{color:var(--s-neg);}
.s-sum-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:7px 0;color:var(--s-ink-2);}
.s-sum-line .s-input{width:130px;}
.s-sum-total{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:900;color:var(--s-blue-700);padding-top:10px;border-top:1px solid var(--s-border);margin-top:4px;}
.s-sum-total .s-money{color:var(--s-blue-700);}
.s-divider{height:1px;background:var(--s-border);border:none;margin:10px 0;}
.s-card-pad{padding:18px;}
.s-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--s-faint);margin:0 0 12px;}
.s-field--full{flex:1 1 100%;}
.s-form--stack{flex-direction:column;align-items:stretch;}
.s-form--stack .s-field{width:100%;}
.s-form--stack .s-input,.s-form--stack textarea.s-input{width:100%;}