/* Light payment presentation only; existing editor and scrollbar skin are untouched. */
@scope (html:not([data-theme="dark"])) {
body:has(#work_support-content:not(.hidden) #ws-panel-expenses:not(.hidden)), body:has(#pr-detail-modal.paymentdensity-overlay) { zoom: 1 !important; }
#ws-panel-expenses, #pr-detail-modal.paymentdensity-overlay, #paymentdensity-menu { --pd-text:#242426; --pd-muted:#58585e; --pd-line:#dedee3; --pd-accent:#0066cc; color:var(--pd-text); font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif; }
#ws-panel-expenses { padding:12px 16px !important; background:#fff; min-width:0; }
#ws-panel-expenses > .flex:first-child { min-height:28px; margin-bottom:10px !important; gap:8px; }
#ws-panel-expenses h3 { font-size:14px !important; font-weight:600 !important; }
#ws-panel-expenses > .flex:first-child button:not(#pr-guide-settings-btn) { height: 28px; min-height:28px; padding:0 10px !important; font-size:12px !important; font-weight:500 !important; border-radius:6px !important; }
#ws-panel-expenses > .flex:first-child { flex-wrap:wrap; padding:8px !important; }
#ws-panel-expenses > .flex:first-child h3 { flex-shrink:0; white-space:nowrap; margin:0; }
#ws-panel-expenses > .flex:first-child > .flex { gap:6px; }
#ws-panel-expenses > .flex:first-child button, #ws-panel-expenses #pr-guide-settings-btn span { white-space:nowrap; font-size:12px !important; }
#ws-panel-expenses #pr-guide-settings-btn span { display:inline-flex; align-items:center; padding:0 8px !important; min-height:28px; }
#ws-panel-expenses .paymentdensity-filters { display:flex; align-items:center; gap:6px; margin-bottom:8px !important; }
#ws-panel-expenses .paymentdensity-filters > div { min-width:140px !important; max-width:300px !important; }
#ws-panel-expenses .paymentdensity-filters input, #ws-panel-expenses .paymentdensity-filters select { height:28px; min-height:28px; border:1px solid #cccdd3; border-radius:6px; background:#fff; color:var(--pd-text); padding-top:0; padding-bottom:0; font-size:12px; }
#ws-panel-expenses .paymentdensity-filters input[type=month] { width:140px; }
#ws-panel-expenses #pr-filter-count { font-size:11px; color:var(--pd-muted); white-space:nowrap; }
#ws-panel-expenses #pr-table-container, #ws-panel-expenses #ws-expenses-list { min-width:0; max-width:100%; }
#ws-panel-expenses .paymentdensity-scroll { max-width:100%; overflow-x:auto; scrollbar-gutter:stable; border:1px solid var(--pd-line); border-radius:7px; background:#fff; }
#paymentdensity-table { width:100%; min-width:850px; border-collapse:separate; border-spacing:0; table-layout:fixed; color:var(--pd-text); font-size:12px; }
#paymentdensity-table .paymentdensity-col-vendor { width:160px; }
#paymentdensity-table .paymentdensity-col-amount { width:116px; }
#paymentdensity-table .paymentdensity-col-status { width:78px; }
#paymentdensity-table .paymentdensity-col-date { width:88px; }
#paymentdensity-table .paymentdensity-col-requester { width:100px; }
#paymentdensity-table .paymentdensity-col-actions { width:112px; }
#ws-panel-expenses #paymentdensity-table :is(th,td) { box-sizing:border-box; padding:0 8px; height: 28px; max-height:28px; border:0; box-shadow:inset 0 -1px var(--pd-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; text-align:left; background:#fff; font-size:12px; line-height:1.2; }
#ws-panel-expenses #paymentdensity-table th { background:#f5f5f7; color:#505057; font-size:11px; font-weight:500; }
#ws-panel-expenses #paymentdensity-table .paymentdensity-amount { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
#paymentdensity-table tr[data-payment-row] { cursor:pointer; }
#paymentdensity-table .paymentdensity-status { font-size:11px; }
#ws-panel-expenses .paymentdensity-status, #pr-detail-modal .paymentdensity-status { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-weight:500; }
#ws-panel-expenses .paymentdensity-status::before, #pr-detail-modal .paymentdensity-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
#ws-panel-expenses .paymentdensity-status-pending, #pr-detail-modal .paymentdensity-status-pending { color:#805400; }
#ws-panel-expenses .paymentdensity-status-approved, #pr-detail-modal .paymentdensity-status-approved { color:#075bb4; }
#ws-panel-expenses .paymentdensity-status-completed, #pr-detail-modal .paymentdensity-status-completed { color:#216438; }
#ws-panel-expenses .paymentdensity-status-rejected, #pr-detail-modal .paymentdensity-status-rejected { color:#b4232c; }
#ws-panel-expenses .paymentdensity-slots { display:grid; grid-template-columns:62px 28px; gap:4px; align-items:center; }
#ws-panel-expenses .paymentdensity-slots button, #pr-detail-modal footer button { box-sizing:border-box; height:24px; min-height:24px; border:1px solid #d1d1d7; border-radius:5px; background:#fff; color:var(--pd-accent); padding:0 6px; font-size:11px; cursor:pointer; white-space:nowrap; }
#ws-panel-expenses .paymentdensity-slots [data-payment-menu] { width:28px; font-size:20px; border-color:transparent; color:#4f4f55; padding:0; }
#ws-panel-expenses #paymentdensity-total { min-height:34px; padding:8px 2px; color:var(--pd-muted); font-size:11px; }
#ws-panel-expenses #paymentdensity-total strong { color:#212126; margin-left:6px; font-size:12px; font-weight:600; }
#ws-panel-expenses .paymentdensity-empty { padding:48px 12px; text-align:center; color:var(--pd-muted); font-size:13px; }
#ws-panel-expenses .paymentdensity-date-phone { display:none; }
#paymentdensity-menu { position:fixed; z-index:11000; min-width:148px; padding:4px; border:1px solid #cfcfd6; border-radius:8px; background:#fafafa; box-shadow:0 6px 24px #00000026; }
#paymentdensity-menu button { display:block; width:100%; height:28px; border:0; border-radius:4px; padding:0 10px; background:transparent; text-align:left; color:var(--pd-text); font-size:12px; cursor:pointer; }
#paymentdensity-menu [data-payment-action=delete], #paymentdensity-menu [data-payment-action=reject], #pr-detail-modal [data-payment-action=delete], #pr-detail-modal [data-payment-action=reject] { color:#b4232c; }
#pr-detail-modal.paymentdensity-overlay { position:fixed; z-index:10000; inset:0; background:#1c1c2238; display:flex; justify-content:flex-end; overflow:hidden; font-size:12px; line-height:1.4; }
#pr-detail-modal .paymentdensity-detail { display:flex; flex-direction:column; width: 320px; height:100%; max-width:100%; background:#fafafa; box-shadow:-8px 0 28px #00000016; border-left:1px solid #cfcfd6; min-height:0; }
#pr-detail-modal .paymentdensity-detail > header { flex:0 0 auto; padding:14px 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--pd-line); }
#pr-detail-modal header span { color:var(--pd-muted); font-size:11px; }
#pr-detail-modal header h2 { margin:3px 0 0; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
#pr-detail-modal [data-payment-close] { width:28px; height:28px; flex:0 0 auto; border:0; border-radius:6px; background:#ededf0; color:#505056; font-size:21px; cursor:pointer; }
#pr-detail-modal .paymentdensity-detail-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-gutter:stable; overscroll-behavior:contain; padding:12px 14px 20px; }
#pr-detail-modal .paymentdensity-meta { display:flex; justify-content:space-between; margin-bottom:16px; font-size:11px; }
#pr-detail-modal .paymentdensity-section { margin-bottom:16px; }
#pr-detail-modal .paymentdensity-section h3 { margin:0 0 6px; font-size:11px; font-weight:600; color:var(--pd-muted); }
#pr-detail-modal .paymentdensity-section dl { padding:4px 10px; margin:0; background:#fff; border:1px solid var(--pd-line); border-radius:7px; }
#pr-detail-modal .paymentdensity-field { display:grid; grid-template-columns:95px minmax(0,1fr); gap:8px; padding:6px 0; }
#pr-detail-modal .paymentdensity-field + .paymentdensity-field { border-top:1px solid #ededf0; }
#pr-detail-modal dt { color:var(--pd-muted); font-size:11px; }
#pr-detail-modal dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
#pr-detail-modal .paymentdensity-calc > div { padding:4px 10px; background:#fff; border:1px solid var(--pd-line); border-radius:7px; }
#pr-detail-modal .paymentdensity-calc > div > div { display:flex; justify-content:space-between; gap:8px; padding:7px 0; font-size:12px; }
/* Keep original calculated money's blue/green/red meaning colors. */
#pr-detail-modal .paymentdensity-calc .text-red-500 { color:#b4232c !important; }
#pr-detail-modal .paymentdensity-calc .text-blue-700 { color:#0066cc !important; }
#pr-detail-modal .paymentdensity-calc .text-green-700 { color:#216438 !important; }
#pr-detail-modal .paymentdensity-description, #pr-detail-modal .paymentdensity-rejection { margin:0; padding:10px; white-space:pre-wrap; overflow-wrap:anywhere; background:#fff; border:1px solid var(--pd-line); border-radius:7px; line-height:1.6; }
#pr-detail-modal .paymentdensity-rejection { background:#fff4f4; border-color:#e9bcc1; color:#b4232c; }
#pr-detail-modal .paymentdensity-attachment { background:transparent; border:0; text-align:left; padding:4px 0; color:var(--pd-accent); overflow-wrap:anywhere; cursor:pointer; }
#pr-detail-modal .paymentdensity-detail > footer { border-top:1px solid var(--pd-line); padding:10px 14px; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; color:var(--pd-muted); }
#pr-detail-modal footer > div { display:flex; flex-wrap:wrap; gap:6px; }
#pr-detail-modal footer button { height:28px; }
#pr-detail-modal footer [data-payment-close] { width:auto; padding:0 10px; font-size:13px; }
#pr-detail-modal [class~="text-[10px]"] { font-size:11px; }
#ws-panel-expenses :is(button,tr,.paymentdensity-scroll):focus-visible, #paymentdensity-menu button:focus-visible, #pr-detail-modal :focus-visible { outline:2px solid #0066cc !important; outline-offset:-2px; }
#paymentdensity-menu[hidden], #pr-detail-modal[hidden], #ws-panel-expenses [hidden] { display:none !important; }
@media (hover:hover) {
#ws-panel-expenses #paymentdensity-table tr[data-payment-row]:hover td { background:#f3f6fa; }
#paymentdensity-menu button:hover { background:#e6eef9; }
}
@media (max-width:767px) {
#ws-panel-expenses { padding:10px 8px !important; }
#ws-panel-expenses .paymentdensity-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; }
#ws-panel-expenses .paymentdensity-filters > div { grid-column:1 / -1; max-width:none !important; min-width:0 !important; }
#ws-panel-expenses .paymentdensity-filters input, #ws-panel-expenses .paymentdensity-filters select { height:36px; min-height:36px; width:100%; min-width:0; font-size:16px; }
#ws-panel-expenses #pr-filter-month { width:100%; grid-column:1 / 3; }
#ws-panel-expenses .paymentdensity-filters > button { grid-column:3; grid-row:3; }
#ws-panel-expenses #pr-filter-count { grid-column:1 / -1; margin:0; }
#ws-panel-expenses > .flex:first-child button:not(#pr-guide-settings-btn) { height: 44px; min-height:44px; }
#ws-panel-expenses #pr-guide-settings-btn span { height:44px; min-height:44px; }
#paymentdensity-table { min-width:760px; }
#paymentdensity-table .paymentdensity-col-vendor { width:100px; }
#paymentdensity-table .paymentdensity-col-amount { width:96px; }
#paymentdensity-table .paymentdensity-col-status { width:68px; }
#paymentdensity-table .paymentdensity-col-date { width:72px; }
#paymentdensity-table .paymentdensity-col-requester { width:96px; }
#paymentdensity-table .paymentdensity-col-actions { width:122px; }
#ws-panel-expenses #paymentdensity-table :is(th,td) { height: 44px; max-height:44px; padding:0 5px; }
#ws-panel-expenses #paymentdensity-table .paymentdensity-name { position:sticky; left:0; z-index:2; background:#fff; box-shadow:1px 0 #dedee3,inset 0 -1px #dedee3; }
#ws-panel-expenses .paymentdensity-slots { grid-template-columns:62px 44px; }
#ws-panel-expenses .paymentdensity-slots button { height:44px; min-height:44px; border:0; background:transparent; }
#ws-panel-expenses .paymentdensity-slots [data-payment-menu] { width:44px; }
#ws-panel-expenses .paymentdensity-date-pc { display:none; }
#ws-panel-expenses .paymentdensity-date-phone { display:inline; }
#paymentdensity-menu button { height:44px; font-size:14px; }
#pr-detail-modal.paymentdensity-overlay { align-items:flex-end; }
#pr-detail-modal .paymentdensity-detail { width:100%; height:min(82dvh,760px); max-height:calc(100dvh - 20px); border-radius:14px 14px 0 0; border-left:0; border-top:1px solid #cfcfd6; }
#pr-detail-modal [data-payment-close] { width:44px; height:44px; }
#pr-detail-modal footer { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
#pr-detail-modal footer button, #pr-detail-modal .paymentdensity-attachment { min-height:44px; }
#pr-detail-modal footer button { min-width:44px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
#ws-panel-expenses *, #pr-detail-modal *, #paymentdensity-menu * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
}