/* ==========================================================================
   Dropzone Upload — Enhanced styling for file upload areas
   Applied to #my-dropzone on all import pages
   ========================================================================== */

/* Base container */
#my-dropzone,
#my-dropzone-one-expense,
#my-dropzone-one-item {
    border: 2px dashed #b8c2cc;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fc 0%, #eef1f6 100%);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover state */
#my-dropzone:hover,
#my-dropzone-one-expense:hover,
#my-dropzone-one-item:hover {
    border-color: #5d78ff;
    background: linear-gradient(135deg, #f0f3ff 0%, #e8ecff 100%);
    box-shadow: 0 4px 15px rgba(93, 120, 255, 0.15);
    transform: translateY(-1px);
}

/* Drag-hover state (file dragged over) */
#my-dropzone.dz-drag-hover,
#my-dropzone-one-expense.dz-drag-hover,
#my-dropzone-one-item.dz-drag-hover {
    border-color: #0abb87;
    background: linear-gradient(135deg, #f0fff8 0%, #e8fff3 100%);
}

/* Message container */
#my-dropzone .dz-message,
#my-dropzone-one-expense .dz-message,
#my-dropzone-one-item .dz-message {
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Upload icon circle */
#my-dropzone .upload-icon,
#my-dropzone-one-expense .upload-icon,
#my-dropzone-one-item .upload-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d78ff 0%, #3758f9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    margin-bottom: 4px;
    box-shadow: 0 4px 15px rgba(93, 120, 255, 0.3);
    transition: transform 0.3s ease;
}

#my-dropzone:hover .upload-icon,
#my-dropzone-one-expense:hover .upload-icon,
#my-dropzone-one-item:hover .upload-icon {
    transform: scale(1.1);
}

/* Upload text */
#my-dropzone .upload-text,
#my-dropzone-one-expense .upload-text,
#my-dropzone-one-item .upload-text {
    font-size: 15px;
    color: #595d6e;
    font-weight: 500;
}

/* Upload hint (optional subtitle) */
#my-dropzone .upload-hint,
#my-dropzone-one-expense .upload-hint,
#my-dropzone-one-item .upload-hint {
    font-size: 12px;
    color: #a2a5b9;
}

