/* 小鲨系统 · calm-teal-v1. Shared by the web panel and the online desktop client. */
:root {
    --xs-ink: #172033;
    --xs-muted: #617087;
    --xs-line: #dce3e9;
    --xs-surface: #fff;
    --xs-soft: #f5f7f9;
    --xs-sidebar: #eef2f4;
    --xs-teal: #086b70;
    --xs-selected: #e7f3f3;
    --xs-blue: #1260e8;
    --xs-blue-soft: #e8f0ff;
    --xs-danger: #b42335;
    --xs-radius: 7px;
}
.dark {
    --xs-ink: #e7edf4; --xs-muted: #b0bdcb; --xs-line: #354250;
    --xs-surface: #18222d; --xs-soft: #202c38; --xs-sidebar: #18232e;
    --xs-teal: #79d4d3; --xs-selected: #203d43; --xs-blue: #8bb8ff;
    --xs-blue-soft: #233b5d; --xs-danger: #ff9da7;
}
.fi-body { color: var(--xs-ink); background: var(--xs-surface); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.fi-body .fi-topbar, .fi-body .fi-sidebar-header { background: var(--xs-sidebar); box-shadow: none; border-bottom: 1px solid var(--xs-line); }
.fi-body .fi-sidebar { background: var(--xs-sidebar); border-inline-end: 1px solid var(--xs-line); }
.fi-body .fi-sidebar-nav { padding: 20px 14px; }
.fi-body .fi-sidebar-nav-groups { gap: 30px; }
.fi-body .fi-sidebar-group-items { gap: 5px; }
.fi-body .fi-sidebar-item-btn { min-height: 46px; padding: 11px 13px; border-radius: var(--xs-radius); }
.fi-body .fi-sidebar-item-label { font-size: 14px; font-weight: 500; color: var(--xs-ink); }
.fi-body .fi-sidebar-item-btn > .fi-icon { color: var(--xs-muted); width: 22px; height: 22px; }
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--xs-selected); }
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn :is(.fi-sidebar-item-label,.fi-icon) { color: var(--xs-teal); font-weight: 650; }
.fi-body .fi-sidebar-group-label { color: var(--xs-muted); font-size: 13px; font-weight: 600; }
.fi-body .fi-sidebar-item-btn:hover { background: var(--xs-selected); }
.xs-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--xs-ink); font-size: 20px; font-weight: 700; line-height: 1.4; }
.xs-brand img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
.fi-body .fi-main { max-width: none; padding-inline: 28px; }
.fi-body .fi-header-heading { font-size: 26px; letter-spacing: -.025em; line-height: 1.4; color: var(--xs-ink); }
.fi-body .fi-section, .fi-body .fi-ta-ctn { box-shadow: none; border-radius: 9px; }
.fi-body .fi-btn { border-radius: var(--xs-radius); box-shadow: none; min-height: 36px; font-weight: 600; }
.fi-body .fi-input-wrp { border-radius: var(--xs-radius); box-shadow: none; outline: 1px solid var(--xs-line); }
.fi-body .fi-input-wrp:focus-within { outline: 2px solid var(--xs-blue); }
.fi-body :is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--xs-blue); outline-offset: 3px; }
.fi-body .fi-modal-window { border-radius: 12px; }
.fi-body .fi-ta-header-cell { background: var(--xs-soft); }
.fi-body .fi-simple-main { border: 1px solid var(--xs-line); border-radius: 12px; box-shadow: none; }
.fi-body .fi-simple-layout { background: var(--xs-sidebar); }
/* Workspace: a flat list and detail canvas, not nested cards. */
.fi-body .fi-main:has(.xs-workspace-page) { padding-inline: 0; }
.fi-body .xs-workspace-page { padding-block: 0; }
.fi-body .xs-workspace-page .fi-page-header-main-ctn, .fi-body .xs-workspace-page .fi-page-content { gap: 0; }
.fi-body .wb-content { --wb-blue: var(--xs-blue); --wb-blue-soft: var(--xs-blue-soft); --wb-text: var(--xs-ink); --wb-muted: var(--xs-muted); --wb-border: var(--xs-line); --wb-surface: var(--xs-surface); --wb-subtle: var(--xs-soft); }
.xs-workspace-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
.xs-workspace-title { color: var(--xs-ink); font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.4; }
.xs-workspace-heading .fi-btn { font-size: 12px; padding-inline: 10px; }
.fi-body .wb-list-pane { padding: 28px 20px 24px; }
.fi-body .wb-tabs { gap: 20px; margin-bottom: 18px; }
.fi-body .wb-tab { gap: 4px; font-size: 14px; padding: 10px 0; }
.fi-body .wb-count { background: transparent; border-radius: 0; font-size: inherit; padding-inline: 2px; }
.fi-body .wb-tab[aria-pressed="true"] .wb-count { background: transparent; }
.fi-body .wb-search { margin-top: 0; background: var(--xs-soft); }
.fi-body .wb-search input { padding-block: 12px; }
.fi-body .wb-selects { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.fi-body .wb-filter { gap: 7px; border: 0; padding-bottom: 20px; }
.fi-body .wb-filter button { border: 0; background: var(--xs-soft); border-radius: 8px; padding: 6px 14px; min-height: 32px; font-size: 13px; }
.fi-body .wb-filter button[aria-pressed="true"] { background: var(--xs-blue-soft); color: var(--xs-blue); }
.fi-body .wb-list { display: block; margin-inline: -20px; }
.fi-body .wb-row { position: relative; gap: 14px; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--xs-line); border-radius: 0; min-height: 100px; }
.fi-body .wb-row:hover { background: var(--xs-soft); }
.fi-body .wb-row[aria-pressed="true"] { background: var(--xs-selected); }
.fi-body .wb-row[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--xs-teal); border-radius: 2px; }
.fi-body .wb-icon { width: 32px; height: 32px; background: var(--xs-soft); color: var(--xs-muted); }
.fi-body .wb-row[aria-pressed="true"] .wb-icon { background: var(--xs-selected); color: var(--xs-teal); }
.fi-body .wb-title { font-size: 15px; line-height: 1.5; }
.fi-body .wb-row .wb-body { flex: 1; }
.xs-row-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.xs-row-heading .wb-badge { flex-shrink: 0; }
.fi-body .wb-meta { font-size: 12px; gap: 4px 9px; }
.fi-body .wb-detail { border: 0; border-left: 1px solid var(--xs-line); border-radius: 0; min-height: calc(100vh - 64px); }
.fi-body .wb-detail-head { padding: 32px 32px 16px; border: 0; align-items: center; }
.fi-body .wb-detail-head > .wb-icon { display: none; }
.fi-body .wb-detail-head h2 { font-size: 26px; line-height: 1.45; font-weight: 700; margin-bottom: 8px; }
.xs-detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.xs-jump-to-reply { display: inline-flex; font-size: 12px; margin-top: 6px; }
.fi-body .wb-detail-body { padding: 20px 32px 24px; gap: 26px; }
.fi-body .wb-section h3, .fi-body .wb-section .wb-customer-heading, .fi-body .wb-section .wb-record-heading { color: var(--xs-ink); font-size: 16px; font-weight: 650; }
.fi-body .wb-section > h3 { display: flex; align-items: center; gap: 16px; }
.fi-body .wb-section > h3::after { content: ""; height: 1px; flex: 1; background: var(--xs-line); }
.fi-body .wb-fields { border: 0; border-radius: 0; }
.fi-body .wb-field { padding: 8px 12px; }
.fi-body .wb-field dt { font-size: 13px; }
.fi-body .wb-field dd { font-size: 15px; }
.fi-body .wb-prose { font-size: 15px; line-height: 1.8; }
.fi-body .wb-callout { background: var(--xs-soft); border: 0; border-radius: var(--xs-radius); padding: 14px 18px; }
.fi-body .wb-copy { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 4px 8px; min-height: 32px; }
.fi-body .wb-copy svg { width: 16px; height: 16px; }
.fi-body .wb-reply { padding-top: 20px; border-top: 1px solid var(--xs-line); }
.fi-body .wb-reply textarea { min-height: 90px; font-size: 14px; }
.fi-body .wb-actions { justify-content: flex-end; padding: 0 32px 28px; border: 0; gap: 10px; }
.fi-body .wb-primary { padding: 10px 20px; border-radius: var(--xs-radius); font-size: 14px; min-height: 40px; background: #1260e8; color: #fff; }
.fi-body .wb-actions > .fi-btn { min-height: 40px; }
.fi-body .wb-overdue { color: var(--xs-danger); }
/* Reports use exactly the same shell and columns as tasks. */
/* Existing business pages retain their fields, ordering and semantic colors. */
.fi-body :is(.ka-card,.ka-insight,.po-card:not(.po-alert),.of-source-bar,.of-toolbar,.of-summary,.of-group,.of-empty) { border-color: var(--xs-line); background: var(--xs-surface); border-radius: 9px; box-shadow: none; }
.fi-body :is(.po-table,.ka-table) th { background: var(--xs-soft); color: var(--xs-muted); font-size: 12px; line-height: 1.5; }
.fi-body :is(.po-table,.ka-table) td { border-color: var(--xs-line); color: var(--xs-ink); font-size: 13px; line-height: 1.6; }
.fi-body :is(.po-tab-group-head,.po-section-head) { border-color: var(--xs-line); }
.fi-body :is(.ka-input,.ka-tab,.ka-label,.po-muted,.of-source-bar) { font-size: 13px; }
.fi-body .ka-input { min-height: 38px; background: var(--xs-surface); color: var(--xs-ink); border-color: var(--xs-line); }
.fi-body .ka-tab[aria-selected="true"] { background: var(--xs-selected); color: var(--xs-teal); box-shadow: inset 0 -2px var(--xs-teal); }
.fi-body .ka-name { line-height: 1.6; }
.fi-body .ka-summary { line-height: 1.6; }
.fi-body .ka-summary-toggle { font-size: 12px; min-height: 30px; }
.fi-body :is(.po-section-title,.ka-money) { color: var(--xs-ink); }
.fi-body .of-shell { --of-border: var(--xs-line); color: var(--xs-ink); }
.fi-body .dr { --dr-ink: var(--xs-ink); --dr-muted: var(--xs-muted); --dr-line: var(--xs-line); --dr-blue: var(--xs-blue); --dr-soft: var(--xs-soft); }
.fi-body .dr-history, .fi-body .dr-main { border: 0; border-radius: 0; background: var(--xs-surface); }
.fi-body .dr-main { border-left: 1px solid var(--xs-line); min-height: calc(100vh - 64px); }
.fi-body .dr-history-head { padding: 28px 20px 20px; }
.fi-body .dr-history-head .xs-workspace-title { font-size: 28px; }
.fi-body .dr-report { padding: 18px 20px; }
.fi-body .dr-report[aria-current="true"] { background: var(--xs-selected); box-shadow: inset 3px 0 var(--xs-teal); }
.fi-body .dr-heading { padding: 32px 32px 20px; }
.fi-body .dr h2 { font-size: 26px; }
.fi-body .dr h3 { color: var(--xs-ink); font-size: 16px; }
.fi-body .dr :is(.dr-highlights,.dr-expanded) { padding: 24px 32px; }
.fi-body .dr .dr-filter { font-size: 13px; min-height: 32px; border-radius: 8px; background: var(--xs-soft); }
.fi-body .dr .dr-filter[aria-pressed="true"] { color: var(--xs-blue); background: var(--xs-blue-soft); }
.fi-body .dr input, .fi-body .dr select, .fi-body .dr-button { background: var(--xs-surface); }
.fi-body .dr .dr-button-primary { background: #1260e8; color: white; }
@container personalworkspace (max-width: 850px) {
    .fi-body .wb-detail, .fi-body .dr-main { border-left: 0; border-top: 1px solid var(--xs-line); min-height: 0; }
    .fi-body .wb-detail-head, .fi-body .wb-detail-body, .fi-body .dr-heading { padding: 20px; }
    .fi-body .wb-list { margin-inline: 0; }
    .fi-body .wb-row { padding: 14px; min-height: 88px; }
    .fi-body .wb-tabs { justify-content: flex-start; }
    .fi-body .wb-tab { flex: initial; }
    .fi-body .dr .dr-history-head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .fi-body .fi-main { padding-inline: 16px; }
    .xs-workspace-title, .fi-body .dr-history-head .xs-workspace-title { font-size: 24px; }
    .fi-body .wb-detail-head h2, .fi-body .dr h2 { font-size: 22px; }
    .fi-body .wb-list-pane { padding: 20px 16px; }
    .fi-body .wb-actions { padding: 0 20px 24px; }
    .fi-body .wb-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .fi-body .dr-history-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fi-body *, .fi-body *::before, .fi-body *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }

/* Mobile editing and reading: preserve content and existing business actions. */
.xs-table-hint { display: none; }
@media (max-width: 640px) {
    .fi-body :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { font-size: 16px; }
    .fi-body :is(.fi-btn,.fi-icon-btn,.wb-tab,.wb-filter button,.wb-copy,.dr-filter,.dr-button,.ka-summary-toggle,.po-preview-nav,.st-button,.st-bottom-link,.fi-pagination-item-btn) { min-height: 44px; }
    .fi-body :is(.ka-chevron,.po-image-modal-close) { width: 44px; height: 44px; }
    .fi-body .fi-main { padding-inline: 12px; }
    .fi-body .wb-list-pane, .fi-body .dr-history-head { padding: 16px 12px; }
    .fi-body :is(.wb-detail-head,.wb-detail-body,.dr-heading,.dr .dr-highlights,.dr .dr-expanded) { padding: 16px 12px; }
    .fi-body .wb-fields { grid-template-columns: minmax(0,1fr); }
    .fi-body .xs-table-hint { display: block; padding: 8px 12px; color: var(--xs-muted); font-size: 13px; }
    .ka-shell { container-type: inline-size; }
    .fi-body .ka-workspace { width: 100cqw; max-width: calc(100vw - 26px); position: sticky; left: 0; }
    .fi-body .ka-table :is(th,td):first-child:not([colspan]) { position: sticky; left: 0; z-index: 2; background: var(--xs-surface); }
    .fi-body .ka-table :is(th,td):nth-child(3):not([colspan]) { position: sticky; left: 64px; z-index: 2; background: var(--xs-surface); }
    .fi-body .ka-table .ka-name { max-width: 136px; }
    .fi-body .po-table :is(th,td):first-child { position: sticky; left: 0; z-index: 2; background: var(--xs-surface); }
    .fi-body .po-product-cell { flex-direction: column; align-items: flex-start; }
    .fi-body .po-table :is(th,td):first-child { width: 160px; max-width: 160px; }
    .fi-body .po-product-title { max-width: 140px; }
    .fi-body .po-image-modal { padding: 8px; }
    .fi-body .po-image-modal-card { width: 100%; }
}
.fi-body .po-image-modal-card { max-height: calc(100dvh - 32px); padding-top: 56px; }
.fi-body .po-preview-stage { flex: 1; min-height: 0; overflow: hidden; }
.fi-body .po-image-modal-card .po-preview-stage img { min-height: 0; max-height: max(48px,calc(100dvh - 290px)); }
.fi-body .po-preview-footer { flex: none; gap: 8px; margin-top: 8px; }
.fi-body .po-preview-title { max-height: 3em; overflow: auto; }
@media (max-width: 640px) {
    .fi-body .po-resizable-table { width: var(--po-mobile-width) !important; }
    .fi-body .po-table col:first-child { width: 160px !important; }
    .fi-body .po-product-cell { min-width: 0; }
    .fi-body .po-column-resizer { display: none; }
}
/* This custom table also renders outside Filament's generated utility classes. */
.ka-table .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }