div.mainmenu.bankimportplus::before {
	content: "\f0d6";
}
div.mainmenu.bankimportplus {
	background-image: none;
}

.table_width_bankimportplus{
    width: 1500px;
    /* border-collapse: collapse; */
}

/* Group header row background (Import-Datei / Daten aus Dolibarr / Zuweisung) */
.bip_group_header {
    background-color: var(--colorbacktitle1) !important;
}

/* Geschäftspartner column: same as bip_after_sep but fixed width to match dropdown */
.bip_col_thirdparty {
    padding: 8px 10px 8px 12px !important;
    text-align: left;
    width: 260px;
    max-width: 260px;
}

/* The two cells holding the dropdowns. Table cells default to vertical-align: middle, so as soon
   as a deviation badge makes the invoice cell taller, its combobox and the one for the thirdparty
   next to it stop lining up. Aligning both to the top keeps them level whether a badge is there or
   not - no invisible placeholder needed. Only on the data cells, the header keeps its own look. */
.bip_col_dropdown {
    vertical-align: top;
}

/* Badge below the invoice combobox saying how the import will treat an amount that does not match
   the invoice exactly (cash discount, exchange rate difference or partial payment). It sits inside
   the invoice cell on purpose - a row of its own would flip the tr:nth-child(odd) zebra striping
   of the Dolibarr "liste" table for every following line. */
.bip_deviation {
    margin-top: 4px;
    line-height: 1.4;
    text-align: center;
}
.bip_deviation:empty {
    display: none;
}
.bip_deviation .badge {
    font-size: 0.85em;
    font-weight: normal;
    white-space: normal;
}

/* Exchange rate badge. The eldy theme offers no purple, and the colours it does offer are taken
   or misleading here: green would signal "all fine", grey is what badge-info already looks like.
   Rendered on top of badge-dark, which keeps the badge readable while this file is still cached. */
.badge.bip_badge_fx {
    background-color: #6f42c1;
}

/* One invoice slot of a line: combobox, "+" button beside it, badge below. A collective transfer
   renders several slots on top of each other; the sum warning sits below the last one. */
.bip_invoice_slot {
    margin-bottom: 4px;
    white-space: nowrap;
}
.bip_invoice_slot .bip_deviation {
    white-space: normal;
}
/* Carve out room for the "+" button beside the combobox. !important because select2 writes
   width:100% as an inline style (set in js/bankimportplus_index.js), and only an !important
   author rule outranks an inline style. Applied to every slot, not only the last one, so the
   comboboxes of one line all share the same width. */
.bip_invoice_slot .select2-container {
    width: calc(100% - 28px) !important;
}
.bip_invoice_slot select.bip_invoice_select {
    max-width: calc(100% - 28px);
}

/* The "+" button adding another invoice slot for a collective transfer. Rendered into every
   slot but shown only in the last one of its line, so it always sits beside the combobox that
   was added most recently - no javascript has to move it around. */
.bip_add_invoice_slot {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 4px;
    vertical-align: middle;
    color: var(--colortextlink);
}
.bip_invoice_slot:last-child .bip_add_invoice_slot {
    display: inline-block;
}

/* Red warning under the last slot when the selected invoices do not add up to the line amount.
   Same placement rules as .bip_deviation - and like it, never a table row of its own. */
.bip_sum_warning {
    margin-top: 4px;
    line-height: 1.4;
    text-align: center;
}
.bip_sum_warning:empty {
    display: none;
}
.bip_sum_warning .badge {
    font-size: 0.85em;
    font-weight: normal;
    white-space: normal;
}

/* Document flow of an unmatched line: the line shows only the type dropdown, everything else
   is asked in the dialog. Once answered, a badge under the dropdown names the chosen mode and
   carries the icons to reopen or discard it. Everything stays inside the two existing cells -
   no extra table row and no extra column (see .bip_deviation for why). */
