/* =================================================================
   Studio Ops — 原型設計系統「精準移植」（scoped 於 .dsx）
   來源：pmsys-design/styles/ds.css + app.css（方向 B）。
   全部選擇器以 .dsx 命名空間隔離，避免與 django-unfold 全域樣式衝突。
   用於報價/合約等「設計版」編輯頁，1:1 還原原型版面。
   ================================================================= */
.dsx{
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-200:#BFDBFE; --blue-300:#93C5FD;
  --blue-400:#60A5FA; --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8;
  --blue-800:#1E40AF; --blue-900:#1E3A8A; --primary:#2563EB; --primary-hover:#1D4ED8;
  --app-bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#FBFCFE; --surface-3:#F7F9FC;
  --border:#E6EAF1; --border-strong:#D6DCE6;
  --ink:#101828; --ink-2:#344054; --muted:#667085; --faint:#98A2B3; --faint-2:#C2C8D2;
  --st-gray-bg:#F1F5F9; --st-gray-fg:#475569; --st-blue-bg:#EFF6FF; --st-blue-fg:#1D4ED8;
  --st-green-bg:#ECFDF3; --st-green-fg:#067647; --st-amber-bg:#FFFAEB; --st-amber-fg:#B54708;
  --st-red-bg:#FEF3F2; --st-red-fg:#B42318; --st-purple-bg:#F4F3FF; --st-purple-fg:#5925DC;
  --st-teal-bg:#ECFDFA; --st-teal-fg:#107569;
  --pos:#067647; --neg:#B42318; --warn:#B54708;
  --r-card:14px; --r-ctl:9px; --r-sm:7px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh-card:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -14px rgba(16,24,40,.14);
  --sh-pop:0 16px 40px -10px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.06);
  --sh-focus:0 0 0 3px rgba(37,99,235,.18);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  color:var(--ink);
  font-size:13px;
  line-height:1.55;
}
.dsx *{box-sizing:border-box;}

/* typography */
.dsx .t-h1{font-size:24px;font-weight:900;letter-spacing:-.015em;line-height:1.2;margin:0;}
.dsx .t-h2{font-size:18px;font-weight:700;letter-spacing:-.01em;}
.dsx .t-h3{font-size:15px;font-weight:700;}
.dsx .t-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.dsx .t-muted{color:var(--muted);}
.dsx .t-faint{color:var(--faint);}
.dsx .t-sm{font-size:12px;}

/* buttons */
.dsx .btn{font-family:inherit;font-size:13px;font-weight:500;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:var(--r-ctl);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .14s,border-color .14s,box-shadow .14s,color .14s;}
.dsx .btn:focus-visible{outline:none;box-shadow:var(--sh-focus);}
.dsx .btn-sm{padding:6px 10px;font-size:12px;gap:5px;}
.dsx .btn-lg{padding:11px 18px;font-size:14px;}
.dsx .btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.35);}
.dsx .btn-primary:hover{background:var(--primary-hover);}
.dsx .btn-secondary{background:#fff;color:var(--ink-2);border-color:var(--border-strong);box-shadow:var(--sh-sm);}
.dsx .btn-secondary:hover{background:var(--surface-3);border-color:var(--faint-2);}
.dsx .btn-ghost{background:transparent;color:var(--blue-700);}
.dsx .btn-ghost:hover{background:var(--blue-50);}
.dsx .btn-dark{background:var(--ink);color:#fff;}
.dsx .btn-dark:hover{background:#000;}

/* badges */
.dsx .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:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(16,24,40,.04);white-space:nowrap;}
.dsx .badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.dsx .badge-gray{background:var(--st-gray-bg);color:var(--st-gray-fg);}
.dsx .badge-blue{background:var(--st-blue-bg);color:var(--st-blue-fg);}
.dsx .badge-green{background:var(--st-green-bg);color:var(--st-green-fg);}
.dsx .badge-amber{background:var(--st-amber-bg);color:var(--st-amber-fg);}
.dsx .badge-red{background:var(--st-red-bg);color:var(--st-red-fg);}
.dsx .badge-purple{background:var(--st-purple-bg);color:var(--st-purple-fg);}
.dsx .badge-teal{background:var(--st-teal-bg);color:var(--st-teal-fg);}
.dsx .chip-soft{font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--border);padding:3px 9px;border-radius:var(--r-sm);}

/* cards */
.dsx .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-card);}
.dsx .card-pad{padding:20px;}
.dsx .card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);}
.dsx .card-head h3{margin:0;font-size:14px;font-weight:700;}

