/* Scoped to the invoice editor; the other page dialogs keep their layout. */
#editInvoiceModal .invoice-editor {
    width: min(760px, calc(100% - 24px));
    max-width: 760px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.invoice-editor .modal-header {
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
    gap: 16px;
}

.invoice-editor .modal-header h2 { margin: 0 0 4px; font-size: 1.125rem; }
.invoice-editor .modal-header .close { position: static; padding: 0 4px; }
.invoice-editor p.invoice-editor-customer { margin: 0; font-size: .8125rem; overflow-wrap: anywhere; }
.invoice-editor .modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 18px 22px; margin: 0; }
.invoice-editor .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.invoice-editor .form-group { min-width: 0; }
.invoice-editor input, .invoice-editor select, .invoice-editor textarea { min-width: 0; width: 100%; }
.invoice-editor .invoice-section { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 8px; }
.invoice-editor .invoice-section summary { display: flex; align-items: center; gap: 9px; padding: 12px; cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 600; }
.invoice-editor .invoice-section summary::-webkit-details-marker { display: none; }
.invoice-editor .invoice-section summary::before { content: '›'; font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.invoice-editor .invoice-section[open] > summary::before { transform: rotate(90deg); }
.invoice-editor .invoice-section summary:focus-visible, .invoice-editor button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.invoice-editor .invoice-section-summary { color: var(--muted-foreground); font-weight: 400; margin-left: auto; text-align: right; max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.invoice-editor .invoice-section-fields { padding: 4px 12px 12px; margin-bottom: 0; }
.invoice-editor .invoice-payment { background: var(--muted); border-radius: var(--radius); padding: 14px; margin: 12px 0; }
.invoice-editor .invoice-payment[hidden] { display: none; }
.invoice-editor .invoice-payment h3 { margin-bottom: 12px; }
.invoice-editor .invoice-payment .form-grid { margin-bottom: 0; }
.invoice-editor .invoice-allocation { background: var(--card); margin-top: 12px; }
.invoice-editor .invoice-editor-footer { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--card); }
.invoice-editor .extra-item-row { gap: 8px !important; }
.invoice-editor #existingAttachment { overflow-wrap: anywhere; }

@media (max-width: 520px) {
    .invoice-editor .modal-header, .invoice-editor .modal-body { padding: 14px; }
    .invoice-editor .invoice-editor-footer { padding: 12px 14px; }
    .invoice-editor .form-grid { grid-template-columns: minmax(0, 1fr); }
    .invoice-editor .invoice-section summary { flex-wrap: wrap; }
    .invoice-editor .invoice-section-summary { flex-basis: 100%; max-width: calc(100% - 18px); margin-left: 18px; text-align: left; }
    .invoice-editor .extra-item-row { flex-wrap: wrap; }
    .invoice-editor .extra-item-desc { flex-basis: 100% !important; }
}