/* Belegart und Modus stehen nebeneinander in einer Zeile */
.bip_doc_type_selector {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* select2 schreibt width:100% als INLINE-Style an den Container (Select2.prototype.render,
   select2.full.js) - eine flex-Angabe schlaegt das nicht, nur eine !important-Breite. Ohne
   das wird die Combobox so breit wie die ganze Zelle: Der Pfeil sitzt dann ganz rechts am
   Rand statt neben dem Kreuz, und der Stift rutscht in die naechste Zeile. Dieselbe Loesung
   wie beim Rechnungs-Slot, dort ist der "+"-Button der Grund. 28px lassen Platz fuer den
   Stift daneben. */
.bip_doc_type_selector .select2-container {
    width: calc(100% - 28px) !important;
}
.bip_doc_type_selector select.bip_doc_type_select {
    max-width: calc(100% - 28px);
}
/* Nur der Stift zum erneuten Öffnen; verworfen wird über das "x" der Belegart-Combobox */
.bip_doc_result {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 1.4;
}
.bip_doc_result:empty {
    display: none;
}
.bip_doc_result a {
    cursor: pointer;
    color: var(--colortextlink);
}

/* Partner der Zeile: im Belegablauf nur Text, gewählt wird er im Dialog */
.bip_thirdparty_text {
    padding: 2px 0;
    word-break: break-word;
}
.bip_thirdparty_text:empty {
    display: none;
}

/* Kein eigenes CSS fuer Kreuz und Pfeil der einwertigen select2-Comboboxen - bewusst.
   Das Kreuz steckt IM Textbereich (.select2-selection__rendered, float:right an dessen
   rechtem Rand), der Pfeil liegt absolut auf den letzten 20px des Feldes, und der
   Textbereich hat ab Werk genau diese 20px padding-right. Beide sitzen dadurch sauber
   nebeneinander (so wie bei der Rechnungs-Combobox).
   Ein "margin-right" am Kreuz schiebt es vom rechten Rand nach innen und reisst genau die
   Luecke zum Pfeil auf, die es zu vermeiden gilt - war einmal drin, wieder entfernt. */

.bip_doc_summary {
    line-height: 1.4;
}
.bip_doc_summary:empty {
    display: none;
}
.bip_doc_summary .badge {
    font-size: 0.85em;
    font-weight: normal;
    white-space: normal;
}
.bip_doc_summary a {
    margin-left: 5px;
    cursor: pointer;
    color: var(--colortextlink);
}

/* The dialog: line info and the name of the type chosen in the line, then one of three steps -
   mode (two large buttons), assign (partner plus the invoice slots borrowed from the line) or
   create (the fields of the type). The type is NOT picked here, the dropdown of the line did. */
.bip_doc_dialog .bip_doc_line_info {
    margin-bottom: 6px;
    word-break: break-word;
}
.bip_doc_dialog .bip_doc_dialog_type {
    font-weight: bold;
    margin-bottom: 10px;
}
.bip_doc_dialog .bip_doc_modes {
    display: flex;
    gap: 10px;
}
.bip_doc_dialog .bip_doc_mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--colortopbordertitle1);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    padding: 14px 12px;
    text-align: left;
    color: inherit;
}
.bip_doc_dialog .bip_doc_mode:hover {
    background-color: var(--colorbacktitle1);
    border-color: var(--colortextlink);
}
.bip_doc_dialog .bip_doc_mode_label {
    font-weight: bold;
    color: var(--colortextlink);
}
.bip_doc_dialog .bip_doc_mode_hint {
    font-size: 0.9em;
    white-space: normal;
}
.bip_doc_dialog .bip_doc_error {
    margin-top: 8px;
}
/* select2 writes width:100% inline (js/bankimportplus_index.js), keep it inside the dialog */
.bip_doc_dialog .select2-container {
    width: 100% !important;
}
/* The blocks borrowed from the line are sized for a 260px table cell - inside the dialog they
   get the full width, and the slot comboboxes keep the room for their "+" button */
.bip_doc_dialog .bip_thirdparty_wrap,
.bip_doc_dialog .bip_assign_wrap {
    width: 100%;
}
/* maxwidth250 sits on the select itself and, through containerCssClass ":all:", on the select2
   container as well - both have to be released, otherwise the combobox stays a 250px stub in a
   600px dialog */
.bip_doc_dialog .maxwidth250,
.bip_doc_dialog .select2-container.maxwidth250 {
    max-width: none !important;
}
.bip_doc_dialog .bip_invoice_slot select.bip_invoice_select {
    max-width: calc(100% - 28px);
}

.bip_sep_right {
    border-right: 1px solid var(--colortopbordertitle1) !important;
    padding: 8px 12px 8px 10px !important;
    text-align: right;
}

/* Column after separator: extra left padding (after the line) */
.bip_after_sep {
    padding: 8px 10px 8px 12px !important;
    text-align: left;
}


.text_right_bankimportplus{
    text-align: right;
}

.text_max_width_bankimportplus{
    max-width: 150px;
}

.btn_align_middle_bankimportplus{
    width: 1500px;
    text-align: center;
}

.center_bankimportplus{
    text-align: center;
}

.input_sizing_bankimportplus{
    max-width: 50px;
}

/* Section headings within the EB connect page */
.bip-section-title {
    display: block;
    font-weight: bold;
    font-size: 1em;
    padding: 6px 8px;
    margin: 14px 0 0 0;
}

/* Small inline action buttons for table rows - mirrors butAction/butActionDelete but compact */
.butActionSmall,
.butActionSmall:link,
.butActionSmall:visited {
    background: var(--butactionbg);
    color: var(--textbutaction) !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    padding: 0.3em 0.6em;
    margin: 0 0.3em 0 0;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
}
.butActionSmall:hover {
    box-shadow: 0px 0px 6px rgba(50,50,50,0.4), inset 0px 0px 200px rgba(0,0,0,0.3);
}
.butActionSmallDelete,
.butActionSmallDelete:link,
.butActionSmallDelete:visited {
    background: var(--butactiondeletebg) !important;
    color: #633 !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    padding: 0.3em 0.6em;
    margin: 0 0.3em 0 0;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
}
.butActionSmallDelete:hover {
    box-shadow: 0px 0px 6px 1px rgba(50,50,50,0.4);
}