/* 同事工作介面：共用導覽、閱讀、表單及手機操作。 */
:root {
  --muted: #4f6259;
  --surface: #f3f6f4;
  --workspace-card-radius: 10px;
  --ui-soft: #e8f0eb;
  --ui-error: #a62f28;
  --ui-transition: 150ms ease;
  --control-height: 48px;
  --ui-action-border: #6d887b;
}
html { scroll-padding-block: 88px 120px; }
body { font-family: "PingFang HK", "Noto Sans TC", system-ui, sans-serif; }
main { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
main :where(h1,h2,h3,p,small,legend,summary) { overflow-wrap: anywhere; }
h1 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 750; letter-spacing: -.025em; }
h2 { font-size: 1.2rem; }
main .eyebrow { font-size: .85rem; letter-spacing: normal; }
.content-page, .hero { padding-top: 28px; }
.content-page { width: min(1280px, 100%); }
.content-page.narrow { width: min(980px, 100%); }
.hero { max-width: 1200px; margin-inline: auto; }
.hero > h1 { margin: 0 0 8px; }
.hero > p { margin: 0 0 24px; }
.page-heading { align-items: center; margin-bottom: 24px; }
.page-heading h1 { margin-top: 0; }
.page-heading p { color: var(--muted); }
.page-heading > .button-row { align-self: center; }
.button, button, summary, .choice, a { -webkit-tap-highlight-color: transparent; }
.button { border-radius: 8px; transition: background-color var(--ui-transition), color var(--ui-transition); }
.button, .button.compact, .form-actions .button, .step-applicability-form .button { min-height: var(--control-height); }
.button.primary { background: var(--forest); color: var(--white); }
.button.primary:hover { background: var(--forest-dark); }
.button.secondary { background: var(--white); border-color: #8daba0; }
.button.secondary:hover { background: var(--ui-soft); }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #916414; outline-offset: 3px; }
:where(input,select,textarea) { font-size: 1rem; }
main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),
main select:not([multiple]):not([size]), main select:not([multiple])[size="1"] {
  block-size: auto;
  min-block-size: var(--control-height);
  padding-block: 10px;
}
main select:not([multiple]):not([size]), main select:not([multiple])[size="1"] {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23084a3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  main select:not([multiple]):not([size]), main select:not([multiple])[size="1"] { appearance: auto; -webkit-appearance: auto; background-image: none; }
}
.select-search-caption, .choice-search-label > span, .select-search-status, .choice-search-status { font-size: .875rem; line-height: 1.5; }
.badge, .status, .person, .payment-summary .badge { font-size: .8125rem; line-height: 1.4; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border: 2px solid var(--ui-error); }
.form-card { gap: 28px; box-shadow: none; }
.form-card fieldset { scroll-margin-block: 88px; }
.form-card legend { font-size: 1.05rem; font-weight: 750; color: var(--forest); }
.form-card .helper-text, .flow-note { font-size: .9rem; }
.form-card .helper-text, .form-card label > small { font-size: 1rem; color: var(--ink); }
.flow-note { max-inline-size: 75ch; }
.flow-note { padding: 16px 18px; margin: 0 0 24px; background: var(--ui-soft); color: var(--ink); border-radius: 8px; line-height: 1.7; }
.optional-fields { background: var(--surface); border-radius: 8px; padding: 8px 16px; }
.optional-fields > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--forest); }
.optional-fields[open] > fieldset { margin-top: 16px; }
.submission-actions { padding-top: 8px; }
.save-progress, .form-error { font-size: 1rem; line-height: 1.7; }
.save-progress:not(:empty) { background: var(--ui-soft); border-radius: 8px; padding: 14px; }
.save-notice { padding: 16px 18px; font-size: 1rem; }
.sidebar-brand { padding: 0 12px 12px; }
.sidebar-brand b { letter-spacing: -.03em; font-size: 1.7rem; }
.sidebar-brand span { font-size: .85rem; opacity: 1; }
.environment-label { margin: 0 12px 16px; font-size: .875rem; border: 0; background: var(--forest-dark); }
.environment-label small { display: none; }
.nav-core { display: grid; gap: 6px; margin-bottom: 12px; }
.sidebar nav { gap: 4px; }
.sidebar nav a { align-items: center; min-height: 44px; border-radius: 8px; font-size: .94rem; font-weight: 650; }
.sidebar nav a:hover { background: #ffffff1a; color: var(--white); }
.sidebar nav a.active, .sidebar nav a[aria-current=page] { background: var(--ui-soft); color: var(--forest); }
.sidebar .nav-core a { color: #ffe2a8; }
.sidebar .nav-core a:hover { background: #ffe2a81a; color: #fff0d2; }
.sidebar .nav-core a.active, .sidebar .nav-core a[aria-current=page] { background: #f4d49b; color: #243b30; box-shadow: inset 4px 0 #b87824; }
.sidebar .nav-group-summary { font-size: .85rem; font-weight: 600; min-height: 44px; color: #e2eee7; }
.sidebar .nav-group-title { font-weight: 600; }
.sidebar .nav-group-icon { border: 0; }
.sidebar .nav-group-links { padding-left: 10px; }
.sidebar-account-identity span { font-size: .875rem; opacity: 1; }
.sidebar-account { border-top: 0; }
.sidebar-logout { border: 0; background: #ffffff1a; }
.daily-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.daily-action { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 4px 10px; align-content: center; min-height: 104px; padding: 18px; background: var(--white); color: var(--forest); border: 1px solid var(--ui-action-border); border-radius: 8px; text-decoration: none; transition: background-color var(--ui-transition), border-color var(--ui-transition); }
.daily-action strong { font-size: 1rem; line-height: 1.5; }
.daily-action span { grid-column: 1; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.daily-action svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.daily-action:hover { background: var(--ui-soft); border-color: var(--forest); }
.daily-action:active { background: #dbe8df; }
.daily-action:focus-visible { outline: 3px solid #916414; outline-offset: 3px; }
.daily-action.primary-action { background: var(--forest); border-color: var(--forest); color: var(--white); }
.daily-action.primary-action span { color: #e2eee7; }
.daily-action.primary-action:hover { background: var(--forest-dark); }
.dashboard-todo-card { border: 0; }
.dashboard-todo-card > .section-heading { align-items: start; text-align: left; }
.dashboard-todo-list { gap: 4px; }
.dashboard-todo-item { border: 0; background: var(--surface); border-radius: 8px; }
.draft-tools { display: flex; flex-wrap: wrap; align-items: start; gap: 16px; margin-bottom: 20px; }
.draft-tools > details { flex: 1 1 240px; padding: 0 16px; background: var(--white); border-radius: 8px; }
.draft-tools summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--forest); }
.draft-list { display: grid; gap: 8px; padding-bottom: 16px; }
.draft-list a { display: grid; gap: 4px; padding: 12px; background: var(--surface); text-decoration: none; overflow-wrap: anywhere; }
.draft-list span, .record-reference { font-size: .9rem; color: var(--muted); }
.draft-notice { padding: 14px 16px; background: var(--ui-soft); border-radius: 8px; line-height: 1.6; }
.form-card > .draft-notice { margin: 0; padding: 8px 12px; font-size: .875rem; }
.entry-note { margin: 0 0 16px; }
.entry-note > summary { display: flex; align-items: center; min-height: 44px; gap: 10px; color: var(--forest); cursor: pointer; font-weight: 650; }
.entry-note > summary::before { content: "+"; font-size: 1.25rem; }
.entry-note[open] > summary::before { content: "−"; }
.entry-note > p { margin: 8px 0 16px; max-width: 70ch; }
.more-actions { align-self: start; min-width: 120px; }
.more-actions > summary { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid #8daba0; border-radius: 8px; background: var(--white); color: var(--forest); cursor: pointer; font-weight: 650; }
.more-actions > summary::after { content: "+"; }
.more-actions[open] > summary::after { content: "−"; }
.more-actions > div { display: grid; gap: 8px; padding-top: 8px; }
.more-actions > div > .button { white-space: normal; text-align: left; }
.view-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.view-switcher a, .activity-shortcuts a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 8px; background: var(--white); font-weight: 650; color: var(--forest); text-decoration: none; }
.view-switcher a:hover, .activity-shortcuts a:hover { background: var(--ui-soft); }
.view-switcher a[aria-current=page] { background: var(--forest); color: var(--white); }
.filter-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
.filter-bar .search-field { grid-column: 1 / -1; }
.filter-bar > .button { align-self: end; }
.list-search-row > .button, .work-filter-search > .button { align-self: end; }
.payment-search-controls { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.payment-filter-card { gap: 12px; padding: 18px 20px; }
.payment-filter-card .payment-search-controls { gap: 12px; }
.payment-filter-card details.section-gap > summary { min-height: 44px; padding-block: 8px; }
.filter-active-note { display: inline-block; margin-left: 8px; color: var(--muted); font-size: .875rem; font-weight: 500; }
.payments-page .finance-list-tools { margin-top: 16px; }
.filter-actions { display: flex; gap: 8px; align-self: end; justify-content: flex-end; flex-wrap: wrap; }
.filter-actions .button { width: auto; }
.payment-list-header { font-size: .85rem; letter-spacing: normal; }
.payment-meta { font-size: .9rem; }
.payment-summary .badge { font-size: .8rem; }
.payment-summary h2 { font-size: 1.4rem; }
.finance-list-tools { gap: 20px; }
.finance-list-actions { display: flex; }
.report-options { display: grid; gap: 12px; margin-bottom: 36px; }
.report-options a { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(0,1.4fr) auto; gap: 18px; align-items: center; padding: 22px 24px; border-radius: 10px; background: var(--white); text-decoration: none; }
.report-options a:hover { background: var(--ui-soft); }
.report-options strong { font-size: 1.05rem; }
.report-options span { color: var(--muted); font-size: .93rem; }
.report-options b { color: var(--forest); font-size: .9rem; }
.report-work-section { background: var(--white); border-radius: 8px; }
.report-work-section > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 64px; padding: 16px 24px; cursor: pointer; font-size: 1.05rem; font-weight: 700; color: var(--forest); }
.report-work-section > summary > span { font-size: .875rem; font-weight: 400; color: var(--muted); }
.report-work-section > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; }
.report-work-section[open] > summary::after { content: "−"; }
.report-work-body { padding: 8px 24px 24px; }
.activity-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.record-card { box-shadow: none; }
a.record-card:hover { background: #f4f8f5; border-color: #a4bbae; }
.record-action { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: var(--forest); font-size: .875rem; font-weight: 700; }
.record-action svg, .work-link-arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.work-link-arrow { display: inline-block; vertical-align: -.18em; }
a.record-card:focus-visible, .work-row:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.mobile-primary-nav { display: none; }
main :where(input,select,textarea,button,summary) { scroll-margin-block: 100px 130px; }

@media (max-width: 1100px) {
  .daily-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-options a { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 761px) {
  .payment-filter-card .payment-search-controls { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
  .payment-filter-card .payment-search-controls .search-field { grid-column: auto; }
}
@media (max-width: 1000px) {
  .payment-list-header { display: none; }
  .payment-row { grid-template-columns: 24px minmax(0,1fr); align-items: start; }
  .payment-row > input { grid-column: 1; grid-row: 1 / span 3; margin-top: 4px; }
  .payment-row .payment-summary, .payment-row .payment-meta, .payment-row > .button { grid-column: 2; }
  .payment-row > .button { justify-self: start; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  .content-page, .content-page.activity-page { padding: 24px 16px calc(112px + env(safe-area-inset-bottom)); }
  .hero { padding: 94px 16px calc(112px + env(safe-area-inset-bottom)); }
  .mobile-topbar { background: var(--forest); border-bottom: 0; }
  .mobile-topbar::after { content: "JGIHK 團隊系統"; position: absolute; right: 18px; top: 22px; color: var(--white); font-size: .95rem; font-weight: 650; }
  .mobile-primary-nav { position: fixed; inset: auto 0 0; z-index: 8; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -4px 20px #17231f12; }
  .mobile-primary-nav a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 2px; border-radius: 8px; font-size: .875rem; font-weight: 700; color: var(--muted); text-decoration: none; }
  .mobile-primary-nav a[aria-current=page] { color: #243b30; background: #f4d49b; }
  .mobile-primary-nav a:active { background: var(--ui-soft); }
  .sidebar { z-index: 20; padding-bottom: 20px; }
  .page-heading { align-items: start; gap: 16px; }
  .page-heading h1 { font-size: 1.6rem; }
  .page-heading > .button { width: 100%; justify-content: center; }
  .daily-actions { gap: 10px; margin: 20px 0 24px; }
  .daily-action { min-height: 96px; padding: 14px 12px; column-gap: 6px; }
  .daily-action strong { font-size: 1rem; }
  .daily-action span { font-size: .875rem; }
  .form-card { padding: 22px 16px; }
  .form-card label { font-size: 1rem; }
  .form-card .helper-text { font-size: .9rem; }
  .flow-note { padding: 16px; }
  .filter-bar { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .payment-search-controls { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .filter-bar .search-field { grid-column: auto; }
  .payment-search-controls .search-field { grid-column: 1 / -1; }
  .payment-filter-card { padding: 16px; }
  .payments-page .page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
  .payments-page .page-heading > div { display: contents; }
  .payments-page .page-heading h1 { grid-column: 1; grid-row: 1; margin: 0; }
  .payments-page .page-heading > .button { grid-column: 2; grid-row: 1; width: auto; padding-inline: 12px; }
  .payments-page .page-heading p { grid-column: 1 / -1; grid-row: 2; }
  .view-switcher { gap: 8px; }
  .view-switcher a { padding: 10px 12px; font-size: .9rem; }
  .finance-list-tools { flex-direction: column; align-items: stretch; }
  .finance-list-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-list-actions .button { width: 100%; font-size: .85rem; padding-inline: 10px; }
  .payment-row { gap: 14px; }
  .payment-meta small { font-size: .85rem; }
  .report-options a { padding: 20px; }
  .report-work-section > summary { padding: 16px; }
  .report-work-body { padding: 8px 16px 20px; }
  .report-work-body > .button-row { display: grid; }
  .activity-shortcuts a { flex: 1 1 auto; justify-content: center; padding-inline: 10px; font-size: .9rem; }
  .submission-actions { display: grid !important; grid-template-columns: minmax(0,1fr); gap: 12px; }
  .submission-actions > .button { width: 100% !important; }
  .dashboard-todo-item { gap: 12px; }
  .dashboard-todo-item strong { font-size: 1rem; }
}
@media (max-width: 360px) {
  .payments-page .page-heading h1 { font-size: 1.35rem; }
  .daily-actions { grid-template-columns: minmax(0,1fr); }
  .daily-action { min-height: 76px; padding: 12px 16px; }
  .mobile-primary-nav { gap: 8px; padding-inline: 8px; }
  .mobile-primary-nav a { font-size: .75rem; }
  .view-switcher a { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 可隨時找到的操作求助，與隱藏中的 AI 工作室分開。 */
.page-context-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ai-help-open { overflow: hidden; }
.ai-help { position: static; }
.ai-help-launcher { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; min-height: 44px; flex-shrink: 0; padding: 10px 14px; border-radius: 10px; color: #243b30; background: #f4d49b; border-color: #243b30; font-size: 1rem; line-height: 1.4; }
.ai-help-panel { position: fixed; z-index: 40; top: 24px; right: 24px; bottom: 24px; width: min(680px, calc(100vw - 48px)); height: auto; max-height: none; overflow-y: auto; grid-template-rows: auto auto minmax(80px, 1fr) auto auto auto; box-shadow: 0 12px 44px #142d2433; }
.ai-help-close { min-height: 44px; width: 44px; flex-basis: 44px; }
.ai-help-header { position: sticky; top: 0; z-index: 2; background: var(--white); }
.ai-help-messages { min-height: 80px; max-height: none; }
.ai-help-message { max-width: 96%; }
.ai-help-reset { justify-self: end; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--forest); background: white; font: inherit; cursor: pointer; }
.ai-help-reset:disabled { cursor: wait; opacity: .6; }
.ai-help-suggestions > summary { min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--forest); cursor: pointer; font-size: .9rem; font-weight: 650; }
.ai-help-suggestions > summary::after { content: "+"; }
.ai-help-suggestions[open] > summary::after { content: "−"; }
.ai-help-quick .button { min-height: 44px; font-size: .85rem; }
.ai-help-message p, .ai-help-form textarea { font-size: 1rem; }
.ai-help-boundary, .ai-help-links a, .ai-help-status { font-size: .875rem; }
@media (max-width: 760px) {
  .page-context-bar + .app-shell .hero { padding-top: 28px; }
  .ai-help-panel { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); max-height: none; padding: 14px; }
  .ai-help-quick { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-help-quick .button { min-width: 0; padding: 6px; font-size: .8rem; }
}
@media (max-height: 600px) {
  .ai-help-panel { top: 12px; bottom: 12px; padding: 12px; gap: 8px; grid-template-rows: auto auto minmax(48px,1fr) auto auto auto; }
  .ai-help-messages { min-height: 48px; }
  .ai-help-form textarea { min-height: 56px; height: 56px; }
}