/* Shared screen palette. PDF, email and brand examples keep their original paper/artwork colors. */
:root[data-theme=light]{--appearance-bg:#edf3f7;--appearance-surface:#fff;--appearance-text:#193447;--appearance-muted:#526b7c;--appearance-line:#b8cbd7;--bg:#edf3f7;--surface:#fff;--surface-raised:#fff;--surface-muted:#e5eef4;--panel:#f6f9fc;--text:#193447;--muted:#526b7c;--line:#b8cbd7;--border:var(--line);--control-border:#809dac;--accent:#176b55;--mint:#176b55;--focus:#267a63}
:root[data-theme=dark]{--appearance-bg:#101d29;--appearance-surface:#192d3c;--appearance-text:#e3edf5;--appearance-muted:#afc3d3;--appearance-line:#466174;--bg:#101d29;--surface:#192d3c;--surface-raised:#20394b;--surface-muted:#223e51;--panel:#172b3b;--text:#e3edf5;--muted:#afc3d3;--line:#466174;--border:var(--line);--control-border:#708c9e;--accent:#9ae3c7;--mint:#9ae3c7;--focus:#9ae3c7}
html[data-appearance]{color:var(--text);background:var(--bg)}
[data-appearance] :is(.invoice-app,.customer-app){--inv-bg:var(--appearance-bg);--inv-surface:var(--appearance-surface);--inv-ink:var(--appearance-text);--inv-muted:var(--appearance-muted);--inv-line:var(--appearance-line);--portal-line:var(--line);--portal-muted:var(--muted);--portal-accent:var(--accent)}
[data-appearance=customer] body,[data-appearance=auth] body,[data-appearance=desktop] body,[data-appearance=utility] body{color:var(--text);background:var(--bg)}
[data-appearance]:not([data-appearance=workspace]) button,[data-appearance]:not([data-appearance=workspace]) .button{line-height:1.3;display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle}
[data-appearance] :is(.invoice-actions,.mail-actions,.client-shortcuts,.actions){align-items:center;flex-wrap:wrap;gap:8px}
[data-appearance] :is(.invoice-actions,.mail-actions) button{min-height:34px}
[data-appearance] :is(.form-error,[role=alert]){overflow-wrap:anywhere}
[data-theme=dark] .form-error{color:#ffb6ae}
[data-theme=light][data-appearance=auth] :is(button,.button):not(.secondary):not(.text-button){background:#176b55;color:#fff}
[data-appearance=auth] :is(input,select,.code-box){background:var(--surface);color:var(--text)}
[data-appearance=auth] .card{background:var(--surface);border-color:var(--line)}
[data-theme=light][data-appearance=auth] .danger,[data-theme=light][data-appearance=auth] .message.error{color:#a12922}
[data-appearance=desktop] :is(article,details,.session-card,input,select,button,.button){background:var(--surface);color:var(--text);border-color:var(--line)}
[data-appearance=desktop] .primary{background:#176b55;color:white}
[data-appearance=desktop] :is(a,.eyebrow){color:var(--accent)}
[data-appearance=desktop] :is(.muted,.session-meta){color:var(--muted)}
[data-appearance=customer] :is(.portal-sidebar,.portal-panel,.portal-tabs button[aria-pressed=true],.invoice-document .invoice-table td,.payment-panel){background:var(--surface);color:var(--text);border-color:var(--line)}
[data-appearance=customer] :is(.portal-result-count,.portal-composer,.portal-tabs,.portal-search,.portal-table th,.invoice-document .invoice-table th,.message-body){background:var(--surface-muted);color:var(--text);border-color:var(--line)}
[data-appearance=customer] :is(input,select,textarea,button,.button){background:var(--surface);color:var(--text);border-color:var(--control-border)}
[data-appearance=customer] :is(button.primary,.button.primary){background:#176b55;color:white;border-color:#176b55}
[data-appearance=customer] :is(a,.portal-request-title,.portal-help strong,.portal-empty h2,.portal-back),[data-appearance=customer] #customer-nav a{color:var(--accent)}
[data-appearance=customer] :is(.eyebrow,.portal-table th,.portal-priority,.message-content time,.participant small,.request-context dt){color:var(--muted)}
[data-appearance=customer] :is(.portal-table td,.activity-row){border-color:var(--line)}
[data-appearance=customer] :is(#customer-nav a:hover,#customer-nav a[aria-current=page],.portal-table tbody tr:hover,.portal-message.own .message-body){background:color-mix(in srgb,var(--surface),#258769 18%);color:var(--text);border-color:var(--line)}
[data-appearance=customer] .portal-account{color:#e2f2ee}
[data-appearance=customer] .invoice-table-wrap{overflow:auto;max-width:100%}
[data-appearance=customer] .invoice-document .invoice-table{min-width:650px}
[data-appearance=customer] .invoice-document .invoice-table :is(th,td):not(:first-child){white-space:nowrap}
[data-theme=dark] #invoice-mail-dialog{color-scheme:dark}
[data-appearance] #invoice-mail-dialog{color:var(--text);background:var(--surface)}
[data-appearance] :is(#invoice-mail-dialog>header,.mail-preview-head,.mail-template-guide){background:var(--surface-muted);color:var(--text);border-color:var(--line)}
[data-appearance] #invoice-mail-dialog :is(input:not([type=checkbox]),select,button){background:var(--surface);color:var(--text);border-color:var(--control-border)}
[data-appearance] #invoice-mail-dialog .primary{background:#176b55;color:white}
[data-appearance] #invoice-mail-dialog :is(small,a){color:var(--accent)}
[data-appearance=invoice] .invoice-section-row th{background:var(--surface-muted);color:var(--text);border-color:var(--line)}
[data-appearance=invoice] .invoice-notice{color:var(--text);background:var(--surface-muted)}
[data-appearance=invoice] .invoice-information-table :is(td,th){border-color:var(--line)}
[data-appearance] .client-invoice-activity{max-width:100%;overflow:auto}
[data-appearance] .client-invoice-activity table{min-width:600px}
[data-appearance=invoice] .invoice-document-lines th:nth-child(2){width:14%}.invoice-document-lines th:first-child{width:38%}
[data-appearance] :is(.invoice-line-inspector,.inspector){min-width:0}
@media(max-width:600px){[data-appearance=customer] .portal-main{padding:16px 12px}[data-appearance] .invoice-information-tabs{gap:4px}[data-appearance] .invoice-information-tabs button{padding:6px 8px}}

[data-appearance=utility]{--tab-bg:var(--bg);--tab-text:var(--text);--tab-line:var(--line);--tab-active:var(--surface);--tab-accent:var(--accent)}
[data-appearance=brand] body{background:var(--bg);color:var(--text)}[data-appearance=brand] :is(a,header span,.eyebrow){color:var(--accent)}[data-appearance=brand] :is(.intro,.details p,.palette code){color:var(--muted)}

[data-appearance=customer] :is(.request-list-heading p,.request-updated small,.request-table .request-person,.request-table .request-updated,.portal-sort,.request-total,.invoice-document .invoice-table small,.portal-billing-note){color:var(--muted)}
[data-appearance=customer] :is(.portal-status[style],.portal-category,.message-body){color:var(--text)}
[data-appearance=customer] .request-list-panel .portal-tabs button{color:var(--muted);background:transparent}
[data-appearance=customer] .request-list-panel .portal-tabs button[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}
[data-appearance=customer] .request-table tr:hover .portal-request-title{color:var(--accent)}
[data-appearance=customer] :is(.panel-heading,.portal-composer){color:var(--text);background:var(--surface-muted);border-color:var(--line)}
[data-appearance=customer] .portal-composer textarea{background:var(--surface);color:var(--text)}
[data-appearance=customer] .customer-preview-banner a{color:#254f69}
[data-appearance=customer] .message-content header>span{color:var(--accent)}
[data-appearance=customer] .portal-message{border-color:var(--line)}
[data-appearance=customer] .invoice-totals .amount-due{color:var(--accent)}
[data-appearance=customer] .request-list-panel .portal-table-wrap{overflow:auto}

[data-appearance] .resolve-appearance-toggle{flex:0 0 auto;min-height:32px;padding:5px 9px;font-size:12px;border:1px solid var(--control-border);border-radius:5px;background:var(--surface);color:var(--text);cursor:pointer;margin-left:auto}
[data-appearance=customer] .portal-header .resolve-appearance-toggle{background:#223e51;color:#e3edf5;border-color:#708c9e;margin-left:0}
[data-appearance=auth] .auth-intro>.resolve-appearance-toggle{align-self:flex-start;margin-left:0}

[data-appearance=customer] .portal-status{color:var(--text)}
[data-appearance=customer] .portal-header .resolve-appearance-toggle{display:inline-flex!important;margin-left:auto}

/* Keep invoice amounts visible on phones while retaining quantity and rate. */
@media(max-width:600px){
 [data-appearance=customer] .invoice-document .invoice-table{display:block;min-width:0;table-layout:auto}
 [data-appearance=customer] .invoice-document .invoice-table :is(thead,tbody){display:block}
 [data-appearance=customer] .invoice-document .invoice-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:10px 6px;border-bottom:1px solid var(--line)}
 [data-appearance=customer] .invoice-document .invoice-table :is(td,th){padding:0;border:0;background:transparent;white-space:normal}
 [data-appearance=customer] .invoice-document .invoice-table thead tr{background:var(--surface-muted)}
 [data-appearance=customer] .invoice-document .invoice-table th:nth-child(2),[data-appearance=customer] .invoice-document .invoice-table th:nth-child(3){display:none}
 [data-appearance=customer] .invoice-document .invoice-table td:first-child{grid-column:1;grid-row:1;overflow-wrap:anywhere}
 [data-appearance=customer] .invoice-document .invoice-table td:nth-child(2),[data-appearance=customer] .invoice-document .invoice-table td:nth-child(3){display:block;grid-column:1;color:var(--muted);font-size:11px}
 [data-appearance=customer] .invoice-document .invoice-table td:nth-child(2):before{content:'Qty · '}
 [data-appearance=customer] .invoice-document .invoice-table td:nth-child(3):before{content:'Rate · '}
 [data-appearance=customer] .invoice-document .invoice-table td:last-child{grid-column:2;grid-row:1 / span 3;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:650;text-align:right}
}

/* Payment entry is separate from confirmed financial activity. */
#customer-payment-dialog{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--appearance-line);border-radius:10px;background:var(--appearance-surface);color:var(--appearance-text);box-shadow:0 18px 65px #0005;overflow:auto}
#customer-payment-dialog::backdrop{background:#10253299}
#customer-payment-dialog .payment-panel{margin:0;padding:20px;border:0;background:transparent;color:inherit}
#customer-payment-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#customer-payment-dialog header small{color:var(--appearance-muted)}
#customer-payment-dialog h2{margin:4px 0;font-size:24px}
#customer-payment-dialog header button{display:grid;place-items:center;width:36px;height:36px;flex:none}
#customer-payment-dialog .payment-security{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--appearance-muted);margin-bottom:18px}
#customer-payment-dialog footer{display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:-20px;padding:16px 0;background:var(--appearance-surface);margin-top:12px}
.payment-assurance{display:block;font-size:12px;line-height:1.5;color:var(--appearance-muted)}
.payment-result{padding:18px;margin-top:18px;border:1px solid var(--appearance-line);border-radius:8px;background:var(--appearance-surface);color:var(--appearance-text)}
.payment-result h2{font-size:18px;display:flex;align-items:center;gap:8px;margin:0 0 8px}.payment-result p{line-height:1.5;margin:8px 0}.payment-success{border-left:4px solid #27896b}
.payment-record-scroll{max-width:100%;overflow:auto}.payment-record-table{width:100%;border-collapse:collapse;font-size:13px}.payment-record-table th,.payment-record-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--appearance-line);vertical-align:top}.payment-record-table th{background:var(--surface-muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em}.payment-record-table small{display:block;color:var(--appearance-muted);margin-top:4px}.payment-record-table .payment-money{text-align:right;white-space:nowrap}.payment-row-actions{display:flex;align-items:center;gap:6px;white-space:nowrap;justify-content:flex-end}.payment-row-actions button{min-height:30px;padding:4px 8px;font-size:12px}.payment-checkout-note{font-size:12px}
@media(max-width:600px){#customer-payment-dialog .payment-panel{padding:16px}#customer-payment-dialog footer{bottom:-16px}.payment-record-table{min-width:480px}.payment-record-table th,.payment-record-table td{padding:8px}.payment-row-actions{flex-wrap:wrap;white-space:normal}}