/* Keep the approved classic light palette; other themes use the app tokens. */
:root:not(.dark):not([data-design-variant="navy-gold"]):not(:has(#guild-native-design)) {
  --invoice-hairline: #e5e5e5;
  --invoice-control-line: #d4d8dc;
  --invoice-logo-line: #bfc1c5;
  --invoice-add-surface: #f4f1ec;
  --invoice-status-surface: #f4f4f5;
  --invoice-notice-line: #b8d5fb;
  --invoice-notice-surface: #edf5ff;
  --invoice-notice-ink: #215ab0;
  --invoice-link: var(--color-brand-blue);
}
.invoice-editor [hidden] { display: none !important; }
.invoice-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--color-surface, #f5f5f7); color: var(--color-ink, #0f0f10); border-radius: 999px; padding: 5px; max-width: 490px; }
.invoice-tabs button { padding: 10px 12px; border-radius: 999px; font-size: 14px; }
.invoice-tabs [aria-selected="true"] { background: var(--color-canvas, #fff); color: var(--invoice-tab-ink, var(--color-ink, #0f0f10)); box-shadow: 0 1px 4px #0000000a; }
html:is([data-design-variant="navy-gold"], :has(#guild-native-design)) .invoice-tabs { --invoice-tab-ink: var(--color-brand-blue-deep); }
.invoice-card { padding: 40px 44px; }
.invoice-paper { color-scheme: light; }
.invoice-card { border-color: var(--invoice-hairline, var(--color-hairline)); }
.invoice-card .invoice-accent, .invoice-dialog .invoice-accent { color: var(--invoice-link, var(--color-brand-blue-deep)); }
.invoice-card .invoice-secondary { border-color: var(--invoice-control-line, var(--color-hairline)); }
.invoice-card input::placeholder, .invoice-card textarea::placeholder, .invoice-dialog input::placeholder, .invoice-dialog textarea::placeholder { color: var(--color-steel); opacity: 1; }
html.dark .invoice-tabs [aria-selected="true"] { background: var(--color-surface, #1c1c20); }
html.dark .invoice-tabs { background: var(--color-canvas, #0a0a0c); border: 1px solid var(--color-hairline); }
html[data-native-shell] .invoice-back { display: none; }
.invoice-new-button { background: var(--color-guild-gold, var(--color-brand-blue, #2563eb)); color: var(--color-guild-on-gold, #fff); }
.invoice-fields { display: grid; gap: 13px; font-size: 13px; }
.invoice-fields > div { display: grid; grid-template-columns: minmax(90px, 0.9fr) minmax(0, 1.2fr); gap: 12px; align-items: center; }
.invoice-fields input { width: 100%; min-width: 0; background: transparent; }
.invoice-logo-box { border: 1px dashed var(--invoice-logo-line, var(--color-steel)); border-radius: 16px; min-height: 126px; display: flex; align-items: center; justify-content: center; }
.invoice-underlined { display: block; background: transparent; border-bottom: 1px solid var(--invoice-hairline, var(--color-hairline)); padding: 9px 0; width: 100%; min-width: 0; border-radius: 0; font-size: 14px; }
.invoice-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 16px; padding: 15px; background: var(--invoice-add-surface, var(--color-surface)); color: var(--invoice-link, var(--color-brand-blue-deep)); font-size: 14px; }
.invoice-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--invoice-hairline, var(--color-hairline)); font-size: 14px; }
.invoice-item-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.invoice-icon { color: color-mix(in srgb, var(--color-ink) 60%, transparent); padding: 6px; border-radius: 50%; }
.invoice-totals { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; max-width: 320px; margin-left: auto; font-size: 14px; }
.invoice-totals dd { text-align: right; overflow-wrap: anywhere; }
.invoice-totals dt { color: color-mix(in srgb, var(--color-ink) 60%, transparent); }
.invoice-actions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; border-top: 1px solid var(--color-hairline, #dedede); background: var(--color-canvas, #fff); padding-top: 12px; padding-left: 24px; padding-right: 24px; }
.invoice-actions > div { display: flex; gap: 10px; max-width: 960px; margin: auto; }
.invoice-primary, .invoice-secondary { border-radius: 999px; padding: 11px 18px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
.invoice-primary { background: var(--color-guild-gold, var(--color-brand-blue, #2563eb)); color: var(--color-guild-on-gold, #fff); }
.invoice-secondary { border: 1px solid var(--color-hairline, #d4d8dc); color: var(--color-ink, #20262d); background: var(--color-canvas, #fff); }
.invoice-dialog { border: 0; color: var(--color-ink); background: var(--color-canvas); padding: 0; max-height: 90dvh; }
.invoice-drawer[open] { animation: invoice-drawer-enter 180ms ease-out; }
.invoice-payment[open] { animation: invoice-sheet-enter 180ms ease-out; }
@keyframes invoice-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes invoice-sheet-enter { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .invoice-dialog[open] { animation: none; } }
.invoice-dialog::backdrop { background: #17212e70; }
.invoice-drawer { margin: 0 0 0 auto; width: 50vw; max-width: 760px; height: 100dvh; max-height: 100dvh; }
.invoice-dialog-content { padding: 36px; display: flex; flex-direction: column; min-height: 100%; gap: 0; }
.invoice-drawer .invoice-dialog-content { min-height: 100dvh; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.invoice-payment { margin: auto; width: min(760px, 90vw); border-radius: 24px; }
.invoice-dialog-content > button[data-reveal] { text-align: left; }
.invoice-add-label { display: inline-flex; align-items: center; gap: 6px; }
.invoice-label { display: block; min-width: 0; font-size: 13px; }
.invoice-input { display: block; width: 100%; min-width: 0; border: 1px solid var(--invoice-control-line, var(--color-hairline)); border-radius: 12px; padding: 12px; margin-top: 7px; font-size: 14px; background: transparent; }
.invoice-input:focus, .invoice-underlined:focus { outline: 2px solid var(--color-guild-gold, var(--color-brand-blue, #2563eb)); outline-offset: 2px; }
.invoice-payment-choice { text-align: left; border-radius: 20px; background: var(--invoice-add-surface, var(--color-surface)); padding: 24px; }
.invoice-payment-summary { border-radius: 16px; padding: 16px; background: var(--invoice-add-surface, var(--color-surface)); font-size: 13px; }
.invoice-document-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 20px; font-size: 12px; }
.invoice-document-meta dt { color: color-mix(in srgb, var(--color-ink) 60%, transparent); }
.invoice-document-meta dd { overflow-wrap: anywhere; }
.invoice-document-logo { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.invoice-paper { display: flex; flex-direction: column; padding: 54px; border: 1px solid #e5e5e5; box-shadow: 0 4px 24px #00000008; border-radius: 4px; font-size: 11px; overflow-wrap: anywhere; }
.invoice-paper .invoice-document-meta dt, .invoice-paper .invoice-totals dt { color: color-mix(in srgb, var(--color-fixed-ink) 60%, transparent); }
.invoice-status { border-color: var(--invoice-control-line, var(--color-hairline)); background: var(--invoice-status-surface, var(--color-surface)); color: color-mix(in srgb, var(--color-ink) 70%, transparent); }
.invoice-card select option, .invoice-dialog select option { color: var(--color-ink); background: var(--color-canvas); }
.invoice-paper-table { table-layout: fixed; }
.invoice-paper-table th, .invoice-paper-table td { padding: 10px 4px; text-align: right; vertical-align: top; }
.invoice-paper-table th:first-child, .invoice-paper-table td:first-child { text-align: left; width: 36%; }
.invoice-preview-notice { padding: 15px 20px; border: 1px solid var(--invoice-notice-line, var(--color-brand-blue-200)); background: var(--invoice-notice-surface, var(--color-surface)); color: var(--invoice-notice-ink, var(--color-brand-blue-deep)); border-radius: 14px; font-size: 13px; }
@media (min-width: 1024px) { html:not([data-native-shell]) .invoice-actions { left: 212px; } }
@media (max-width: 639px) {
  .invoice-card { padding: 24px 18px; }
  .invoice-tabs { max-width: none; }
  .invoice-tabs button { font-size: 11px; padding: 10px 3px; }
  .invoice-logo-box { height: 96px; min-height: 96px; }
  .invoice-actions { padding-left: 10px; padding-right: 10px; }
  .invoice-actions > div { gap: 6px; }
  .invoice-actions button { flex: 1; padding: 11px 4px; font-size: 11px; }
  .invoice-drawer, .invoice-payment { margin: auto 0 0; width: 100%; max-width: 100%; height: auto; max-height: 90dvh; border-radius: 24px 24px 0 0; }
  .invoice-drawer[open] { animation-name: invoice-sheet-enter; }
  .invoice-dialog-content { padding: 24px 18px max(24px, env(safe-area-inset-bottom)); }
  .invoice-drawer .invoice-dialog-content { min-height: 70dvh; }
  .invoice-item { gap: 8px; font-size: 12px; }
  .invoice-item-actions { gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 105px; }
  .invoice-document-logo { width: 40px; height: 40px; }
  .invoice-document-meta { font-size: 10px; gap: 7px 10px; }
  .invoice-paper { padding: 20px 14px; font-size: 7px; }
  .invoice-paper .invoice-document-meta, .invoice-paper .invoice-totals { font-size: 7px; }
  .invoice-paper-table th, .invoice-paper-table td { padding: 6px 2px; }
  .invoice-paper footer { font-size: 7px; }
}
@media print {
  .invoice-editor > header, .invoice-actions, .invoice-dialog { display: none !important; }
  .invoice-editor { padding-bottom: 0; max-width: none; }
  .invoice-paper { box-shadow: none; min-height: 270mm; break-inside: avoid; }
}