/* forms */
.dsx .field{display:flex;flex-direction:column;gap:6px;}
.dsx .field label{font-size:12px;font-weight:600;color:var(--ink-2);}
.dsx .input,.dsx .select,.dsx .textarea{font-family:inherit;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-ctl);padding:9px 11px;width:100%;transition:border-color .14s,box-shadow .14s;}
.dsx .input:focus,.dsx .select:focus,.dsx .textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--sh-focus);}
.dsx .input::placeholder{color:var(--faint-2);}
.dsx .input-mono{font-family:var(--mono);text-align:right;}
.dsx .input-group{display:flex;align-items:stretch;}
.dsx .input-group .addon{display:flex;align-items:center;padding:0 10px;background:var(--surface-3);border:1px solid var(--border-strong);color:var(--muted);font-size:12px;font-weight:600;}
.dsx .input-group .addon:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl);border-right:none;}
.dsx .input-group .addon:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0;border-left:none;}
.dsx .input-group .input{border-radius:0;}
.dsx .input-group .input:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl);}
.dsx .input-group .input:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0;}

/* money */
.dsx .money{font-family:var(--mono);font-feature-settings:"tnum";font-weight:700;letter-spacing:-.01em;}
.dsx .money .cur{font-family:inherit;font-size:.85em;color:var(--muted);font-weight:700;margin-right:1px;}
.dsx .money-pos{color:var(--pos);} .dsx .money-neg{color:var(--neg);} .dsx .money-warn{color:var(--warn);}

/* tables */
.dsx .tbl{width:100%;border-collapse:collapse;font-size:13px;}
.dsx .tbl thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-3);white-space:nowrap;}
.dsx .tbl tbody td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--ink-2);vertical-align:middle;}
.dsx .tbl tbody tr:last-child td{border-bottom:none;}
.dsx .tbl tbody tr:hover{background:var(--blue-50);}
.dsx .tbl .amt{text-align:right;font-family:var(--mono);font-feature-settings:"tnum";font-weight:700;color:var(--ink);}
.dsx .tbl th.amt{text-align:right;}
.dsx .table-wrap{overflow-x:auto;}

/* misc */
.dsx .divider{height:1px;background:var(--border);border:none;margin:0;}
.dsx .link{color:var(--blue-700);font-weight:600;cursor:pointer;text-decoration:none;}
.dsx .link:hover{text-decoration:underline;}
.dsx .row{display:flex;align-items:center;}
.dsx .col{display:flex;flex-direction:column;}
.dsx .gap1{gap:4px;}.dsx .gap2{gap:8px;}.dsx .gap3{gap:12px;}.dsx .gap4{gap:16px;}.dsx .gap5{gap:20px;}
.dsx .grow{flex:1;}.dsx .center{align-items:center;}.dsx .between{justify-content:space-between;}.dsx .wrap{flex-wrap:wrap;}
.dsx .mt2{margin-top:8px;}.dsx .mt3{margin-top:12px;}.dsx .mt4{margin-top:16px;}

/* page shell（嵌於 unfold content 內）*/
.dsx.page,.dsx .page{max-width:1100px;margin:0 auto;}
.dsx .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;}
.dsx .page-head h1{margin:0;}
.dsx .back-link{display:inline-flex;align-items:center;gap:4px;background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;padding:0;margin-bottom:14px;text-decoration:none;}
.dsx .back-link:hover{color:var(--blue-700);}
.dsx .icon-act{background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;padding:5px 7px;border-radius:var(--r-sm);font-size:14px;line-height:1;}
.dsx .icon-act:hover{background:var(--blue-50);color:var(--blue-700);border-color:var(--blue-100);}
.dsx .audit-hint{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:#92742B;background:#FBF6E9;border:1px solid #EFE3C2;border-radius:var(--r-sm);padding:9px 11px;margin-top:14px;line-height:1.5;}

/* quote edit */
.dsx .qe-grid{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start;}
.dsx .qe-summary{position:sticky;top:16px;}
.dsx .qe-items thead th{background:var(--surface-3);}
.dsx .qe-items td{padding:5px 8px;}
.dsx .qe-inp{padding:7px 9px;border-color:transparent;background:transparent;}
.dsx .qe-inp:hover{background:var(--surface-3);}
.dsx .qe-inp:focus{background:#fff;border-color:var(--blue-500);}
.dsx .qe-sort{display:flex;flex-direction:column;gap:1px;padding-top:8px;}
.dsx .qe-arrow{background:none;border:none;color:var(--faint-2);cursor:pointer;padding:0 4px;line-height:1;font-size:11px;}
.dsx .qe-arrow:hover{color:var(--blue-600);}
.dsx .qe-line{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:7px 0;}
.dsx .qe-line.sub{color:var(--muted);font-size:12.5px;}
.dsx .qe-total{display:flex;align-items:baseline;justify-content:space-between;}
.dsx .qe-total span:first-child{font-size:14px;font-weight:700;}

@media (max-width:1100px){
  .dsx .qe-grid{grid-template-columns:1fr;}
  .dsx .qe-summary{position:static;}
}