.invoice-item { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.invoice-item input { width: 100%; min-width: 0; }
.invoice-item label, #invoice-form label { display: flex; flex-direction: column; gap: 6px; }
#invoice-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 700px) { .invoice-item { grid-template-columns: 1fr 1fr; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .invoice-item label:first-child { grid-column: 1 / -1; } .header-actions { flex-wrap: wrap; } }

.invoice-dates { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.invoice-dates input { width: 100%; min-width: 0; }
@media (max-width: 700px) { .invoice-dates { grid-template-columns: 1fr; } }

.invoice-details { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.invoice-details label { min-width: 0; }
.invoice-details input, .invoice-details select { width: 100%; min-width: 0; }
@media (max-width: 900px) { .invoice-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .invoice-details { grid-template-columns: 1fr; } }

/* Invoice palette; the shared report layout uses these accent variables. */
:root {
    --ink: #193653;
    --muted: #5c7189;
    --line: #d8e5f2;
    --line-strong: #b5cce4;
    --wash: #f3f8fe;
    --green: #2563eb;
    --green-dark: #1d4ed8;
    --green-soft: #eaf2ff;
    --shadow: 0 12px 32px rgba(30, 64, 110, .08);
}

body { background: radial-gradient(circle at 88% -8%, #d7eaff 0, transparent 28rem), #f3f7fc; }
.brand img { filter: drop-shadow(0 3px 5px rgba(37, 99, 235, .18)); }
.header-actions a, .app-link { color: var(--green-dark); }
.language-label, label { color: #304f70; }
.intro {
    background: linear-gradient(118deg, #173b69 0%, #1d5db2 59%, #2789dc 145%);
    box-shadow: 0 16px 40px rgba(25, 67, 123, .18);
}
.intro .eyebrow { color: #bfdbfe; }
input:focus, select:focus, textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}
.secondary-button { background: #edf4ff; border-color: #c5dafa; }
.secondary-button:hover { background: #dceaff; }
.primary-button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 16px rgba(37, 99, 235, .2);
}
.primary-button:hover { box-shadow: 0 11px 20px rgba(37, 99, 235, .28); }
.seo-content { background: linear-gradient(135deg, #eaf3ff, #f8fbff); border-color: var(--line); }
.seo-content > div { border-color: #d2e2f5; }
.seo-content h2 { color: var(--ink); }
.trust-strip, .trust-strip a, .seo-content p, .seo-content li { color: var(--muted); }

.invoice-party-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.invoice-party-group legend { margin-bottom: 16px; padding: 0; font-size: 14px; font-weight: 650; color: var(--muted); }
.invoice-contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invoice-party-group label, .invoice-party-group input { min-width: 0; }
.invoice-party-group input { width: 100%; }
.invoice-billing-details { margin-top: 24px; padding: 20px; background: var(--wash); border: 1px solid var(--line); border-radius: 12px; max-width: 980px; }
.invoice-billing-details legend { margin: 0; padding: 0 8px; }
.invoice-bank-details { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .invoice-contact-details, .invoice-bank-details { grid-template-columns: 1fr; } }


.product-panel picture { background: linear-gradient(180deg, #a8ccf6 0%, #dcecff 42%, rgba(255, 255, 255, 0) 100%); }
.working-people-panel { background: linear-gradient(128deg, #142d4e, #1b4d80 62%, #1c6aab); }
.working-people-device { background: radial-gradient(circle at 50% 30%, rgba(96, 165, 250, .38), transparent 65%); }
.working-people-copy .eyebrow { color: #bfdbfe; }
.working-people-copy li { color: #eaf3ff; }
.working-people-copy li::before { color: #93c5fd; }