/* 遊遊 CRM 樣式 — 沿用官網配色 #ff0844 / #d80038 / #333333 */
:root {
  --brand: #ff0844; --brand-dark: #d80038; --ink: #252936; --muted: #626977; --brand-soft: #fff0f3;
  --line: #e5e7eb; --bg: #f6f7f9; --card: #fff; --ok: #0a7d33; --warn: #b45309;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Noto Sans TC", "PingFang TC", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--brand-dark); font-weight: 600; }
.notes { white-space: pre-wrap; background: #fafafa; border-left: 3px solid var(--line); padding: 8px 12px; }

/* 工作區導覽 */
.console-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.console-shell main { width: 100%; max-width: 1480px; min-width: 0; padding: 0 36px 60px; }
.topbar { display: flex; flex-direction: column; background: var(--card); border-right: 1px solid var(--line); padding: 28px 16px 16px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.brand { color: var(--brand-dark); font-size: 1.7rem; font-weight: 850; padding: 0 12px 24px; }
.brand span { display: block; color: var(--muted); font-size: .65rem; letter-spacing: .12em; margin-top: 4px; }
.nav-menu { flex: 1; }
.nav-menu > summary { display: none; }
.nav-menu nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { color: var(--muted); font-size: .75rem; font-weight: 600; padding: 20px 12px 4px; }
.nav-label:first-child { padding-top: 0; }
.nav-menu nav a { color: var(--ink); padding: 10px 12px; border-radius: 8px; font-size: .9rem; min-height: 44px; }
.nav-menu nav a:hover { background: var(--bg); text-decoration: none; }
.nav-menu nav a[aria-current] { color: var(--brand-dark); background: var(--brand-soft); font-weight: 700; box-shadow: inset 3px 0 var(--brand-dark); }
.me { margin-top: 24px; padding: 16px 8px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.me > a { color: var(--ink); font-weight: 600; }
.me .muted { display: block; font-weight: 400; font-size: .75rem; }
.workspace-bar { min-height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; color: var(--muted); font-size: .8rem; }
.workspace-bar span:last-child { color: var(--ink); }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 30; background: var(--card); padding: 12px 20px; }
.skip-link:focus { top: 12px; }

/* buttons */
button, .btn { background: var(--brand-dark); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: .95rem; font-weight: 600; cursor: pointer; }
button:hover, .btn:hover { background: #b90030; text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--brand-dark); background: #fff; }
button.link, .link { background: none; color: var(--brand-dark); padding: 4px; font-weight: 600; }
.link.danger { color: #b91c1c; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.page-head > div { display: flex; gap: 8px; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 16px 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.kpi-val { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); }
.kpi-label { font-weight: 600; }
.kpi-target { color: var(--muted); font-size: .8rem; }

/* stage bars (dashboard) */
.stage-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.stage-bar { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.stage-bar:hover { border-color: var(--brand-dark); text-decoration: none; }
.stage-bar-count { font-size: 1.4rem; font-weight: 800; color: var(--brand-dark); }
.stage-bar-label { font-weight: 600; }
.stage-bar-amt { font-size: .8rem; color: var(--muted); }
@media (max-width: 800px) { .stage-bars { grid-template-columns: repeat(2, 1fr); } }

/* board (kanban) */
.board { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; }
.col { background: #eef0f3; border-radius: 10px; padding: 8px; min-width: 180px; }
.col-head { display: flex; justify-content: space-between; font-weight: 700; padding: 4px 6px 8px; }
.col-count { background: #fff; border-radius: 20px; padding: 0 8px; font-size: .8rem; }
.col-body { min-height: 80px; display: flex; flex-direction: column; gap: 8px; }
.col-body.over { outline: 2px dashed var(--brand); border-radius: 8px; }
.deal-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--ink); cursor: grab; }
.deal-card:hover { border-color: var(--brand-dark); text-decoration: none; }
.deal-card.dragging { opacity: .5; }
.deal-title { font-weight: 700; }
.deal-org { color: var(--muted); font-size: .85rem; }
.deal-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.deal-meta .amt { font-weight: 700; }
.deal-sub { font-size: .8rem; margin-top: 4px; }

/* tags / pills */
.tag { display: inline-block; background: #f1f2f4; border-radius: 6px; padding: 1px 7px; font-size: .75rem; color: var(--muted); margin-left: 6px; }
.pill { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: .8rem; font-weight: 700; color: #fff; background: var(--muted); }
.s-lead { background: #626977; } .s-qualifying { background: #1d4ed8; } .s-quoted { background: #4f46e5; }
.s-negotiation { background: #92400e; } .s-won { background: var(--ok); } .s-lost { background: #9b1c1c; }
.ok { color: var(--ok); font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }

/* tables */
table { width: 100%; border-collapse: collapse; background: var(--card); }
table th, table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table th { font-size: .8rem; color: var(--muted); text-transform: none; }
.tasks tr.overdue .due { color: #b91c1c; font-weight: 700; }
.tasks tr.due_soon .due { color: var(--warn); }
.tasks td.done { text-decoration: line-through; color: var(--muted); }
.inline-check { display: inline; } .inline-check input { width: auto; }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; max-width: 820px; }
.form.inline { max-width: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.form label.full, .form fieldset.full { grid-column: 1 / -1; }
.form label.grow { flex: 1; }
.form label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; }
.form input, .form select, .form textarea { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.form input[type=checkbox] { width: auto; }
.form .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.form .qual { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; gap: 20px; }
.form .qual legend { font-size: .85rem; color: var(--muted); }
.search { display: flex; gap: 8px; margin: 12px 0; }
.search input { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }

/* login */
.login { max-width: 360px; margin: 8vh auto; background: #fff; padding: 28px; border: 1px solid var(--line); border-radius: 14px; }
.login h1 { color: var(--brand-dark); }
.login form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.login input, .login select { padding: 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }

/* lists */
.contacts, .deal-mini, .docs, .timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.deal-mini li { display: flex; align-items: center; gap: 8px; }
.deal-mini .amt { margin-left: auto; font-weight: 600; }
.docs li { display: flex; align-items: center; gap: 8px; }
.docs .inline-del { margin-left: auto; }
.timeline li { border-left: 2px solid var(--line); padding: 0 0 4px 12px; }
.timeline .body { white-space: pre-wrap; font-size: .9rem; color: #444; margin-top: 2px; }

/* deal summary */
.summary { display: flex; flex-wrap: wrap; gap: 28px; }
.summary .lbl { display: block; color: var(--muted); font-size: .8rem; }
.stage-set { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.chip.active { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.qual-row { display: flex; gap: 14px; align-items: center; font-size: .9rem; }
details summary { cursor: pointer; color: var(--brand-dark); font-weight: 600; margin-top: 8px; }

/* 陌生開發 */
.recipients { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.recipients .check { font-weight: 400; }
.mail-preview { white-space: pre-wrap; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: inherit; font-size: .9rem; }
.inline-reset { display: inline-flex; gap: 6px; }
.inline-reset input { padding: 4px 6px; }
.form fieldset legend { font-weight: 600; font-size: .9rem; }

/* 共用內容與控制項 */
:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
button, .btn, input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
button, .btn, a, input, select, textarea { transition: background-color 150ms ease, border-color 150ms ease; }
.btn { display: inline-flex; align-items: center; justify-content: center; }
button:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea { max-width: 100%; min-width: 0; font: inherit; color: var(--ink); padding: 10px 12px; background: var(--card); border: 1px solid #b7bdc7; border-radius: 8px; }
.form input, .form select, .form textarea, .search input { border-color: #b7bdc7; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-dark); }
textarea { resize: vertical; }
.page-head { margin-bottom: 24px; flex-wrap: wrap; }
.page-head > div { flex-wrap: wrap; }
.page-head .page-intro { display: block; }
.page-intro p { margin: 0; }
.page-intro h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 8px 0; letter-spacing: -.035em; }
.eyebrow { font-size: .75rem; color: var(--brand-dark); font-weight: 700; letter-spacing: .08em; }
.card { padding: 24px; margin: 24px 0; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 16px; }
.kpi { padding: 20px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--brand-dark); }
.kpi-val { font-size: 1.65rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-label { font-size: .85rem; }
.kpi-target { margin-top: auto; }
.stage-bar { padding: 16px 12px; background: var(--bg); }
.table-scroll { overflow-x: auto; max-width: 100%; margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; }
.table-scroll table { margin: 0; border: 0; border-radius: 0; }
table th { background: var(--bg); white-space: nowrap; font-weight: 600; }
table th, table td { padding: 14px 16px; font-size: .85rem; }
table tbody tr:hover { background: #fff8fa; }
table td { min-width: 80px; }
table td a { font-weight: 600; }
div.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.pill.ok { background: #e8f5ed; color: var(--ok); }
.pill.warn { background: #fff3df; color: #92400e; }
.pill.error { background: var(--brand-soft); color: var(--brand-dark); }
.pill.muted { background: var(--bg); color: var(--muted); }
.form { margin-top: 24px; gap: 20px; }
.form > *, .two-col > * { min-width: 0; }
.form .qual, .search, .inline-reset, .qual-row { flex-wrap: wrap; }
.form.inline-reset { display: flex; max-width: 100%; align-items: center; }
.form.inline-reset > input { flex: 1 1 140px; }
.search input { min-width: 150px; }
.search select { max-width: 100%; }
.mail-preview, pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.docs li, .deal-mini li { flex-wrap: wrap; overflow-wrap: anywhere; }
.login { max-width: 420px; padding: 36px; border-top: 4px solid var(--brand-dark); }
@media (max-width: 1100px) { .console-shell main { padding-inline: 24px; } .stage-bars { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .console-shell { display: block; }
  .topbar { position: static; height: auto; padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 0 12px; font-size: 1.35rem; }
  .nav-menu > summary { display: list-item; padding: 12px 0; margin: 0; min-height: 44px; }
  .nav-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-label { grid-column: 1 / -1; }
  .me { margin-top: 12px; }
  .workspace-bar { min-height: 56px; margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .console-shell main { padding: 0 16px 40px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 16px; }
  .kpi-val { font-size: 1.3rem; }
  .card { padding: 16px; }
  .stage-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head > div, .page-head > span { display: flex; flex-wrap: wrap; gap: 8px; }
  .summary { gap: 16px; }
  .login { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

@media (min-width: 1101px) {
  .dashboard-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-kpis .kpi:last-child { grid-column: span 2; }
}