/* ═══════════════════════════════════════════════════════════════
   Banana Invoice — invoice editor: settings, templates, RTL, preview/print.
   Loaded after site.css only on pages that render views/site/_invoice-editor.php.

   Document mode (.bni-doc-mode on an ancestor) is shared by Preview, browser print
   and the saved-invoice view, so what users preview is exactly what they print.
   ═══════════════════════════════════════════════════════════════ */

/* ── Settings panel ─────────────────────────────────────────── */
.bni-settings-head { display: flex; align-items: stretch; background: var(--pk-lighter); }
.bni-settings-head .inv-settings-toggle { flex: 1 1 auto; min-width: 0; }
.bni-settings-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 0;
    border-inline-start: 1px solid var(--pk-border-light);
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--pk-subtext);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.bni-settings-reset:hover, .bni-settings-reset:focus-visible { color: var(--pk-green); background: var(--pk-light); }
@media (max-width: 420px) { .bni-settings-reset span { display: none; } }
.bni-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 14px;
}
.bni-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.bni-field-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pk-muted);
}
.bni-field .pk-select { width: 100%; max-width: 100%; }
.bni-field-color { grid-column: 1 / -1; }
.bni-accent-grid { display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 0; }
.bni-accent {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--pk-border);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.bni-accent:hover { transform: scale(1.1); }
.bni-accent[aria-checked="true"] { box-shadow: 0 0 0 2px var(--swatch); transform: scale(1.1); }
@media (max-width: 576px) { .bni-field-color { grid-column: 1 / -1; } }
.bni-tpl-heading { margin: 14px 0 6px; }
.bni-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
.bni-tpl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    background: var(--pk-white);
    border: 1px solid var(--pk-border-light);
    border-radius: 6px;
    font: inherit;
    font-size: .74rem;
    color: var(--pk-subtext);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.bni-tpl:hover { border-color: var(--pk-green); }
.bni-tpl[aria-checked="true"] { border-color: var(--pk-green); box-shadow: 0 0 0 2px var(--pk-green); color: var(--pk-text); font-weight: 600; }
.bni-tpl-name { text-align: center; line-height: 1.2; overflow-wrap: anywhere; }