/* Floating save bar — used on pages with inline editing (taxFieldsData, annualReport, etc.) */
.save-area {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ebedf2;
    border-radius: 8px;
    padding: 12px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.save-area .hint {
    color: #74788d;
    font-size: 0.85rem;
}
.save-area .hint i {
    color: #1dc9b7;
    margin-left: 8px;
}
@media (max-width: 768px) {
    .save-area {
        padding: 10px 20px;
        bottom: 15px;
    }
    .save-area .hint {
        display: none;
    }
}
.kt-portlet__body:has(.save-area) {
    padding-bottom: 80px !important;
}
.select-forced-disabled {
    pointer-events: none;
    opacity: 0.65;
    background-color: #e9ecef !important;
}
/* Document-type colored field rows. Used on documentNumbering, documentDefaultBank,
   and documentBottomTitle settings pages. Each row carries inline CSS variables
   --dt-color / --dt-tint / --dt-border populated from DocumentsAction's color helpers,
   so the visual matches the colored document-type pills in the documents list. */
.doc-type-row {
    --dt-color: #5867dd;
    --dt-tint: #5867dd1a;
    --dt-border: #5867dd33;
    background: var(--dt-tint);
    border: 1px solid var(--dt-border);
    border-radius: 8px;
    padding: 12px 16px 4px;
    margin-bottom: 12px;
    transition: filter .15s, box-shadow .15s;
}
[dir="rtl"] .doc-type-row { border-right: 4px solid var(--dt-color); }
[dir="ltr"] .doc-type-row { border-left: 4px solid var(--dt-color); }
.doc-type-row:hover {
    filter: brightness(0.99);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.doc-type-row .form-group {
    margin-bottom: 8px;
    align-items: center;
}
.doc-type-row label,
.doc-type-row .col-form-label {
    color: var(--dt-color) !important;
    font-weight: 600;
}
.doc-type-row .col-form-label::before {
    content: "\f15c";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    opacity: 0.7;
    font-size: 12px;
    /* Use logical property — works in RTL/LTR without depending on a [dir] attribute on html/body
       (which the app intentionally does not set; see css-rtl-no-dir-attribute memory). */
    margin-inline-end: 8px;
}
.doc-type-row.doc-type-row-disabled {
    opacity: 0.65;
    filter: grayscale(0.2);
}
.doc-type-row.doc-type-row-disabled .col-form-label::before { content: "\f023"; }
/* Intro alert variant — uses the same --dt-color but as a thicker leading bar. */
.doc-type-intro {
    --dt-color: #5867dd;
    border-radius: 6px;
}
[dir="rtl"] .doc-type-intro { border-right: 4px solid var(--dt-color) !important; }
[dir="ltr"] .doc-type-intro { border-left: 4px solid var(--dt-color) !important; }

/* Prominent friendly field-error alert (b:fieldErrorAlert) — replaces the tiny
   invalid-feedback text for errors like "add at least one payment" on
   documentDetails / expensePaymentDetails. Soft danger look + gentle entrance. */
.field-error-alert {
    margin: 16px 0 4px;
    padding: 14px 18px;
    border-radius: 10px;
    align-items: center;
    animation: fieldErrorAlertIn .35s ease-out;
}
/* leading accent bar — logical property follows the computed direction (no dir attr
   on html/body); .alert.x specificity needed to beat .alert.alert-solid-danger's
   transparent border-color from the Metronic bundle */
.alert.field-error-alert { border-inline-start: 4px solid #fd397a; }
.field-error-alert .alert-icon i {
    font-size: 2.2rem;
    animation: fieldErrorAlertPulse 1.8s ease-in-out infinite;
}
.field-error-alert .field-error-alert-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.field-error-alert .field-error-alert-hint {
    margin-top: 2px;
    font-size: 13px;
    opacity: 0.85;
}
@keyframes fieldErrorAlertIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fieldErrorAlertPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ============================================================================
   Readable solid alerts — override Metronic's low-contrast .alert-solid-*
   ----------------------------------------------------------------------------
   Metronic renders .alert-solid-X as the *saturated accent color* text on a
   10%-opacity tint of the SAME color. For warning that means bright yellow text
   on a near-white background — effectively invisible ("לא רואים כלום"); success
   and info are weak too. These overrides keep each alert's color identity but
   make it readable: a soft-yet-present tint, dark body text, a bold colored
   heading, a leading accent bar, and a matching icon — NO markup changes, every
   .alert-solid-* in the whole app becomes readable at once. Loaded AFTER
   style.bundle.css (layoutHead.xhtml), same specificity → these win.
   ALWAYS use one of these for in-page notices; never hand-roll faded alerts.
   ============================================================================ */
.alert.alert-solid-warning,
.alert.alert-solid-info,
.alert.alert-solid-success,
.alert.alert-solid-danger,
.alert.alert-solid-primary,
.alert.alert-solid-brand {
    border: 0;
    border-inline-start: 4px solid var(--alert-accent);
    border-radius: 8px;
    background: var(--alert-bg);
    color: var(--alert-text);
}
.alert.alert-solid-warning { --alert-accent:#f0a500; --alert-bg:#fff3cd; --alert-text:#7a5600; --alert-head:#8a5a00; }
.alert.alert-solid-info    { --alert-accent:#5578eb; --alert-bg:#e8f1fe; --alert-text:#27407e; --alert-head:#2f49b8; }
.alert.alert-solid-success { --alert-accent:#0fae9e; --alert-bg:#e2f6f2; --alert-text:#0b5e56; --alert-head:#0c7d71; }
.alert.alert-solid-danger  { --alert-accent:#fd397a; --alert-bg:#fde9ee; --alert-text:#971241; --alert-head:#c41e57; }
.alert.alert-solid-primary { --alert-accent:#5867dd; --alert-bg:#ecedfb; --alert-text:#323a86; --alert-head:#404bbf; }
.alert.alert-solid-brand   { --alert-accent:#2c77f4; --alert-bg:#e7f0fe; --alert-text:#154488; --alert-head:#1e63cc; }

/* body text, icon and heading follow the per-variant vars (beat the bundle's
   saturated-color rules at the same specificity, loaded later) */
.alert.alert-solid-warning .alert-text,
.alert.alert-solid-info .alert-text,
.alert.alert-solid-success .alert-text,
.alert.alert-solid-danger .alert-text,
.alert.alert-solid-primary .alert-text,
.alert.alert-solid-brand .alert-text { color: var(--alert-text); }

.alert.alert-solid-warning .alert-icon i,
.alert.alert-solid-info .alert-icon i,
.alert.alert-solid-success .alert-icon i,
.alert.alert-solid-danger .alert-icon i,
.alert.alert-solid-primary .alert-icon i,
.alert.alert-solid-brand .alert-icon i { color: var(--alert-accent); }

.alert.alert-solid-warning .alert-heading,
.alert.alert-solid-info .alert-heading,
.alert.alert-solid-success .alert-heading,
.alert.alert-solid-danger .alert-heading,
.alert.alert-solid-primary .alert-heading,
.alert.alert-solid-brand .alert-heading { color: var(--alert-head); font-weight: 600; }

/* Outline (bordered, white-bg) alerts share the same flaw for the LIGHT accents:
   amber/teal text on white is unreadable. Keep the bordered outline look but
   darken only the text/heading of warning & success to a readable shade.
   info/danger/dark stay as Metronic intends (their accent text is legible). */
.alert.alert-outline-warning,
.alert.alert-outline-warning .alert-text { color:#7a5600; }
.alert.alert-outline-warning .alert-heading { color:#8a5a00; font-weight:600; }
.alert.alert-outline-success,
.alert.alert-outline-success .alert-text { color:#0b5e56; }
.alert.alert-outline-success .alert-heading { color:#0c7d71; font-weight:600; }

/* ===== Israel-invoices allocation tooltips =====
   HTML is built in DocumentsAction.java (buildNoAllocationTooltip / buildSelfInvoiceTooltip /
   buildAllocationRequiredTooltip). Bootstrap 4.3's tooltip sanitizer strips inline style
   attributes (class/dir survive), so ALL styling must live here.
   :has() widens the host tooltip bubble; browsers without :has() fall back to the
   200px bubble but keep RTL right-alignment from the inner classes. */
.tooltip-inner:has(.ils-alloc-tooltip) {
    max-width: 340px;
    text-align: right;
}
.ils-alloc-tooltip {
    direction: rtl;
    text-align: right;
    font-size: 13px;
}
/* English/LTR mode: builder adds .ils-alloc-ltr so the tooltip reads left-to-right (Hebrew unchanged) */
.ils-alloc-tooltip.ils-alloc-ltr {
    direction: ltr;
    text-align: left;
}
.tooltip-inner:has(.ils-alloc-tooltip.ils-alloc-ltr) {
    text-align: left;
}
.ils-alloc-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.ils-alloc-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #48465b;
}
.ils-alloc-check {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1dc9b7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}
.ils-alloc-check-required { background: #fd397a; }
.ils-alloc-card {
    background: #f7f8fa;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    line-height: 1.7;
    color: #48465b;
}
.ils-alloc-row { margin-bottom: 4px; }
.ils-alloc-row:last-child { margin-bottom: 0; }
.ils-alloc-note {
    font-size: 12px;
    color: #74788d;
    line-height: 1.7;
}
.ils-nowrap { white-space: nowrap; }

/* ===== IRS approved-stamp pill (b:irsApprovedStamp — accountant customer lists) =====
   Palette mirrors the documentDetails IRS header badge: blue = valid token,
   red (.irs-stamp-pill-alert) = token expired or expiring within two weeks. */
.irs-stamp-pill, .irs-stamp-pill:hover, .irs-stamp-pill:focus {
    background: #f3f6ff;
    border: 1px solid #d6def9;
    color: #5867dd;
}
.irs-stamp-pill.irs-stamp-pill-alert, .irs-stamp-pill.irs-stamp-pill-alert:hover, .irs-stamp-pill.irs-stamp-pill-alert:focus {
    background: #fdf0f3;
    border-color: #f5c2c7;
    color: #fd397a;
}

/* ===== "Log into the customer's system" — unified circular brand icon button =====
   Used by the accountantCustomers row (next to the company name) AND the accountant
   view-company top bar (met_layout). Light brand tint by default, fills solid on hover
   so it reads as a real action — not a stuck-on gray icon-box. Palette matches the
   .irs-stamp-pill next to it. Near-white on a colored bar, tinted on a white row. */
.ils-row-login {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; min-width: 26px; padding: 0; line-height: 1;
    border-radius: 50%; border: 0;
    background: #eef1fe; color: #5867dd;
    transition: background .15s ease, color .15s ease;
}
.ils-row-login:hover, .ils-row-login:focus {
    background: #5867dd; color: #fff; text-decoration: none;
}
.ils-row-login > i { font-size: 13px; }
/* Larger variant for the view-company top bar — matches the 32px height of the
   neighboring btn-sm "back" button + the customer-search box so edges sit flush. */
.ils-row-login.ils-login-bar { width: 32px; height: 32px; min-width: 32px; }
.ils-row-login.ils-login-bar > i { font-size: 15px; }

/* ===== Tax Authority (Israel Invoices) common-errors self-service help callout ===== */
.irs-help-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 4px;
    padding: 13px 18px;
    background: linear-gradient(90deg, #eef3ff 0%, #f6f9ff 100%);
    border: 1px solid #d6e0ff;
    border-radius: 10px;
}
.irs-help-callout__icon {
    font-size: 1.7rem;
    color: #5867dd;
    flex: 0 0 auto;
    opacity: 0.9;
}
.irs-help-callout__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1 1 auto;
    justify-content: space-between;
}
.irs-help-callout__text {
    font-size: 0.95rem;
    color: #48465b;
    font-weight: 500;
    line-height: 1.5;
}
.irs-help-callout__btn {
    white-space: nowrap;
    flex: 0 0 auto;
}
.irs-help-callout__btn i { margin-inline-end: 5px; }

/* ===== Contact cards (customer / supplier "contacts" tab) ===== */
.contact-cards-wrap { margin-top: 4px; }
.contact-cards-row { margin-inline: -8px; }
.contact-card-col { padding: 8px; margin-bottom: 0; }
.contact-card {
    height: 100%;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    background: #fff;
    padding: 16px 18px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.contact-card:hover {
    border-color: #d3d9f5;
    box-shadow: 0 6px 18px rgba(88,103,221,0.10);
}
.contact-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.contact-card__avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d78ff 0%, #5867dd 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 42px;
    text-align: center;
    text-transform: uppercase;
}
.contact-card__title {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}
.contact-card__name {
    font-weight: 600;
    font-size: 1.02rem;
    color: #48465b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-card__role {
    font-size: 0.85rem;
    color: #a2a5b9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.contact-card__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}
.contact-card__actions .btn { color: #74788d; transition: background-color .15s ease, color .15s ease; }
.contact-card__actions .btn:hover { background: #f0f1f7; color: #5867dd; }
.contact-card__del:hover { color: #fd397a !important; background: #fff0f3 !important; }
.contact-card__body { margin-top: 12px; }
.contact-card__line {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #6c7293;
    margin-top: 7px;
}
.contact-card__line i {
    flex: 0 0 auto;
    width: 18px;
    font-size: 1rem;
    color: #5867dd;
    margin-inline-end: 8px;
    text-align: center;
}
.contact-card__val {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.contact-cards-empty { margin-top: 6px; }

/* ===== b:megaOptions selection cards (donation type on documentDetails, import source on importIlTax)
   The selected state is rendered server-side (.mega-option-selected) and mirrored instantly on
   click via :has() — the :has() rules are kept SEPARATE from the class rules because a comma list
   containing :has() is dropped entirely by browsers that don't support it. dir is set per-card
   from gen.dir (no dir attr on html/body), so the radio side, flex order and text-align follow
   the UI language natively. ===== */
.mega-option-col { margin-bottom: 10px; }
.mega-option-card {
    height: 100%;
    margin: 0;
    padding: 1.1rem;
    cursor: pointer;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mega-option-card .kt-option__title { font-weight: 500; }
.mega-option-card .kt-option__body { line-height: 1.5; padding-top: .4rem; }
.mega-option-card:not(.mega-option-disabled):hover {
    border-color: #2c77f4;
    box-shadow: 0 2px 10px rgba(44, 119, 244, .15);
}
.mega-option-card.mega-option-selected {
    border-color: #2c77f4;
    box-shadow: 0 0 0 1px #2c77f4;
    background-color: rgba(44, 119, 244, .04);
}
.mega-option-card.mega-option-selected .kt-option__title { color: #2c77f4; font-weight: 600; }
.mega-option-card:has(input:checked) {
    border-color: #2c77f4;
    box-shadow: 0 0 0 1px #2c77f4;
    background-color: rgba(44, 119, 244, .04);
}
.mega-option-card:has(input:checked) .kt-option__title { color: #2c77f4; font-weight: 600; }
.mega-option-card.mega-option-disabled { opacity: .7; cursor: not-allowed; }

/* ===== Maven-package upsell line (b:mavenUpsell) — shown under package-gated features ===== */
.maven-upsell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 2px 0 10px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff7e6;
    border: 1px solid #ffe2a8;
    color: #6c5a1f;
    font-size: 0.95em;
}
.maven-upsell__icon { color: #ffb822; font-size: 1.1em; }
.maven-upsell__cta { font-weight: 600; white-space: nowrap; color: #2c77f4; }
.maven-upsell__cta:hover { text-decoration: underline; color: #1a5fd0; }

/* reportFieldError on met:fieldChkBox — the wrapper gets "validated" but the checkbox never gets
   is-invalid, so Bootstrap keeps .invalid-feedback hidden. Show the error whenever the framework
   marked the row as validated (no effect on text/combo fields — theirs is already visible). */
.form-group.validated .invalid-feedback { display: block; }

/* trial mode of b:mavenUpsell — a discreet "included in the Maven package" note, no box, no CTA */
.maven-upsell.maven-upsell--trial {
    background: none;
    border: none;
    padding: 0;
    margin: 2px 0 6px;
    color: #a7abc3;
    font-size: 0.88em;
}
.maven-upsell--trial .maven-upsell__icon { color: #c9cce0; font-size: 1em; }
/* when the upsell line sits inside the control's own row (afterInput), keep it tight to the control */
.form-group .maven-upsell { margin: 8px 0 0; }

/* the "מייבן" premium chip (b:mavenUpsell) — marks every Maven-package feature in all access states */
.maven-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #f6b50b, #f78f1e);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(247, 143, 30, .35);
    cursor: default;
}
.maven-badge .la-diamond { font-size: 11px; }
/* keep the gold chip visible inside the dark side-menu (the menu CSS resets span backgrounds to transparent),
   so the Maven add-on marker next to "מחסנים" reads as a gold diamond, not a plain white one */
.kt-menu__nav .maven-badge,
.kt-menu__subnav .maven-badge { background: linear-gradient(135deg, #f6b50b, #f78f1e) !important; color: #fff !important; padding: 2px 6px; }

/* ===== "Support-only editable field" marker (b:supportOnlyField) — for fields only the Invoice
   Maven support team may change (e.g. vat_frequency_cd). Red so it clearly reads as restricted. ===== */
.support-only-note {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff0f3;
    border: 1px solid #ffc9d6;
    color: #8a2540;
    font-size: 0.9em;
}
.support-only-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #fd397a, #d81b60);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(216, 27, 96, .35);
    cursor: default;
}
.support-only-badge .la-lock { font-size: 11px; }
.support-only-note__text { flex: 1 1 auto; }
/* keep the marker tight to the control when it sits inside a field's afterInput row */
.form-group .support-only-note { margin: 8px 0 0; }

/* "שדרוגים" topbar launcher — Google-apps-style grid of every add-on */
.upgrade-launcher { width: 320px; padding: 0; }
.upgrade-launcher__head { padding: 14px 16px 10px; border-bottom: 1px solid #ebedf2; }
.upgrade-launcher__title { font-size: 15px; font-weight: 700; color: #48465b; display: flex; align-items: center; gap: 6px; }
.upgrade-launcher__title .la-diamond { color: #f6b50b; }
.upgrade-launcher__sub { font-size: 12px; color: #a2a5b9; margin-top: 2px; }
.upgrade-launcher__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 10px; max-height: 380px; overflow-y: auto; }
.upgrade-launcher__cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 12px 6px; border-radius: 10px; color: #595d6e; text-decoration: none; transition: background .15s; cursor: pointer; }
.upgrade-launcher__cell:hover { background: #f8f9fc; color: #5867dd; text-decoration: none; }
.upgrade-launcher__icon { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #f6b50b, #f78f1e); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 3px 8px rgba(247, 143, 30, .3); }
.upgrade-launcher__label { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
/* paid state — the chip alone, no box, minimal footprint */
.maven-upsell.maven-upsell--paid {
    background: none;
    border: none;
    padding: 0;
    margin: 4px 0 0;
}

/* central-invoice markers on the documents list (b:documentNoAndClosing) */
.central-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #5d78ff;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    margin: 0 4px;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
}
.central-doc-badge .la { font-size: 11px; }
/* compact icon-only badge (e.g. "partially closed" ◑) — keeps the closing column narrow; full text is in the tooltip */
.central-doc-badge--icon { padding: 3px 5px; margin: 0 2px; gap: 0; }
.central-doc-badge--pending {
    background: #fff;
    color: #5d78ff;
    border: 1px dashed #5d78ff;
}

/* clickable "מרכזת" badge + the active central-filter banner */
.central-doc-badge--link { cursor: pointer; text-decoration: none; transition: filter .15s, box-shadow .15s; }
.central-doc-badge--link:hover { filter: brightness(1.06); box-shadow: 0 2px 6px rgba(93,120,255,.4); color: #fff; }
.central-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #eef0ff;
    border: 1px solid #d6dbff;
    color: #2a2f6b;
}
.central-filter-banner__text { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.central-filter-banner__text .la-compress { color: #5d78ff; font-size: 1.15em; }
/* the central invoice number — looks like a clickable blue document-number pill */
.central-filter-banner__docno {
    display: inline-flex;
    align-items: center;
    background: #5d78ff;
    color: #fff;
    font-weight: 700;
    font-size: 0.92em;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 6px;
    text-decoration: none;
    transition: filter .15s, box-shadow .15s;
}
.central-filter-banner__docno:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(93,120,255,.5); color: #fff; }
/* clear-filter button — forced visible (Metronic btn-secondary renders transparent on this banner) */
.central-filter-banner__clear {
    white-space: nowrap;
    background: #fff;
    border: 1px solid #c2c8f0;
    color: #2a2f6b;
}
.central-filter-banner__clear:hover { background: #5d78ff; border-color: #5d78ff; color: #fff; }

/* central-invoice clarity notice inside the document preview (both directions) */
.central-preview-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 11px 15px;
    border-radius: 8px;
    background: #eef0ff;
    border: 1px solid #d6dbff;
    color: #2a2f6b;
    font-weight: 500;
}
.central-preview-notice .la-compress { color: #5d78ff; font-size: 1.15em; margin-inline-end: 5px; }
.central-preview-notice__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #5d78ff;
    color: #fff;
    font-weight: 600;
    font-size: 0.9em;
    padding: 5px 12px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s, box-shadow .15s;
}
.central-preview-notice__btn:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(93,120,255,.5); color: #fff; }

/* ==========================================================================
   "View selector" dropdowns — gently highlighted (soft indigo pill)
   Used by the list-view selectors that hide part of the records behind a
   non-default view, so users notice the list is scoped and don't assume a
   record "disappeared":
     • accountantCustomers — "לקוחות בשימוש" vs. "לקוחות בארכיון"
     • customers / suppliers — "לקוחות/ספקים קבועים" vs. "מזדמנים"
   ========================================================================== */
.btn-view-filter,
.btn-view-filter:not(:disabled):not(.disabled) {
    background-color: #eef0fd !important;
    border: 1px solid #aab2f2 !important;
    color: #3f4cc4 !important;
    box-shadow: 0 1px 4px rgba(88, 103, 221, 0.18);
}
.btn-view-filter:hover,
.btn-view-filter:focus,
.btn-view-filter.show,
.btn-view-filter[aria-expanded="true"] {
    background-color: #e1e4fb !important;
    border-color: #8b95ec !important;
    color: #2f3aa8 !important;
    box-shadow: 0 2px 8px rgba(88, 103, 221, 0.30);
}

/* ===================== Menu favorites (per-user) =====================
   A star toggle on every side-menu link + a "Favorites" section pinned
   at the top of the menu. The section is built client-side by
   initMenuFavorites() (invoiceFunctions.js) from links already present
   in the rendered menu, so page permissions are always honored. */
#kt_aside_menu .kt-menu__link {
    position: relative;
}
.menu-fav-star {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: #6c7293;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease, transform .15s ease;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
}
@media (hover: hover) {
    .kt-menu__link:hover .menu-fav-star {
        opacity: .7;
    }
}
/* Touch devices have no real hover. A star that only appears on :hover makes the
   browser treat the FIRST tap on a menu link as a hover (revealing the star) and
   swallow it, so navigation needs a second tap. Keep the star faintly visible on
   touch so a single tap follows the link. */
@media (hover: none) {
    .menu-fav-star {
        opacity: .4;
    }
}
.menu-fav-star:hover {
    opacity: 1;
    color: #ffb822;
    transform: translateY(-50%) scale(1.2);
}
.menu-fav-star.is-fav {
    opacity: 1;
    color: #ffb822;
    text-shadow: 0 0 6px rgba(255, 184, 34, .45);
}
/* "Favorites" section header (non-clickable label) */
.menu-fav-section {
    pointer-events: none;
}
.menu-fav-section__title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 25px 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #6c7293;
    opacity: .85;
}
.menu-fav-section__title i {
    font-size: 11px;
    color: #ffb822;
}
.menu-fav-divider {
    height: 0;
    margin: 7px 22px 11px;
    border-bottom: 1px solid rgba(110, 114, 147, .18);
    list-style: none;
}
/* Subtle emphasis on the favorite copy of the currently-open page */
.menu-fav-item.kt-menu__item--active > .kt-menu__link {
    font-weight: 600;
}

/* ===================== Meeting-host multi-select (booking-share modals) =====================
   The "הפגישה עם" picker in calendar.jsf + the accountantCustomers booking modal renders a
   h:selectManyCheckbox (a <table> of one option per row). Lay each option out as a clean,
   evenly-aligned flex row (checkbox on the reading-start side, label beside it) with a hover
   highlight, instead of the ragged default table alignment. RTL/LTR follow the page direction. */
.bm-host-checks { border-collapse: collapse; margin: 2px 0; width: 100%; }
.bm-host-checks, .bm-host-checks tbody, .bm-host-checks tr { display: block; }
.bm-host-checks td {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .12s ease;
}
.bm-host-checks td:hover { background-color: #f5f6fb; }
.bm-host-checks input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
    accent-color: #5867dd;
}
.bm-host-checks label {
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    color: #48465b;
    line-height: 1.45;
}

/* Scheduled-meeting badge on the customer rows (accountantCustomers + customers): keep the
   calendar icon vertically centered with the date text and sit inline with the customer name. */
.ils-meeting-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
.ils-meeting-badge i { line-height: 1; }

/* Plain JSF radio / checkbox groups (h:selectOneRadio / h:selectOneCheckbox rendered without a Metronic
   kt-radio wrapper): give the control breathing room from its caption so the circle isn't glued to the text,
   and space the options apart. Applies app-wide so we don't restyle radios per-screen. Metronic kt-radio is
   untouched — its native input is visually hidden and its caption is a <span>, so neither selector matches it. */
input[type="radio"] + label,
input[type="checkbox"] + label {
    margin-inline-start: 6px;   /* gap between the circle and its own caption */
    margin-inline-end: 18px;    /* gap to the next option (horizontal/line-direction groups) */
    vertical-align: middle;
    cursor: pointer;
    font-weight: 400;
}
/* a touch of vertical rhythm for stacked (pageDirection) radio groups */
table tr td > input[type="radio"],
table tr td > input[type="checkbox"] { vertical-align: middle; cursor: pointer; }
table tr td:has(> input[type="radio"]) { padding-bottom: 4px; }

/* Page-intro callout (alert-solid-info) — used on the inventory pages + companyAdvancedSettings. */
.page-intro-alert { margin-bottom: 20px; }
.page-intro-alert .intro-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; display: block; }

/* ===== UI language switcher (he/en/ar/ru) ===== */
/* Topbar + mobile dropdown menu items (langSwitcherItems.xhtml). Logical props → RTL/LTR-safe. */
.kt-lang-menu { min-width: 168px; }
.kt-lang-item { display: flex; align-items: center; gap: 8px; }
.kt-lang-item.active { color: #5d78ff; font-weight: 700; }
.kt-lang-item__check { width: 14px; display: inline-flex; justify-content: center; color: #5d78ff; flex: none; }
.kt-lang-item__name { flex: 1 1 auto; }
/* External pages (login + registration wizard): inline language pills, no dropdown-JS dependency. */
.kt-lang-pills { display: flex; gap: 6px; align-items: center; }
.kt-lang-pill { background: #fff; border: 1px solid #e2e5ec; border-radius: 20px; padding: 4px 12px; color: #48465b; font-size: 13px; line-height: 1.4; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,0.10); transition: all .15s ease; }
.kt-lang-pill:hover { border-color: #5d78ff; color: #5d78ff; text-decoration: none; }
.kt-lang-pill--active { background: #5d78ff; border-color: #5d78ff; color: #fff; font-weight: 600; }
.kt-lang-pill--active:hover { color: #fff; }
/* Cyrillic-safe rendering for the login page's language pills + primary (brand) button.
   On the iPhone-app webview the login-page font lacked bold Cyrillic glyphs, so white/bold
   Russian text ("Войти"/"Русский") came out blank while Hebrew/Arabic/English rendered. Force a
   font stack that ALWAYS has Cyrillic (system font fallback) + keep the white fill explicit
   (-webkit-text-fill-color guards an iOS gradient-text override). Scoped to the BRAND button only
   so the secondary 2FA button (black text) is untouched. */
.kt-lang-pill, .kt-login__btn-primary {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', sans-serif !important;
}
.kt-lang-pill--active, .kt-login__btn-primary.btn-brand {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}
/* ROOT FIX for blank bold Russian text on the iOS app: rubik.css's BOLD face (Rubik-Medium,
   font-weight 600-700) declares only Hebrew + Latin unicode-ranges — it has NO Cyrillic. So any
   bold Cyrillic (login button btn-bold, the active language pill, the mobile card labels <b>…</b>,
   badges) had no glyph in the named font; desktop browsers fall back, the iOS app webview does NOT
   → blank. Map bold (600-700) Cyrillic to the EXISTING regular-weight Cyrillic Rubik files (browser
   synthesises bold) so it always renders. unicode-ranges copied from rubik.css's regular faces. */
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600 700;
	src: url(../fonts/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0U1Z4Y.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600 700;
	src: url(../fonts/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFWkU1Z4Y.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* "Add of type" dropdown buttons (the green "+" that opens a customer/supplier/expense/... create menu) —
   hide the Bootstrap dropdown caret so the plus icon stands alone. The "+ ▾" combo read as confusing
   ("is it add? a menu?"); a clean "+" that opens a menu on click is clearer. Apply .no-caret to the button. */
.dropdown-toggle.no-caret::after { display: none !important; }

/* ═══ Annual-report top navigation bar (b:annualReportTopMenu) ═══════════════════════════
   Horizontal menu shown on every 1301 screen (דוח שנתי → תיאום הוצאות רכב). The current screen
   is a highlighted, non-clickable pill (--active); the rest are clickable links. RTL/LTR-safe
   (flex reverses with page direction; no hardcoded left/right). */
.ar-top-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; width: 100%; }
/* Stretch the subheader chain (main → title → form) to the full row ONLY on annual-report screens
   (scoped via :has(.ar-top-menu)), so the status button's margin-auto can pin it to the far reading-end
   edge (left in RTL) while the nav items stay on the same row at the reading-start edge. */
.kt-subheader__main:has(.ar-top-menu) { flex: 1 1 auto; }
.kt-subheader__title:has(.ar-top-menu) { flex: 1 1 auto; width: 100%; }
.kt-subheader__title:has(.ar-top-menu) > form { flex: 1 1 auto; width: 100%; }
/* The status button itself is pinned to the reading-end (far left in RTL) via an inline
   margin-#{gen.align}:auto in annualReportTopMenu.xhtml — same row as the nav items. */
.ar-top-menu__item {
	display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 6px;
	font-weight: 600; font-size: 1.02rem; color: #5867dd; background: #f0f1f7; border: 1px solid #e2e5ec;
	text-decoration: none; white-space: nowrap; transition: all .15s ease; cursor: pointer;
}
a.ar-top-menu__item:hover { background: #5867dd; color: #fff; border-color: #5867dd; text-decoration: none; }
.ar-top-menu__item--active {
	background: #e8eafc; color: #5867dd; border-color: #c9cef5; cursor: default; font-weight: 700;
}
.ar-top-menu__group { display: inline-flex; align-items: center; gap: 3px; }
.ar-top-menu__caret {
	display: inline-flex; align-items: center; padding: 9px 12px; border-radius: 6px;
	color: #5867dd; background: #f0f1f7; border: 1px solid #e2e5ec; cursor: pointer; transition: all .15s ease;
}
.ar-top-menu__caret:hover, .ar-top-menu__caret[aria-expanded="true"] {
	background: #5867dd; color: #fff; border-color: #5867dd;
}
.ar-top-menu__dd { max-height: 320px; overflow-y: auto; }
/* Capital-gains appendix edit screens: the appendix name shown inline before the year picker
   (moved out of the page header). Sits at the reading-start side of the year row. */
.ar-appendix-title { font-size: 1.25rem; font-weight: 700; color: #48465b; vertical-align: middle; margin-inline-end: 16px; }

/* ── AI generation feedback strip (floating; parallel to the OCR feedback strip) ──
   Shown after a successful AI create on any entry point. Stored on
   ai_prompt_history via /servlets/aiGenerate (feedback op). */
.ai-fb-float {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1090;                 /* above Bootstrap modal (1050) so it sits over the prefilled popup */
	background: #fff;
	border: 1px solid #ebedf2;
	border-radius: 22px;
	box-shadow: 0 6px 24px rgba(0,0,0,.18);
	padding: 8px 14px;
	max-width: 92vw;
	animation: aiFbIn .25s ease-out;
}
.ai-fb-float.ai-fb-leaving { animation: aiFbOut .3s ease-in forwards; }
@keyframes aiFbIn  { from { opacity:0; transform: translate(-50%, 16px); } to { opacity:1; transform: translate(-50%, 0); } }
@keyframes aiFbOut { from { opacity:1; transform: translate(-50%, 0); }  to { opacity:0; transform: translate(-50%, 16px); } }
.ai-fb-row { display:flex; align-items:center; gap:8px; }
.ai-fb-icon { color:#5d78ff; font-size:16px; }
.ai-fb-label { color:#595d6e; font-size:14px; font-weight:500; white-space:nowrap; }
.ai-fb-btn {
	display:inline-flex; align-items:center; justify-content:center;
	width:30px; height:30px; border-radius:50%;
	border:1px solid #ebedf2; color:#595d6e; background:#fff;
	transition: all .15s ease; text-decoration:none;
}
.ai-fb-btn:hover { text-decoration:none; }
.ai-fb-btn.ai-fb-like { color:#0abb87; border-color:#0abb87; }
.ai-fb-btn.ai-fb-like.active, .ai-fb-btn.ai-fb-like:hover { background:#0abb87; color:#fff; }
.ai-fb-btn.ai-fb-dislike { color:#fd397a; border-color:#fd397a; }
.ai-fb-btn.ai-fb-dislike.active, .ai-fb-btn.ai-fb-dislike:hover { background:#fd397a; color:#fff; }
.ai-fb-close { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:#a7abc3; text-decoration:none; }
.ai-fb-close:hover { color:#595d6e; text-decoration:none; }
.ai-fb-reason { margin-top:8px; padding-top:8px; border-top:1px solid #f0f1f5; min-width:280px; }
.ai-fb-reason-title { font-size:14px; font-weight:500; color:#fd397a; margin-bottom:4px; }
.ai-fb-reason-input { width:100%; border:1px solid #ebedf2; border-radius:6px; padding:6px 10px; font-size:14px; resize:vertical; }
.ai-fb-reason-actions { margin-top:6px; text-align:end; }
.ai-fb-reason-save { border-radius:14px; padding:4px 14px; font-size:14px; }
.ai-fb-thanks { color:#0abb87; font-size:14px; font-weight:500; padding:2px 4px; white-space:nowrap; }

/* Supplier-history floating card — customers merge screen (customersContent.xhtml). Shown via showSupplierHistory(). */
.merge-name-cell { display:inline-flex; align-items:center; }
.supplier-history-card { position:fixed; z-index:1100; background:#fff; border:1px solid #ebedf2; border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,0.18); padding:18px 18px 14px; max-width:760px; max-height:72vh; overflow:auto; }
.supplier-history-close { position:absolute; top:8px; inset-inline-end:12px; color:#a7abc3; font-size:1.25rem; line-height:1; }
.supplier-history-close:hover { color:#fd397a; }
.supplier-history-empty { padding:26px 12px; text-align:center; color:#a7abc3; }
.supplier-history-table { width:100%; border-collapse:collapse; margin-top:6px; }
.supplier-history-table thead td { border-bottom:2px solid #ebedf2; padding:7px 12px; white-space:nowrap; }
.supplier-history-table tbody td { border-bottom:1px solid #f0f1f5; padding:7px 12px; }
.supplier-history-table tbody tr:hover { background:#f7f8fa; }
.supplier-history-card-link { margin-top:14px; }

/* =====================================================================
   Help/Support launcher in the header topbar. Opens the help-search typeahead.
   Deliberately a LIGHT "ghost" outline pill in brand INDIGO (#5d78ff) with a
   headset icon — distinct in both color and weight from the solid-pink "חדש"
   action pill so the two are never confused, calm rather than loud, yet crisp
   (full-opacity border+text, not a washed tint). Fills softly on hover/open.
   Indigo reads on the dark-navy header AND the white accountant-logo header.
   The single desktop-topbar launcher also serves mobile — the topbar wraps and
   stays visible down to 320px, so NO separate kt-header-mobile copy is needed
   (a second one caused a duplicate "עזרה" pill in accountant view). (met_layout.xhtml)
   ===================================================================== */
.help-search-launcher .kt-header__topbar-wrapper { cursor: pointer; padding: 0 6px; }
.help-search-launcher__btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 32px !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 13px;
	border-radius: 50rem !important;
	background: transparent;
	border: 1.5px solid #5d78ff;
	transition: background-color .15s ease, color .15s ease;
}
.help-search-launcher__icon { font-size: 1rem; color: #5d78ff; line-height: 1; }
.help-search-launcher__label {
	font-size: .8rem;
	font-weight: 600;
	color: #5d78ff;
	white-space: nowrap;
	line-height: 1;
}
/* hover/open — gentle indigo tint fill; text/icon STAY indigo (never white, so
   the label is readable on both the dark-navy and the white header) */
.help-search-launcher .kt-header__topbar-wrapper:hover .help-search-launcher__btn,
.help-search-launcher.show .help-search-launcher__btn {
	background: rgba(93, 120, 255, 0.14) !important;
	border-color: #4861e6 !important;
}
/* The desktop topbar (kt_header) and its launcher remain visible on mobile (the
   topbar wraps below the mobile header — verified down to 320px), so this single
   launcher serves both desktop and mobile. No separate mobile-header launcher is
   needed (a second one caused a duplicate "עזרה" pill in accountant view). */

/* ===== bankMatch: highlight matched (reconciled) rows ===== */
/* The lone check icon in the actions column was easy to miss. A matched book-entry
   row now gets a soft green tint + a start-side accent bar, and the status badge
   shows the "הותאם" label in success-green — so a matched transaction reads at a
   glance instead of hunting for a small checkmark. Logical properties keep it
   correct in both RTL (he/ar) and LTR (en/ru) with no dir attribute. */
.table tr.bank-match-matched-row > td {
	background-color: #eafaf0 !important;   /* gentle green, wins over table-striped */
}
.table tr.bank-match-matched-row:hover > td {
	background-color: #ddf5e7 !important;   /* slightly deeper on hover */
}
/* start-side accent bar (RTL: right edge, LTR: left edge) on the first cell */
.table tr.bank-match-matched-row > td:first-child {
	border-inline-start: 4px solid #34bfa3 !important;
}
/* the matched status badge — kt-badge--md is a fixed 24px CIRCLE built for a lone
   icon, which clips/wraps a text label. Override it into an auto-width text pill so
   "✓ הותאם" sits on one line inside the narrow actions column. */
td .bank-match-status-badge.kt-badge {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 3px 8px !important;
	border-radius: 12px !important;
	white-space: nowrap !important;
	display: inline-flex !important;
	align-items: center;
	font-size: 0.85rem !important;
	line-height: 1 !important;
	cursor: pointer;
}
.bank-match-status-badge i {
	margin-inline-end: 3px;
}

/* Manual from/to date input fields injected above the custom-range calendars in the global
   date-range picker (dateRangeJS.xhtml). Visible only in custom-range mode (.show-calendar).
   Positioned absolutely over the calendars' side only (the JS sets left/right by direction),
   NOT spanning the ranges menu; the calendars get a top margin to make room. Fields are small
   and styled like columnHeaderFilterDate2 (input-group + form-control-sm + calendar icon). */
.daterangepicker .drp-manual-inputs { display: none; }
.daterangepicker.show-calendar .drp-manual-inputs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: absolute;
	top: 8px;
	z-index: 5;
}
/* two equal cells, each centering its field above its own calendar */
.daterangepicker.show-calendar .drp-manual-inputs .drp-manual-cell {
	flex: 1 1 50%;
	display: flex;
	justify-content: center;
}
.daterangepicker.show-calendar .drp-manual-inputs .form-control {
	width: 130px;
	text-align: center;
	direction: ltr;
}
/* "הצג" button centered on its own row below the two fields */
.daterangepicker.show-calendar .drp-manual-inputs .drp-manual-showrow {
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
	margin-top: 6px;
}
.daterangepicker.show-calendar .drp-manual-inputs .drp-manual-show {
	white-space: nowrap;
}
.daterangepicker.show-calendar .drp-calendar {
	margin-top: 84px;
}
/* Mobile/stacked layout (single column: manual bar -> ranges -> calendars). layoutManualBar() adds
   .drp-manual-stacked when it detects the calendars sit below the ranges. The bar then flows normally
   as the first child (above the ranges) instead of floating absolutely over the calendars, so it no
   longer overlaps the ranges menu, and the calendars need no top gap. */
.daterangepicker.show-calendar.drp-manual-stacked .drp-manual-inputs {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	width: auto;
	padding: 8px 10px 0;
}
.daterangepicker.show-calendar.drp-manual-stacked .drp-calendar {
	margin-top: 0;
}

/* Prominent "amount to close" banner shown above the payments when closing a tax invoice into a receipt
   (documentDetailsPayments.xhtml). Renders inside an .alert-solid-info (dark-text restyle above). */
.closing-amount-banner {
	margin-bottom: 1rem;
}
.closing-amount-banner__text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}
.closing-amount-banner__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}
.closing-amount-banner__title {
	display: flex;
	align-items: center;
	font-size: 1.15rem;
	font-weight: 600;
}
.closing-amount-banner__title i {
	margin-inline-end: 0.5rem;
	font-size: 1.3rem;
}
.closing-amount-banner__caption {
	font-size: 0.9rem;
	opacity: 0.85;
	margin-top: 0.15rem;
}
.closing-amount-banner__amount {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}
.closing-amount-banner__hint {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-size: 0.85rem;
	opacity: 0.9;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.closing-amount-banner__hint i {
	font-size: 0.95rem;
	margin-top: 0.1rem;
	flex-shrink: 0;
}

/* ---- Infinite scroll infrastructure (met:searchTable infinite="true") ----
 * The sentinel sits below the table inside the list's scroll container; its
 * IntersectionObserver (initInfiniteScrollers, script_ms/met/functions.js)
 * triggers the next chunk. While more remains -> subtle spinner; once exhausted
 * -> the animated Maven brand mark (.ms-inf-end) = an elegant "end of list". */
.ms-inf-sentinel {
	width: 100%;
	min-height: 1px;
	text-align: center;
	padding: 6px 0;
}
.ms-inf-spinner {
	color: #a0a0a0;
	font-size: 1.3rem;
	padding: 8px 0;
}
.ms-inf-sentinel[data-hasmore='false'] .ms-inf-spinner {
	display: none;
}
/* Progress caption shown WHILE more remains — "seen X of Y" so the user knows how far they've scrolled.
 * Stays visible under the loading spinner; continuous auto-scroll keeps loading records past it. Same
 * muted tone as the end-text. */
.ms-inf-progress {
	width: 100%;
	text-align: center;
	padding: 2px 0 4px;
}
.ms-inf-progress-text {
	color: #9aa0a8;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2px;
}
/* Inline batch-boundary divider row injected between data rows (the "seen N" message left pinned in
 * place as more records load below it). Reads as a subtle centered separator, not another data row. */
tr.ms-inf-marker > td {
	text-align: center;
	padding: 5px 0;
	background: #f7f8fa;
	border-top: 1px dashed #e2e5ec;
	border-bottom: 1px dashed #e2e5ec;
}
tr.ms-inf-marker:hover > td {
	background: #f7f8fa; /* neutralise table-hover so the divider never looks clickable */
}
/* Optional infra-provided bounded scroll box (only if a page adds this class itself). */
.ms-infinite-container {
	max-height: 65vh;
	overflow-y: auto;
}

/* End-of-list marker — a brand "completion" check: the green Maven checkmark
 * (#40ad4a, same as the app's success checkmark / "בחרת להצליח") drawn in ONCE.
 * Deliberately NOT looping — a one-shot draw reads as "that's the end, all shown",
 * whereas a repeating pulse would look like "still loading more". */
.ms-inf-end {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 14px 0 10px;
	animation: msInfEndIn .4s ease-out both;
}
.ms-inf-end-check { display: block; overflow: visible; }
.ms-inf-check-ring { opacity: .3; animation: msInfRingIn .4s ease-out both; }
.ms-inf-check-mark {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: msInfCheckDraw .45s ease-out .18s forwards;
}
/* Small muted caption under the check — total record count + "you've reached the end".
 * Fades in just after the check finishes drawing, so it reads as a calm, final confirmation. */
.ms-inf-end-text {
	color: #9aa0a8;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .2px;
	text-align: center;
	animation: msInfEndTextIn .4s ease-out .3s both;
}
@keyframes msInfEndIn     { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes msInfRingIn    { from { opacity: 0; } to { opacity: .3; } }
@keyframes msInfCheckDraw { to { stroke-dashoffset: 0; } }
@keyframes msInfEndTextIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ms-inf-end, .ms-inf-check-ring, .ms-inf-end-text { animation: none; }
	.ms-inf-check-mark { animation: none; stroke-dashoffset: 0; }
}