/* Mini template thumbnails (also used by the homepage gallery) */
.bni-tpl-thumb {
    position: relative;
    display: block;
    width: 52px;
    height: 68px;
    background: #fff;
    border: 1px solid #dfe5da;
    border-radius: 3px;
    overflow: hidden;
    --t-accent: #3d6b2e;
}
.bni-tpl-thumb i, .bni-tpl-thumb b, .bni-tpl-thumb s, .bni-tpl-thumb u { position: absolute; display: block; text-decoration: none; }
.bni-tpl-thumb i { top: 7px; inset-inline-end: 6px; width: 20px; height: 5px; background: var(--t-accent); border-radius: 1px; }
.bni-tpl-thumb b { top: 20px; inset-inline: 6px; height: 3px; background: #cfd8c8; box-shadow: 0 6px 0 #e7ece3, 0 12px 0 #e7ece3; }
.bni-tpl-thumb s { top: 42px; inset-inline: 6px; height: 5px; background: #eef2ea; }
.bni-tpl-thumb u { bottom: 7px; inset-inline-end: 6px; width: 18px; height: 4px; background: var(--t-accent); }
.bni-thumb-modern { border-inline-start: 4px solid var(--t-accent); }
.bni-thumb-minimal { --t-accent: #222; }
.bni-thumb-minimal s { background: transparent; border-bottom: 1px solid #222; }
.bni-thumb-professional s { background: #1f2937; }
.bni-thumb-business::before { content: ""; position: absolute; inset: 0 0 auto; height: 16px; background: var(--t-accent); }
.bni-thumb-business i { background: #fff; }
.bni-thumb-compact b { box-shadow: 0 4px 0 #e7ece3, 0 8px 0 #e7ece3, 0 12px 0 #e7ece3, 0 16px 0 #e7ece3; }
.bni-thumb-elegant i { height: 3px; background: #333; }
.bni-thumb-elegant s { background: transparent; border-block: 3px double #bbb; }
.bni-thumb-bold i { width: 32px; height: 8px; background: #111; }
.bni-thumb-bold u { width: 26px; height: 8px; }

.bni-tax-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    background: #fef8e1;
    border: 1px solid #f1d98a;
    border-radius: 6px;
    font-size: .8rem;
    color: #5a4a12;
}
.bni-tax-hint > div { flex: 1; min-width: 0; }
.bni-tax-hint-note { font-size: .74rem; opacity: .85; margin-top: 2px; }
.bni-tax-hint a { color: inherit; text-decoration: underline; }
.bni-advanced { margin-top: 12px; font-size: .8rem; }
.bni-advanced summary { cursor: pointer; font-weight: 600; color: var(--pk-subtext); padding: 4px 0; }
.bni-advanced .inv-settings-grid { margin-top: 8px; }
.bni-advanced .inv-settings-row { flex-wrap: wrap; }
.bni-hint, .bni-pdf-hint { font-size: .72rem; color: var(--pk-muted); margin: 10px 0 0; }
.bni-pdf-hint { margin: 4px 0 0; text-align: end; }
.bni-draft-status:empty { display: none; }

/* ── Document base (all templates) ──────────────────────────── */
#invoice-wrap {
    --bi-accent: var(--pk-green);
    font-family: var(--bi-font, "Source Sans 3", system-ui, sans-serif);
    text-align: start;
}
#invoice-wrap {
    --bi-accent-soft: #eef4ea;
    --bi-accent-line: #c5dbb5;
    --bi-accent-soft: color-mix(in srgb, var(--bi-accent) 10%, #fff);
    --bi-accent-line: color-mix(in srgb, var(--bi-accent) 32%, #fff);
}
#invoice-wrap .inv-title { color: var(--bi-accent); overflow-wrap: anywhere; margin-bottom: .8rem; }
/* The chosen accent themes the whole document, not only the totals. */
#invoice-wrap .inv-header,
#invoice-wrap .inv-section-border { border-bottom-color: var(--bi-accent-line); }
#invoice-wrap .items-table thead th { background: var(--bi-accent-soft); border-bottom-color: var(--bi-accent); }
#invoice-wrap .items-table tbody tr { border-bottom-color: var(--bi-accent-soft); }
#invoice-wrap .sec-lbl { color: var(--bi-accent); }
#invoice-wrap .t-sep td { border-top-color: var(--bi-accent-line); }
#invoice-wrap .add-row-btn { color: var(--bi-accent); border-color: var(--bi-accent-line); }
#invoice-wrap .add-row-btn:hover { border-color: var(--bi-accent); background: var(--bi-accent-soft); }
#invoice-wrap .tax-toggle:hover { border-color: var(--bi-accent); color: var(--bi-accent); }
#invoice-wrap .addr-block [contenteditable],
#invoice-wrap .note-wrap [contenteditable]:not(.sec-lbl) { border-color: var(--bi-accent-line); background: var(--bi-accent-soft); }
#invoice-wrap .t-balance td { color: var(--bi-accent); border-top-color: var(--bi-accent); }
#invoice-wrap hr { border-color: var(--bi-accent); opacity: 1; }
#invoice-wrap .bni-meta .meta-sidebar { align-items: flex-end; width: 100%; }
/* Label takes the free space, the value keeps its natural width, so long German/Arabic labels don't wrap early. */
#invoice-wrap .meta-item { width: 100%; max-width: 360px; gap: 12px; align-items: baseline; }
#invoice-wrap .meta-lbl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#invoice-wrap .meta-val { flex: 0 0 auto; }
#invoice-wrap .meta-date-input { min-width: 124px; }
#invoice-wrap .meta-val,
#invoice-wrap .meta-date-input,
#invoice-wrap .t-val,
#invoice-wrap .t-inline-edit { text-align: end; }
#invoice-wrap .meta-val, #invoice-wrap .t-val, #invoice-wrap .amt-display { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
#invoice-wrap .t-val { white-space: nowrap; width: auto; padding-inline-start: 12px; }
#invoice-wrap .t-lbl { overflow-wrap: anywhere; }
#invoice-wrap .items-table th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; vertical-align: bottom; }
#invoice-wrap .items-table td { overflow-wrap: anywhere; }
#invoice-wrap .item-desc { white-space: pre-wrap; min-height: 1.4em; }
#invoice-wrap .qty, #invoice-wrap .rate { display: inline-block; min-width: 3.2em; }
#invoice-wrap .rate { min-width: 5em; }
#invoice-wrap [aria-invalid="true"] { box-shadow: 0 0 0 2px #d93025 !important; background: #fdecea !important; }
#invoice-wrap .bni-rate { color: var(--pk-subtext); font-weight: 500; white-space: nowrap; }
#invoice-wrap .tax-toggle { margin-inline-start: 6px; font-family: inherit; line-height: 1.3; }
#invoice-wrap .sec-lbl [contenteditable] { text-transform: inherit; }
#invoice-wrap .bni-taxid-row { color: var(--pk-subtext); display: flex; flex-wrap: wrap; gap: 0 4px; align-items: baseline; }
#invoice-wrap .bni-taxid-row[hidden] { display: none; }
#invoice-wrap .bni-taxid-lbl { font-weight: 600; }
#invoice-wrap .bni-taxid-val { min-width: 6em; }
#invoice-wrap .bni-thanks { margin: 14px 0 0; text-align: center; font-size: .85rem; color: var(--pk-subtext); font-style: italic; }
#invoice-wrap .print-company-header,
#invoice-wrap .print-company-footer { display: none; }
#invoice-wrap #print-header-logo { max-height: 50px; max-width: 120px; object-fit: contain; }

button.t-editable {
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    padding: 1px 4px;
    margin: 0;
    width: 100%;
    text-align: end;
    border-radius: 3px;
    cursor: pointer;
}
button.t-editable:hover { background: var(--pk-lighter); }
.t-inline-edit { width: 100%; max-width: 140px; }

.bni-logo-wrap { position: relative; flex-shrink: 0; }
/* Logo box: a button, so lay out icon + label explicitly (buttons don't wrap/center block content reliably). */
button.logo-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 56px;
    padding: 4px;
    font: inherit;
    font-size: .68rem;
    line-height: 1.1;
    color: var(--pk-muted);
    overflow: hidden;
}
.bni-logo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.bni-logo-ph[hidden] { display: none; }
.bni-logo-ph i { font-size: 1.1rem; line-height: 1; margin: 0; }
.logo-zone img[hidden] { display: none; }
.bni-logo-remove {
    position: absolute;
    top: -8px;
    inset-inline-end: -8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--pk-border);
    border-radius: 50%;
    background: var(--pk-white);
    color: var(--pk-danger);
    line-height: 1;
    cursor: pointer;
}
.bni-doc-only { display: none; }

/* Script-specific rhythm */
#invoice-wrap:lang(ur), #invoice-wrap:lang(ar) { line-height: 1.8; }
#invoice-wrap:lang(ur) .inv-title, #invoice-wrap:lang(ar) .inv-title,
#invoice-wrap:lang(zh), #invoice-wrap:lang(ja), #invoice-wrap:lang(ko) { letter-spacing: 0; }
#invoice-wrap:lang(ur) .sec-lbl, #invoice-wrap:lang(ar) .sec-lbl,
#invoice-wrap:lang(zh) .sec-lbl, #invoice-wrap:lang(ja) .sec-lbl, #invoice-wrap:lang(ko) .sec-lbl,
#invoice-wrap:lang(hi) .sec-lbl, #invoice-wrap:lang(bn) .sec-lbl,
#invoice-wrap:lang(ur) .items-table thead th, #invoice-wrap:lang(ar) .items-table thead th { letter-spacing: 0; text-transform: none; font-size: .78rem; }

/* ── Direction: Bootstrap utilities follow the INVOICE direction, not the page's ── */
#invoice-wrap[dir="rtl"] .text-end { text-align: left !important; }
#invoice-wrap[dir="rtl"] .text-start { text-align: right !important; }
#invoice-wrap[dir="ltr"] .text-end { text-align: right !important; }
#invoice-wrap[dir="ltr"] .text-start { text-align: left !important; }
@media (min-width: 768px) {
    #invoice-wrap[dir="rtl"] .text-md-end { text-align: left !important; }
    #invoice-wrap[dir="ltr"] .text-md-end { text-align: right !important; }
}
#invoice-wrap[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
#invoice-wrap[dir="ltr"] .ms-auto { margin-right: 0 !important; margin-left: auto !important; }
#invoice-wrap .pe-2 { padding-right: 0 !important; padding-inline-end: .5rem !important; }
#invoice-wrap[dir="rtl"] .bni-thanks { font-style: normal; }

/* ── Templates ─────────────────────────────────────────────── */
/* Modern */
#invoice-wrap.tpl-modern { border-inline-start: 6px solid var(--bi-accent); }
#invoice-wrap.tpl-modern .inv-title { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
#invoice-wrap.tpl-modern .items-table thead th { background: var(--bi-accent-soft); border-bottom: 2px solid var(--bi-accent); }
#invoice-wrap.tpl-modern .sec-lbl { color: var(--bi-accent); }

/* Minimal */
#invoice-wrap.tpl-minimal .inv-title { color: #111; font-weight: 300; letter-spacing: .02em; }
#invoice-wrap.tpl-minimal .items-table thead th { background: transparent; border-bottom: 1px solid var(--bi-accent); }
#invoice-wrap.tpl-minimal .sec-lbl { color: #111; }
#invoice-wrap.tpl-minimal .t-balance td { color: var(--bi-accent); border-top: 1px solid var(--bi-accent); }
#invoice-wrap.tpl-minimal .inv-header,
#invoice-wrap.tpl-minimal .inv-section-border { border-bottom-color: #e6e6e6; }
#invoice-wrap.tpl-minimal hr { border-color: var(--bi-accent); }

/* Professional */
#invoice-wrap.tpl-professional .inv-title { color: #1f2937; display: inline-block; padding-bottom: 4px; border-bottom: 3px solid var(--bi-accent); }
#invoice-wrap.tpl-professional .items-table thead th { background: var(--bi-accent); color: #fff; border-bottom-color: var(--bi-accent); }
#invoice-wrap.tpl-professional .items-table thead th [contenteditable]:empty::before { color: #cbd5e1; }
#invoice-wrap.tpl-professional .sec-lbl { background: var(--bi-accent-soft); padding: 2px 8px; border-radius: 3px; }

/* Business */
#invoice-wrap.tpl-business .inv-header { background: var(--bi-accent); color: #fff; border-bottom: 0; }
#invoice-wrap.tpl-business .inv-header .inv-title,
#invoice-wrap.tpl-business .inv-header .meta-lbl,
#invoice-wrap.tpl-business .inv-header .meta-val,
#invoice-wrap.tpl-business .inv-header .company-fields,
#invoice-wrap.tpl-business .inv-header .bni-taxid-row,
#invoice-wrap.tpl-business .inv-header .text-muted { color: #fff !important; }
#invoice-wrap.tpl-business .inv-header [contenteditable]:empty::before { color: rgba(255, 255, 255, .72); }
#invoice-wrap.tpl-business .inv-header [contenteditable]:hover { background: rgba(255, 255, 255, .14); }
#invoice-wrap.tpl-business .inv-header [contenteditable]:focus { background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 2px #fff; }
#invoice-wrap.tpl-business .inv-header .meta-date-input { background: #fff; color: #111; }
#invoice-wrap.tpl-business .inv-header .logo-zone { background: #fff; }
#invoice-wrap.tpl-business .items-table thead th { border-bottom-color: var(--bi-accent); }

/* Compact */
#invoice-wrap.tpl-compact { font-size: .92em; }
#invoice-wrap.tpl-compact .inv-header { padding: 12px 16px 8px; }
#invoice-wrap.tpl-compact .inv-body { padding: 10px 16px; }
#invoice-wrap.tpl-compact .inv-title { font-size: 1.35rem; margin-bottom: .4rem; }
#invoice-wrap.tpl-compact .items-table tbody td { padding: 3px 8px; }
#invoice-wrap.tpl-compact .items-table thead th { padding: 5px 8px; }
#invoice-wrap.tpl-compact .addr-block [contenteditable] { min-height: 56px; }

/* Elegant */
#invoice-wrap.tpl-elegant .inv-title,
#invoice-wrap.tpl-elegant .sec-lbl,
#invoice-wrap.tpl-elegant .items-table thead th,
#invoice-wrap.tpl-elegant .t-total td { font-family: Georgia, "Times New Roman", var(--bi-font), serif; }
#invoice-wrap.tpl-elegant .inv-title { color: #222; font-weight: 400; letter-spacing: .06em; }
#invoice-wrap.tpl-elegant .items-table thead th { background: transparent; border-block: 3px double var(--bi-accent-line); font-weight: 600; }
#invoice-wrap.tpl-elegant .t-balance td { border-top: 3px double var(--bi-accent); }

/* Bold */
#invoice-wrap.tpl-bold .inv-title { font-size: 2.6rem; font-weight: 900; color: var(--bi-accent); letter-spacing: -.01em; }
#invoice-wrap.tpl-bold .items-table thead th { background: var(--bi-accent); color: #fff; border-bottom-color: var(--bi-accent); }
#invoice-wrap.tpl-bold .items-table thead th [contenteditable]:empty::before { color: #bbb; }
#invoice-wrap.tpl-bold .t-total td,
#invoice-wrap.tpl-bold .t-balance td { background: var(--bi-accent); color: #fff; padding: 8px 10px; }
#invoice-wrap.tpl-bold .t-balance td { border-top: 2px solid #fff; }

/* ── Document mode: Preview, print and saved-invoice view ──── */
.bni-doc-mode #invoice-wrap [contenteditable] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    cursor: default;
}
.bni-doc-mode #invoice-wrap [contenteditable]:empty,
.bni-doc-mode #invoice-wrap .no-print,
.bni-doc-mode #invoice-wrap .bni-edit-only,
.bni-doc-mode #invoice-wrap .bni-empty { display: none !important; }
.bni-doc-mode #invoice-wrap .bni-doc-only { display: inline !important; }
.bni-doc-mode #invoice-wrap .addr-block [contenteditable] { min-height: 0 !important; }
.bni-doc-mode #invoice-wrap .note-wrap [contenteditable] { min-height: 0 !important; }
.bni-doc-mode #invoice-wrap button.t-editable { pointer-events: none; padding: 0; }
.bni-doc-mode #invoice-wrap .logo-zone { border: 0; background: transparent; cursor: default; }
.bni-doc-mode #invoice-wrap.bni-no-logo .bni-logo-wrap { display: none; }
.bni-doc-mode #invoice-wrap .print-company-header[data-print-show="1"],
.bni-doc-mode #invoice-wrap .print-company-footer[data-print-show="1"] { display: block !important; }
.bni-doc-mode #invoice-wrap .print-company-header[data-print-show="1"] { padding: 16px 24px 0; }
.bni-doc-mode #invoice-wrap .print-company-footer[data-print-show="1"] { padding: 0 24px 16px; }
.bni-doc-mode #invoice-wrap #print-header[data-print-show="1"] ~ .inv-header .company-fields,
.bni-doc-mode #invoice-wrap #print-header[data-print-show="1"] ~ .inv-header .bni-logo-wrap { display: none !important; }
.bni-doc-mode #invoice-wrap .bni-empty-view { display: none !important; }
.bni-doc-mode #invoice-wrap .table-responsive { overflow: visible; }
#invoice-wrap .table-responsive { overflow-y: hidden; }

/* ── Accessibility ─────────────────────────────────────────── */
#invoice-app :focus-visible { outline: 2px solid var(--pk-green); outline-offset: 2px; }
#invoice-wrap.tpl-business .inv-header :focus-visible { outline-color: #fff; }

/* ── Print ─────────────────────────────────────────────────── */
@media print {
    /* Document mode must not depend on the beforeprint event (headless PDF, some browsers). */
    #invoice-wrap [contenteditable] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; }
    #invoice-wrap [contenteditable]:empty,
    #invoice-wrap .no-print,
    #invoice-wrap .bni-edit-only,
    #invoice-wrap .bni-empty,
    #invoice-wrap .bni-taxid-row[hidden] { display: none !important; }
    #invoice-wrap .bni-doc-only { display: inline !important; }
    #invoice-wrap .logo-zone { border: 0 !important; background: transparent !important; }
    #invoice-wrap.bni-no-logo .bni-logo-wrap { display: none !important; }
    #invoice-wrap button.t-editable { padding: 0 !important; }
    #invoice-wrap .print-company-header[data-print-show="1"],
    #invoice-wrap .print-company-footer[data-print-show="1"] { display: block !important; }
    #invoice-wrap #print-header[data-print-show="1"] ~ .inv-header .company-fields,
    #invoice-wrap #print-header[data-print-show="1"] ~ .inv-header .bni-logo-wrap { display: none !important; }
    .inv-settings, .bni-settings, .bni-pdf-hint { display: none !important; }
    /* The scroll wrapper + visually-hidden caption printed stray scrollbar arrows. */
    #invoice-wrap .table-responsive { overflow: visible !important; }
    /* site.css forces a light-grey table header in print; keep each template's own header colors. */
    #invoice-wrap .items-table thead th { background: var(--bi-accent-soft) !important; border-bottom-color: var(--bi-accent) !important; }
    #invoice-wrap.tpl-professional .items-table thead th,
    #invoice-wrap.tpl-bold .items-table thead th { background: var(--bi-accent) !important; color: #fff !important; }
    #invoice-wrap.tpl-minimal .items-table thead th,
    #invoice-wrap.tpl-elegant .items-table thead th { background: transparent !important; }
    #invoice-wrap .t-balance td { border-top: 2px solid var(--bi-accent) !important; }
    #invoice-wrap.tpl-minimal .t-balance td { border-top: 1px solid var(--bi-accent) !important; color: var(--bi-accent) !important; }
    #invoice-wrap.tpl-elegant .t-balance td { border-top: 3px double var(--bi-accent) !important; }
    #invoice-wrap.tpl-bold .t-balance td { border-top: 2px solid #fff !important; }
    #invoice-wrap .items-table thead { display: table-header-group; }
    #invoice-wrap .items-table tr { break-inside: avoid; page-break-inside: avoid; }
    #invoice-wrap .totals-table, #invoice-wrap .bni-thanks, #invoice-wrap .note-wrap { break-inside: avoid; page-break-inside: avoid; }
    #invoice-wrap.tpl-bold .inv-title { font-size: 2rem !important; }
    #invoice-wrap .print-company-header[data-print-show="1"] { padding: 0 0 4px !important; }
    #invoice-wrap .print-company-footer[data-print-show="1"] { padding: 4px 0 0 !important; }
    #invoice-wrap.tpl-business .inv-header { padding: 12px 14px !important; }
    #invoice-wrap.tpl-modern { padding-inline-start: 10px !important; }
    .bni-doc-mode #invoice-wrap .items-table td,
    .bni-doc-mode #invoice-wrap .items-table th { overflow-wrap: anywhere; }
}

/* ── Field focus: ONE soft ring (no outline + shadow + border stacking) ── */
#invoice-app [contenteditable]:focus,
#invoice-app [contenteditable]:focus-visible,
#invoice-app input:focus,
#invoice-app input:focus-visible,
#invoice-app select:focus,
#invoice-app select:focus-visible,
#invoice-app textarea:focus,
#invoice-app textarea:focus-visible { outline: none; }
#invoice-wrap [contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--bi-accent-line); }
#invoice-wrap .addr-block [contenteditable]:focus,
#invoice-wrap .note-wrap [contenteditable]:not(.sec-lbl):focus { background: #fff; border-color: var(--bi-accent); box-shadow: 0 0 0 3px var(--bi-accent-soft); }
#invoice-wrap .meta-date-input:focus,
#invoice-wrap .t-inline-edit:focus { border-color: var(--bi-accent); box-shadow: 0 0 0 3px var(--bi-accent-soft); }

#invoice-app .pk-select:focus,
#invoice-app .inv-margin-input:focus { border-color: var(--pk-green); box-shadow: 0 0 0 3px rgba(61, 107, 46, .14); }
#invoice-wrap.tpl-business .inv-header [contenteditable]:focus { background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }

/* ── Small screens ─────────────────────────────────────────── */
@media (max-width: 576px) {
    .bni-settings-grid { grid-template-columns: 1fr 1fr; }
    .bni-tpl-grid { grid-template-columns: repeat(4, 1fr); }
    #invoice-wrap .bni-meta .meta-sidebar { align-items: stretch; }
    #invoice-wrap .meta-item { max-width: none; }
    #invoice-wrap.tpl-bold .inv-title { font-size: 1.9rem; }
    .bni-pdf-hint { text-align: start; }
}

/* ── Searchable select (js/bni-combobox.js) ─────────────────── */
.inv-settings.bni-settings { overflow: visible; }
.bni-combo-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.bni-combo { position: relative; width: 100%; }
.bni-combo-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: start; cursor: pointer; background-image: none; }
.bni-combo-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bni-combo-btn i { flex: 0 0 auto; font-size: .7rem; color: var(--pk-muted); transition: transform .15s; }
.bni-combo.is-open .bni-combo-btn { border-color: var(--pk-green); box-shadow: 0 0 0 3px rgba(61, 107, 46, .14); }
.bni-combo.is-open .bni-combo-btn i { transform: rotate(180deg); }
.bni-combo-pop { position: absolute; inset-inline-start: 0; top: calc(100% + 4px); z-index: 1300; width: max(100%, 260px); max-width: calc(100vw - 32px); padding: 6px; background: #fff; border: 1px solid var(--pk-border); border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .14); }
.bni-combo.opens-up .bni-combo-pop { top: auto; bottom: calc(100% + 4px); }
.bni-combo-searchbox { position: relative; margin-bottom: 4px; }
.bni-combo-searchbox i { position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%); font-size: .8rem; color: var(--pk-muted); pointer-events: none; }
.bni-combo-search { width: 100%; padding: 6px 8px; padding-inline-start: 28px; border: 1px solid var(--pk-border-light); border-radius: 6px; font: inherit; font-size: .85rem; background: var(--pk-lighter); }
.bni-combo-search:focus { outline: none; border-color: var(--pk-green); background: #fff; }
.bni-combo-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c5d3bd transparent; }
.bni-combo-list::-webkit-scrollbar { width: 6px; }
.bni-combo-list::-webkit-scrollbar-thumb { background: #c5d3bd; border-radius: 6px; }
.bni-combo-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 5px; font-size: .85rem; color: var(--pk-text); cursor: pointer; }
.bni-combo-option[hidden] { display: none; }
.bni-combo-option.is-active { background: var(--pk-lighter); color: var(--pk-green); }
.bni-combo-option[aria-selected="true"] { font-weight: 700; }
.bni-combo-option[aria-selected="true"]::after { content: "✓"; color: var(--pk-green); }
.bni-combo-empty { margin: 6px 8px; font-size: .82rem; color: var(--pk-muted); }

/* ── Left-to-right islands: phone numbers, emails, tax IDs and invoice/PO numbers keep their
      character order inside Arabic/Urdu invoices ("+966 11 123 4567", not "4567 123 11 966+"),
      while staying aligned with the surrounding right-to-left layout. ── */
#invoice-wrap [data-ltr] { unicode-bidi: isolate; }
#invoice-wrap[dir="rtl"] [data-ltr] { direction: ltr; text-align: right; }
#invoice-wrap[dir="rtl"] .meta-val[data-ltr] { text-align: left; }