@font-face {
    font-family: 'Public Sans';
    src: url("/jakarta.faces.resource/fonts/public-sans/static/PublicSans-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Public Sans';
    src: url("/jakarta.faces.resource/fonts/public-sans/static/PublicSans-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: url("/jakarta.faces.resource/fonts/public-sans/static/PublicSans-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* l2p-font — composite family: Public Sans for letters/symbols, JetBrains Mono
   for digits (0-9) plus $ and %, split via unicode-range so the browser
   auto-picks those glyphs from JetBrains Mono and everything else from Public Sans.
   The JetBrains Mono faces carry ascent/descent overrides pinned to Public Sans's
   metrics (0.95em / 0.225em): JBM's own metrics are taller, so without them any
   line containing a digit grows its line box — inputs/dropdowns showing e.g.
   "Last 7 Days" rendered taller than digit-free ones. */
@font-face {
    font-family: 'l2p-font';
    src: url("/jakarta.faces.resource/fonts/public-sans/static/PublicSans-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: normal;
    unicode-range: U+00-23, U+26-2F, U+3A-10FFFF;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/jakarta.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: normal;
    unicode-range: U+24-25, U+30-39;
    ascent-override: 95%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/jakarta.faces.resource/fonts/public-sans/static/PublicSans-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 600;
    font-style: normal;
    unicode-range: U+00-23, U+26-2F, U+3A-10FFFF;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/jakarta.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 600;
    font-style: normal;
    unicode-range: U+24-25, U+30-39;
    ascent-override: 95%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/jakarta.faces.resource/fonts/public-sans/static/PublicSans-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: italic;
    unicode-range: U+00-23, U+26-2F, U+3A-10FFFF;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/jakarta.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: italic;
    unicode-range: U+24-25, U+30-39;
    ascent-override: 95%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

/* Active component-theme color — server-rendered from L2pUserPreferences on
   initial load; the bean overrides this via setProperty on AJAX theme change. */
:root {
    --active-theme-color: #42A5F5;

    /* Card surface — Diamond bakes these per scheme in layout-*.css (.card background);
       mirrored here as a token so components can match the cards. */
    --l2p-surface-card: #ffffff;

    /* Radius */
    --l2p-radius-lg:   1.25rem;  /* 20px — cards            */
    --l2p-radius:      0.5rem;   /* 8px  — (spare)          */
    --l2p-radius-md:   0.375rem; /* 6px  — buttons, inputs  */

    /* Shadow scale — matches Tailwind v4 / shadcn (rgb(0 0 0 / a)) */
    --l2p-shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
    --l2p-shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --l2p-shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* Even, all-around soft shadow — cards, topbar, dialog all share this */
    --l2p-shadow-float: 0 0 12px -2px rgb(0 0 0 / 0.12);
}

/* Elements with this style will still show a tooltip even when disabled */
.l2p-show-tooltip {
    pointer-events: all;
}

body .ui-tooltip.l2p-verify-username-tooltip {
  width: 310px;
  max-width: calc(100vw - 2rem);
}

body .ui-tooltip.l2p-verify-username-tooltip .ui-tooltip-text {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
}

.l2p-dashboard-card {
  width:100%; 
  text-align:left; 

}
.l2p-left-border-card {
    position: relative;
    overflow: hidden; 
}

.l2p-fixed-height-text-editor .ql-editor {
	max-height: 350px;
}

body .ui-inputtext.l2p-borderless-input,
body .ui-inputtext.l2p-borderless-input:hover,
body .ui-inputtext.l2p-borderless-input:focus,
body .ui-inputtext.l2p-borderless-input:active,
body .ui-inputtext.l2p-borderless-input.ui-state-focus,
body .ui-inputtext.l2p-borderless-input.ui-state-active {
	/* More specific than the theme and global focus styles. */
	border: none;
	box-shadow: none;
}

/* Keep header width independent of input sizing and saved text length. */
.l2p-views-header-content {
	width: 100%;
	min-width: 0;
}

/* Inputs and output spans share one line box, including when the text is empty. */
body .l2p-views-header-content .l2p-views-header-field {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: calc(1.5em + 1rem);
	margin: 0;
	padding: 0.5rem;
	border: 0;
	font: inherit;
	line-height: 1.5;
	color: inherit;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
}

.l2p-custom-date-options {
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 0.25rem;
	align-items: end;
}

body .l2p-custom-date-edit-button.ui-button {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
}

/* Datatable rows with this style will have no bottom border. Should be applied as a rowStyleClass. */
.ui-datatable .ui-datatable-data > tr.l2p-row-no-bottom-border > td {
	border-bottom-width: 0;
}

/* Email wrapper makes it so text editors can preview signature footers 5/6/2026 - CA */
div.email-editor-wrapper {
    border: 1px solid #ced4da; /* Fallback light border */
    border-radius: 4px;
    overflow: hidden;
}

/* Strip default borders and backgrounds inside the wrapper */
div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-container.ql-snow {
    border: none !important;
    background: transparent !important; /* Forces it to use your native theme background */
}

div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid #ced4da !important;
    background: transparent !important;
}

/* The Dashed Footer Preview */
.email-footer-preview {
    padding: 15px;
    border-top: 1px dashed #ced4da;
    opacity: 0.6; /* Keeps the greyed-out illusion */
    pointer-events: none;
}

/* 
DARK, DIM VERSION 

*/

/* Update Wrapper border */
body.layout-dark div.email-editor-wrapper,
body.layout-dim div.email-editor-wrapper {
    border-color: #606060 !important;
}

/* Update Toolbar separator border */
body.layout-dark div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-toolbar.ql-snow,
body.layout-dim div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-toolbar.ql-snow {
    border-bottom-color: #606060 !important;
}

/* Update Footer dashed border */
body.layout-dark .email-footer-preview,
body.layout-dim .email-footer-preview {
    border-top-color: #606060 !important;
}

/* This fixes checkboxes being set to too small of a value for the label to fit */
.ui-chkbox.labeledCheckbox {
	display: inline-flex;
	width: auto;
	height: auto;
	align-items: center;
}

/* This is for a custom select sort column in payouts.xhtml */
body .ui-datatable thead th.l2p-existing-agents-selection-column {
	width: 3rem;
	min-width: 3rem;
	text-align: left;
	white-space: nowrap;
}

body .ui-datatable thead th.l2p-existing-agents-selection-column .ui-chkbox-all,
body .ui-datatable thead th.l2p-existing-agents-selection-column .ui-chkbox {
	display: inline-flex;
	vertical-align: middle;
}

body .ui-datatable thead th.l2p-existing-agents-selection-column .ui-sortable-column-icon {
	float: right;
	margin: 0.1rem 0 0 0;
}

body .ui-datatable tbody td.l2p-existing-agents-selection-column {
	width: 3rem;
	min-width: 3rem;
	text-align: left;
}

body .ui-datatable.l2p-table-no-header thead {
	display: none;
}
.customers-table-header {
    overflow: visible !important;
}

.activeTab {
  color:#2195ed; 
}

.passiveTab {
  color:#98a4aa; 
}

/*
	This class can be used to give links an underline style
	when the user hovers over them.
*/
a.link-underline-on-hover {
	color: #2196F3;
}
a.link-underline-on-hover:hover {
	text-decoration: underline;
}

/* Keep an icon-only navigation button aligned with a 1.5rem PrimeFaces checkbox. */
body .ui-button.l2p-inline-icon-link.ui-button-icon-only {
	width: 1.5rem;
	height: 1.5rem;
}
body .ui-button.l2p-inline-icon-link.ui-button-icon-only .ui-button-text {
	padding: 0;
}

@-webkit-keyframes modal-in {
  from {
    background-color: transparent;
  }
  to {
    background-color: rgba(0, 0, 0, 0.6);
  }
}
@keyframes modal-in {
  from {
    background-color: transparent;
  }
  to {
    background-color: rgba(0, 0, 0, 0.6);
  }
}
.modal-in {
  -webkit-animation-name: modal-in;
  animation-name: modal-in;
}
.watch-list {
	background-color: #ffe2e3 !important;
	color: #ff4c51 !important;
} 

/* Light mode colors */
.card-icon-VISA-light { color: #1a1f71; }
.card-icon-MC-light   { color: #FF5F00; }
.card-icon-AMEX-light { color: #2e77bb; }
.card-icon-DISC-light { color: #6E6E6E; }
.card-icon-JCB-light  { color: #007bc1; }
.card-icon-OTHER-light { color: #DA1884; }

/* Dark mode overrides */
.card-icon-VISA-dark { color: #ffffff; }
.card-icon-MC-dark   { color: #ffffff; }
.card-icon-AMEX-dark { color: #ffffff; }
.card-icon-DISC-dark { color: #ffffff; }
.card-icon-JCB-dark  { color: #ffffff; }
.card-icon-OTHER-dark { color: #ffffff; }

/* Dim mode overrides */
.card-icon-VISA-dim { color: #ffffff; }
.card-icon-MC-dim   { color: #ffffff; }
.card-icon-AMEX-dim { color: #ffffff; }
.card-icon-DISC-dim { color: #ffffff; }
.card-icon-JCB-dim  { color: #ffffff; }
.card-icon-OTHER-dim { color: #ffffff; }

body .ui-autocomplete.l2p-autocomplete-long-placeholder .ui-autocomplete-input-token {
    width: 100%;
}

body .ui-autocomplete.l2p-autocomplete-long-placeholder .ui-autocomplete-input-token input {
    box-sizing: border-box;
    width: 100%;
}

/* Custom Radio Buttons for merchant app */

/* Hide default radio */
.custom-radio-card .ui-radiobutton-box {
    display: none;
}

/* Card style */
/* wrapper */
.radio-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    align-items: stretch; /* important */
}

/* each grid item */
.custom-radio-card {
    display: flex;
    height: 100%; /* important */
}

/* make label/card stretch */
.card-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex: 1;          /* important */
    min-height: 140px; /* optional fixed equal height */

    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;

    box-sizing: border-box;
}

/* Icon */
.icon {
    font-size: 24px;
    color: #666;
}

.custom-radio-card:has(.ui-state-active) .icon {
    color: #2196F3;
}

/* Title */
.title {
    font-weight: 600;
    font-size: 16px;
}

/* Description */
.desc {
    font-size: 13px;
    color: #777;
}

/* Hover */
.custom-radio-card:not(:has(.ui-state-disabled)) .card-label:hover {
    border-color: #2196F3;
}

.custom-radio-card:has(.ui-state-disabled) .card-label:hover {
    border-color: #ddd;
    background: #f5f5f5;
    box-shadow: none;
}

/* ✅ Selected state (your working solution) */
/* Selected state ONLY when not disabled */
.custom-radio-card:has(.ui-state-active):not(:has(.ui-state-disabled)) .card-label {
    border-color: #2196F3;
    background-color: #F4F8FF;
    box-shadow: 0 2px 8px rgba(33,150,243,0.2);
}

/* Selected icon color ONLY when not disabled */
.custom-radio-card:has(.ui-state-active):not(:has(.ui-state-disabled)) .icon {
    color: #2196F3;
}

.custom-radio-card:has(.ui-state-disabled) .card-label {
    cursor: not-allowed;
    opacity: 0.6;
    border-color: #ddd !important;
    background: #f5f5f5;
}

/* Selected icon color */
.custom-radio-card:has(.ui-state-active) .icon {
    color: #2196F3;
}

/* Optional: subtle click effect */
.card-label:active {
    transform: scale(0.98);
}

/* Tablet */
@media (max-width: 1024px) {
    .radio-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .radio-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .card-label {
        padding: 16px;
    }

    .title {
        font-size: 15px;
    }

    .desc {
        font-size: 12px;
    }
}

@media (max-width: 900px) {
    .radio-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

.radio-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.l2p-text-wrap {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body .ui-button.l2p-button-ellipsis-overflow {
    box-sizing: border-box;
    max-width: 100%;
}

body .ui-button.l2p-button-ellipsis-overflow .ui-button-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Secondary text: muted relative to the theme's own text color, so it adapts
   to every scheme (.text-secondary is not defined by the theme). */
.text-secondary {
    color: color-mix(in srgb, currentColor 60%, transparent);
}

/* ---- Pill segmented control (l2p-pill-select) ------------------------ */
/* Add styleClass="l2p-pill-select" to a p:selectOneButton to render it as a
   single card-like pill. The container owns the card surface, hairline border,
   float shadow and pill radius. Its segments stay borderless and are clipped
   to that pill shape, so the border lands on the outside only and active /
   hover colors reach every edge of it without seams. */

/* The pill itself — chrome matches .card */
body .ui-selectonebutton.l2p-pill-select {
    display: inline-flex;                 /* tight wrap; inline-block leaves a baseline gap */
    align-items: stretch;
    margin: 0.4rem 0;                     /* reserve the height of a date field invisibly   */
    padding: 0;                           /* PrimeFaces adds 1px, leaving an unfilled rim */
    overflow: hidden;                     /* clip segment states to the pill shape          */
    border-radius: 999px;
    background: var(--l2p-surface-card);
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent); /* same hairline as .card */
    box-shadow: var(--l2p-shadow-float);
}
.layout-dark .ui-selectonebutton.l2p-pill-select,
.layout-dim  .ui-selectonebutton.l2p-pill-select {
    box-shadow: 0 0.25rem 1.125rem 0 rgba(0, 0, 0, 0.3); /* heavier dark/dim card shadow */
}

/* Borderless segments let the selected color reach the pill boundary. */
body .ui-selectonebutton.l2p-pill-select .ui-button {
    align-self: stretch;
    margin: 0;
    border: 0 none;
    border-radius: 0 !important;
}
body .ui-selectonebutton.l2p-pill-select .ui-button.ui-state-active {
    background: var(--active-theme-color);
}
body .ui-selectonebutton.l2p-pill-select .ui-button .ui-button-text {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
body .ui-selectonebutton.l2p-pill-select .ui-button:not(.ui-state-active):not(.ui-state-hover) {
    background: transparent;
}

/* ---- Filter chips: status-badge pills in the component color ---------
   The removable "Selected: …" tokens are the p:commandButtons carrying
   styleClass="filter-chip" inside the …selectedChips panels. (The round
   Clear Filters button sharing those panels doesn't carry the class, so
   it needs no excluding here.) Repaint them to match .customer-badge:
   full pill, soft tint, hairline outline in the same color, badge type
   metrics — but keyed to --active-theme-color so the chips follow the
   user's component theme. Values are left in their original case —
   unlike a status label, a chip holds data (monikers, emails, names)
   that uppercasing would mangle.

   The body prefix matters: the theme's state rules (.ui-state-focus,
   .ui-state-active) are body-prefixed too, and these rules must tie or
   beat them so the pill survives focus/press. */
body .ui-button.filter-chip {
    /* !important: the generic .ui-button rule above carries a 4-deep :not()
       chain, which out-specifies this selector on border-radius alone. */
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--active-theme-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--active-theme-color) 40%, transparent);
    color: var(--active-theme-color);
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: background-color 0.2s, border-color 0.2s;
}
body .ui-button.filter-chip.ui-state-hover,
body .ui-button.filter-chip:hover {
    /* Chips are clickable (click removes the filter) — deepen, don't recolor. */
    background: color-mix(in srgb, var(--active-theme-color) 24%, transparent);
    border-color: var(--active-theme-color);
    color: var(--active-theme-color);
}
/* Gray variant; retain the chip's existing tint and hover behavior. */
body .ui-button.filter-chip.l2p-disabled-chip {
    --active-theme-color: #6b7280;
}
/* Badge-tight padding. The theme positions the × absolutely inside the
   button, so the right padding is what reserves its slot plus a 0.4rem
   gap between it and the label. */
body .ui-button.filter-chip.ui-button-text-icon-right .ui-button-text {
    padding: 0.3rem 1.7rem 0.3rem 0.75rem;
}
body .ui-button.filter-chip.ui-button-text-only .ui-button-text {
    padding: 0.3rem 0.75rem;
}
/* The × inherits the chip color, held a step below the 12px label.
   Center it geometrically (top 50% + translate) and then drop it 1px:
   dead-center is optically high — the pi-times ink rides ~1px above the
   optical center of mixed-case Public Sans at this size (measured), and
   1px is the eye-tuned correction. The theme's own centering is a fixed
   -0.5rem margin sized for a 1rem icon (and PF core adds a legacy -.25em
   nudge on .ui-icon) — both wrong for this size. line-height 1 pins the
   box to the glyph so nothing inherited moves it. */
body .ui-button.filter-chip.ui-button-text-icon-right .ui-icon {
    color: inherit;
    font-size: 0.7rem;
    line-height: 1;
    top: calc(50% + 1px);
    margin-top: 0;
    transform: translateY(-50%);
    right: 0.6rem;
}
/* Ajax loading: while the removal request runs, PF prepends a spinner span
   (ui-icon-loading) and keeps the ×. The × rule above also matches the
   spinner, but its translateY centering is destroyed by pi-spin's rotate
   animation (animations override transform), which is what dropped the
   spinner half outside the pill. Center it with offsets instead — no
   transform — and blank the label and × for the duration. visibility, not
   display, so the pill keeps its size and nothing jumps. */
body .ui-button.filter-chip .ui-icon.ui-icon-loading {
    position: absolute;
    top: calc(50% - 0.35rem);
    left: calc(50% - 0.35rem);
    right: auto;
    width: 0.7rem;
    height: 0.7rem;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1;
    transform: none;
}
body .ui-button.filter-chip.ui-state-loading .ui-button-text,
body .ui-button.filter-chip.ui-state-loading .ui-icon:not(.ui-icon-loading) {
    visibility: hidden;
}

/* ---- Opt-in centred paginator, for a paginator in a narrow dialog where sitting
        off to one side is obvious. PrimeFaces lays the bar out as a flex row with
        justify-content: space-between, and gives each of its four corner content
        wrappers min-width: 5em even when they hold nothing. Those empty boxes still
        take their 5em, so the buttons are pushed off centre, and centring the row
        alone does not help because the empty boxes ride along inside it. Collapsing
        them is what actually frees the buttons to sit in the middle. */
body .l2p-centered-paginator .ui-paginator {
    justify-content: center;
}

body .l2p-centered-paginator .ui-paginator .ui-paginator-top-left-content,
body .l2p-centered-paginator .ui-paginator .ui-paginator-top-right-content,
body .l2p-centered-paginator .ui-paginator .ui-paginator-bottom-left-content,
body .l2p-centered-paginator .ui-paginator .ui-paginator-bottom-right-content {
    min-width: 0;
}

body .ui-dialog.l2p-metric-info-dialog .ui-dialog-content {
    padding: 0 1rem 1.5rem;
}

body .ui-dialog.l2p-metric-info-dialog .ui-dialog-content > p:first-child {
    margin-top: 0;
}

body .ui-dialog.l2p-metric-info-dialog .ui-dialog-content > p:last-child {
    margin-bottom: 0;
}

.l2p-merchant-agreement-action {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex: 0 0 auto;
    width: auto;
    min-width: 13rem;
    margin-left: auto;
}

body .ui-button.l2p-merchant-agreement-button {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
}

body .ui-button.l2p-merchant-agreement-button .ui-button-text {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .l2p-merchant-agreement-action {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Shared compact heading used by merchant-detail summary cards and metric
   card titles. This is the reusable form of the CLIENT ID treatment. */
body .l2p-card-label {
    margin: 0;
    color: var(--text-secondary-color, inherit);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Shared dashboard detail label. Use styleClass="l2p-dashboard-stat-label"
   for labels such as Requested, Transactions, and Avg ticket. */
.l2p-dashboard-stat-label {
    display: block;
    margin: 0;
    font-size: 0.9rem !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.65;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}
.l2p-responsive-scroll-table {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.l2p-responsive-scroll-table > .ui-datatable-scrollable-header,
.l2p-responsive-scroll-table > .ui-datatable-scrollable-body,
.l2p-responsive-scroll-table > .ui-datatable-scrollable-footer,
.l2p-responsive-scroll-table > .ui-paginator {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* Keep the OFAC table viewport fluid after the verification card is resized.
   PrimeFaces otherwise leaves the scroll containers at their initialization width. */
.l2p-ofac-history-table {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.l2p-ofac-history-table .ui-datatable-scrollable-header,
.l2p-ofac-history-table .ui-datatable-scrollable-body,
.l2p-ofac-history-table .ui-datatable-scrollable-footer,
.l2p-ofac-history-table .ui-paginator {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/* Reusable sticky (frozen) table column.
   Add styleClass="l2p-sticky-col" to any <p:column> in a scrollable dataTable to pin
   it to the left edge while the rest of the table scrolls horizontally. The first
   pinned column stays at left:0; give each additional pinned column an inline left
   offset equal to the total width of the pinned columns before it, e.g.
   style="left:6rem". Body cells inherit the row background so scrolled columns can't
   bleed through and hover / theme-scheme colors still track; header cells keep the
   theme's own opaque header background. */
.ui-datatable-scrollable-header th.l2p-sticky-col,
.ui-datatable-scrollable-body td.l2p-sticky-col {
	position: sticky;
	left: 0;
	z-index: 2;
}

.ui-datatable-scrollable-body td.l2p-sticky-col {
	background-color: inherit;
}

/* =====================================================================
   Merchant metric cards

   Reusable dashboard card structure. The XHTML supplies labels and values;
   these classes own placement, responsive behavior, and semantic states.
   ===================================================================== */
:root {
    --l2p-metric-positive: #28c76f;
    --l2p-metric-warning: #C63737;
    --l2p-metric-card-accent: var(--active-theme-color);
    --l2p-metric-ach-accent: var(--active-theme-color);
}

.l2p-dashboard-mockup {
    display: grid;
    gap: 0.75rem;
}

/* PrimeFaces 15 renders Skeleton markup and animation, but the older Diamond
   themes bundled with this application do not provide its surface colors.
   Keep the compatibility styling scoped to Merchant Details loading shells. */
.l2p-merchant-skeleton .ui-skeleton {
    background-color: color-mix(in srgb, currentColor 12%, var(--l2p-surface-card));
    border-radius: 16px;
}

.l2p-merchant-skeleton .ui-skeleton::after {
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, #ffffff 65%, transparent),
        transparent
    );
    animation: l2p-merchant-skeleton-wave 1.2s ease-in-out infinite;
}

.layout-wrapper.layout-dark .l2p-merchant-skeleton .ui-skeleton::after,
.layout-wrapper.layout-dim .l2p-merchant-skeleton .ui-skeleton::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.14),
        transparent
    );
}

@keyframes l2p-merchant-skeleton-wave {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.l2p-dashboard-mockup > .card,
.l2p-metric-grid > .card {
    margin-bottom: 0;
}

.l2p-merchant-summary {
    display: grid;
    grid-template-columns: minmax(13rem, 1.2fr) minmax(31rem, 2.5fr) minmax(20rem, 1.6fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.l2p-merchant-summary-single-product {
    grid-template-columns: minmax(13rem, 1fr) max-content;
}

.l2p-merchant-summary-single-product
    > .l2p-merchant-summary-product {
    grid-column: -2 / -1;
}

.l2p-merchant-summary:not(.l2p-merchant-summary-single-product):has(
    .l2p-merchant-summary-product-card
    .l2p-merchant-summary-metric:nth-child(2):last-child
) {
    grid-template-columns:
        minmax(13rem, 1.2fr)
        minmax(20rem, 1.6fr)
        minmax(20rem, 1.6fr);
}

.l2p-merchant-summary-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.75rem;
}

.l2p-merchant-summary-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 50%;
    color: var(--l2p-metric-card-accent);
    background: color-mix(in srgb, var(--l2p-metric-card-accent) 12%, transparent);
}

.l2p-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--l2p-icon-chip-accent);
    background: color-mix(in srgb, var(--l2p-icon-chip-accent) 12%, transparent);
}

.l2p-icon-chip-purple {
    --l2p-icon-chip-accent: #7367f0;
}

.l2p-icon-chip-blue {
    --l2p-icon-chip-accent: #2f8ee5;
}

body .ui-progressbar.l2p-progressbar-complete .ui-progressbar-value {
    background: var(--l2p-metric-positive);
}

.l2p-onboarding-section-title {
    margin: 0 0 .35rem 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
}

.l2p-metric-card-value,
.l2p-metric-card-stat-value {
    font-variant-numeric: tabular-nums;
}

.l2p-merchant-summary-mid {
    margin-top: 0.35rem;
}

.l2p-merchant-summary-product {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding-left: 1rem;
    border-left: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.l2p-merchant-summary-product-name {
    font-weight: 600;
}

.l2p-merchant-summary-product-card .l2p-merchant-summary-product-name {
    color: var(--l2p-metric-card-accent);
}

.l2p-merchant-summary-product-ach .l2p-merchant-summary-product-name {
    color: var(--l2p-metric-ach-accent);
}

.l2p-merchant-summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    gap: 1.25rem;
}

.l2p-merchant-summary-metrics:has(.l2p-merchant-summary-metric:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
}

.l2p-merchant-summary-metric,
.l2p-metric-card-stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.l2p-merchant-summary-identity h5,
.l2p-merchant-summary-metric h5 {
    margin: 0;
}

.l2p-merchant-summary-label {
    margin-bottom: 0.35rem;
    white-space: nowrap;
}

.l2p-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.l2p-metric-grid-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0.75rem;
}

.l2p-metric-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.l2p-metric-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l2p-metric-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 9rem;
    padding: 1rem;
    container-type: inline-size;
}

.l2p-metric-card-row {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.l2p-metric-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.l2p-metric-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 1.75rem;
    gap: 0.5rem;
}

.l2p-metric-card-header:has(.l2p-ach-deposit-disbursement-toggle) {
    flex-wrap: wrap;
}

body .ui-selectonebutton.l2p-ach-deposit-disbursement-toggle {
    flex: 0 0 auto;
}

body .l2p-metric-card-header .customer-badge {
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.l2p-metric-card-value {
    margin: 0.5rem 0 0;
}

.l2p-metric-card-value-warning,
.l2p-metric-card-stat-value-warning,
.l2p-metric-card-trend-negative {
    color: var(--l2p-metric-warning);
}

.l2p-metric-card-stat-value-positive,
.l2p-metric-card-trend-positive {
    color: var(--l2p-metric-positive);
}

.l2p-metric-card-trend {
    margin-top: 0.4rem;
    line-height: 1.35;
}

.l2p-metric-card-trend-up::before {
    content: "\2191";
    margin-right: 0.25rem;
}

.l2p-metric-card-trend-down::before {
    content: "\2193";
    margin-right: 0.25rem;
}

.l2p-metric-card-details {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, max-content);
    align-items: end;
    justify-content: start;
    gap: clamp(0.75rem, 1.4vw, 1.5rem);
    margin-top: auto;
    padding-top: 1rem;
}

.l2p-metric-grid-cols-3 > .l2p-metric-card {
    min-height: 7.5rem;
}

@container (min-width: 460px) {
    .l2p-metric-card-row {
        position: relative;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-end;
        gap: 1.5rem;
    }

    .l2p-metric-card-body {
        flex: 1 1 auto;
    }

    .l2p-metric-card-header {
        justify-content: flex-start;
    }

    .l2p-metric-card-row
        .l2p-metric-card-header
        .customer-badge,
    .l2p-metric-card-row
        .l2p-metric-card-header
        .l2p-metric-card-toggle {
        position: absolute;
        top: 0;
        right: 0;
    }

    .l2p-metric-card-row:has(.customer-badge),
    .l2p-metric-card-row:has(.l2p-metric-card-toggle) {
        padding-right: 8.5rem;
    }

    .l2p-metric-card-details {
        align-self: flex-end;
        flex: 0 0 auto;
        margin-top: 0;
        padding-top: 0;
    }
}

.l2p-metric-card-stat-value {
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.l2p-metric-card-stat-label {
    margin-top: 0.35rem;
    white-space: nowrap;
}

.l2p-metric-card-details-rates .l2p-metric-card-stat-label {
    order: -1;
    margin: 0 0 0.45rem;
}

.l2p-metric-card-risk-dot {
    font-size: 0.65rem;
    margin-right: 0.35rem;
}

.l2p-metric-card-risk-dot-healthy {
    color: #28c76f;
}

.l2p-metric-card-risk-dot-monitor {
    color: #ffb822;
}

.l2p-metric-card-risk-dot-action-needed {
    color: #ea5455;
}

@media screen and (max-width: 1550px) {
	.l2p-merchant-summary:not(.l2p-merchant-summary-single-product):has(
	    .l2p-merchant-summary-product-card
	    .l2p-merchant-summary-metric:nth-child(2):last-child
	) {
		grid-template-columns: minmax(13rem, 1fr) minmax(0, 2fr);
	}

	.l2p-merchant-summary:not(.l2p-merchant-summary-single-product):has(
	    .l2p-merchant-summary-product-card
	    .l2p-merchant-summary-metric:nth-child(2):last-child
	) > .l2p-merchant-summary-identity {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.l2p-merchant-summary:not(.l2p-merchant-summary-single-product):has(
	    .l2p-merchant-summary-product-card
	    .l2p-merchant-summary-metric:nth-child(2):last-child
	) > :is(
	    .l2p-merchant-summary-product-card,
	    .l2p-merchant-summary-product-ach
	) {
		grid-column: 2;
		grid-row: auto;
		grid-template-columns: max-content minmax(0, 1fr);
		padding: 0 0 0 1rem;
		border-top: 0 none;
		border-left: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	}
}

@media screen and (max-width: 1280px) {
	.l2p-merchant-summary {
		grid-template-columns: minmax(13rem, 1fr) minmax(28rem, 2fr);
	}
	
	.l2p-merchant-summary-product-ach {
		grid-column: 1/-1;
	}

	.l2p-merchant-summary-single-product
	    .l2p-merchant-summary-product-ach {
		grid-column: auto;
	}
	
	.l2p-metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.l2p-metric-grid-preview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.l2p-metric-grid-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Trend graph + payment methods stack once the metric tiles drop to 2 columns */
	.dashboard-trend-column,
	.dashboard-payment-method-column {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media screen and (max-width: 900px){
    .l2p-merchant-summary {
        grid-template-columns: 1fr;
    }

    .l2p-merchant-summary-product,
    .l2p-merchant-summary-product-ach {
        grid-column: auto;
        padding: 1rem 0 0;
        border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
        border-left: 0 none;
    }

    .l2p-merchant-summary:not(.l2p-merchant-summary-single-product):has(
        .l2p-merchant-summary-product-card
        .l2p-merchant-summary-metric:nth-child(2):last-child
    ) {
        grid-template-columns: 1fr;
    }

    .l2p-merchant-summary:not(.l2p-merchant-summary-single-product):has(
        .l2p-merchant-summary-product-card
        .l2p-merchant-summary-metric:nth-child(2):last-child
    ) > .l2p-merchant-summary-identity {
        grid-column: auto;
        grid-row: auto;
    }

    .l2p-merchant-summary:not(.l2p-merchant-summary-single-product):has(
        .l2p-merchant-summary-product-card
        .l2p-merchant-summary-metric:nth-child(2):last-child
    ) > :is(
        .l2p-merchant-summary-product-card,
        .l2p-merchant-summary-product-ach
    ) {
        grid-column: auto;
        grid-row: auto;
        padding: 1rem 0 0;
        border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
        border-left: 0 none;
    }

    .l2p-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l2p-metric-grid-preview {
        grid-template-columns: 1fr;
    }

    .l2p-metric-grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .l2p-merchant-summary-product {
        grid-template-columns: 1fr;
    }

    .l2p-merchant-summary-metrics,
    .l2p-merchant-summary-product-ach .l2p-merchant-summary-metrics {
        grid-template-columns: 1fr;
    }

    .l2p-metric-grid {
        grid-template-columns: 1fr;
    }

    .l2p-metric-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ---- ACH Bank Activity report (client/report/achBankActivity.xhtml) --- */
/* The detail (expansion) table uses PrimeFaces scrollable="true" for its frozen
   header + single horizontal scrollbar, and resizableColumns for adjustable
   widths — no custom header/overflow CSS needed. */

/* Stat-card icon badge — tinted with the active theme color. */
.stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 12px; flex-shrink: 0;
    background: color-mix(in srgb, var(--active-theme-color) 15%, transparent);
    color: var(--active-theme-color); font-size: 1.2rem;
}

/* Signed amounts — reserve-history convention (green in / red out). */
.amount-positive { color: #22C55E; font-weight: bold; }
.amount-negative { color: #EF4444; font-weight: bold; }

/* ---- Navigation landing pages (Merchant Sidebar Consolidation) ---- */
a.nav-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    height: 100%;
    min-height: 11.5rem;
}
a.nav-card > p {
    flex: 1 1 auto;
}
a.nav-card:hover {
    border-color: var(--active-theme-color);
}
.nav-card-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--active-theme-color);
    font-weight: 600;
}
a.nav-card:hover .nav-card-link {
    text-decoration: underline;
}

/* Favorite controls sit beside the card link so they remain valid, independent UI inputs. */
.favorite-nav-card {
    position: relative;
}

.favorite-nav-card-badge {
    position: absolute;
    top: 1.25rem;
    right: 3.25rem;
    z-index: 1;
}

.favorite-toggle-form {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    margin: 0;
}

/* Favorite checkbox styling uses the same PrimeIcons glyphs as p:rating. */
body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
    position: static;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    line-height: 1.25rem;
}

body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box .ui-chkbox-icon::before,
body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before {
    content: "\e936";
    font-family: 'primeicons' !important;
    font-size: 1.25rem;
    line-height: 1.25rem;
}

body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box.ui-state-hover {
    border-color: transparent;
    background: var(--surface-100);
    color: var(--active-theme-color);
    transform: translateY(-1px);
}

body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box.ui-state-focus {
    box-shadow: 0 0 0 2px var(--active-theme-color);
}

body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box.ui-state-active {
    border-color: transparent;
    background: var(--surface-100);
    color: var(--active-theme-color);
}

body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon::before,
body .l2p-favorite-toggle.ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon.ui-icon-check::before {
    content: "\e937";
}

body .l2p-favorite-toggle.ui-chkbox.ui-state-disabled .ui-chkbox-box {
    cursor: default;
    opacity: 0.5;
}

/* Keep the checkbox's text available to assistive technology without showing it on the card. */
body .l2p-favorite-toggle .ui-chkbox-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Reusable inline status list ---- */
.l2p-inline-status-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.l2p-inline-status-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.l2p-inline-status-label {
    font-weight: 700;
}

.l2p-merchant-detail-metrics > [class*="p-col"] {
    display: flex;
	flex: 1 1 200px !important;
	min-width: 200px !important;
}

.l2p-merchant-detail-metrics > [class*="p-col"] > .card {
    width: 100%;
    height: 100%;
}

.l2p-merchant-detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.l2p-merchant-tag-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.l2p-merchant-tag-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.l2p-merchant-tag-category-label {
    color: var(--text-color);
    font-weight: 700;
    white-space: nowrap;
}

.l2p-merchant-tag-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.l2p-merchant-tag-controls .l2p-merchant-tag-list {
    margin-left: 0;
}

.l2p-merchant-lien-warning {
	display: flex;
	width: 100%;
	margin-top: 0.75rem;
}

.l2p-merchant-tag-placeholder {
    color: var(--text-color-secondary);
    font-size: 0.875rem;
}

body .customer-badge.l2p-merchant-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-color);
    background: transparent;
    border-color: var(--surface-border);
    text-transform: none;
    white-space: nowrap;
}

.l2p-merchant-tag-badge::before {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--l2p-merchant-tag-color, #42A5F5);
    flex: 0 0 0.6rem;
}

.l2p-merchant-tag-editor-description {
    display: block;
    margin-bottom: 1rem;
    color: var(--text-color-secondary);
}

body .ui-dialog.l2p-merchant-tag-editor-dialog {
    max-height: calc(100vh - 2rem);
}

body .ui-dialog.l2p-merchant-tag-editor-dialog .ui-dialog-content {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

.l2p-merchant-tag-category {
    padding: 0.9rem 0;
    border-top: 1px solid var(--surface-border);
}

.l2p-merchant-tag-category:first-of-type {
    padding-top: 0;
    border-top: 0 none;
}

.l2p-merchant-tag-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.l2p-merchant-tag-category-header::before {
    content: "\f5fd";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.65rem;
    height: 0.65rem;
    color: var(--l2p-merchant-tag-color, #42A5F5);
    font-family: "Font Awesome 7 Pro";
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    flex: 0 0 0.65rem;
}

.l2p-merchant-tag-option-color {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background-color: var(--l2p-merchant-tag-color, #42A5F5);
    flex: 0 0 0.65rem;
}

.l2p-merchant-tag-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
    padding-left: 1.15rem;
}

.l2p-merchant-tag-option {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.55rem;
}

.l2p-merchant-tag-option label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.l2p-affiliate-merchant-map {
    min-height: 24rem;
}

@media screen and (max-width: 768px) {
    .l2p-merchant-detail-summary,
    .l2p-merchant-tag-list {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .l2p-merchant-tag-list {
        width: 100%;
        margin-left: 0;
    }

    .l2p-merchant-tag-controls {
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        margin-left: 0;
    }

    .l2p-merchant-tag-controls .l2p-merchant-tag-list {
        width: auto;
    }

    .l2p-merchant-tag-options {
        grid-template-columns: 1fr;
    }
}

/* ---- Tag Manager inline category tree ---- */
.l2p-tag-manager-card {
    width: min(100%, 900px);
}

.l2p-tag-manager-create {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.l2p-tag-manager-create > .ui-inputfield {
    width: min(100%, 28rem);
}

.l2p-tag-tree {
    overflow: hidden;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--surface-card);
}

.l2p-tag-tree-header,
.l2p-tag-tree-row {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) 8rem 6.5rem;
    align-items: center;
    column-gap: 0.75rem;
}

.l2p-tag-tree-header {
    padding: 0.75rem 1rem 0.75rem 3.4rem;
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-50);
    font-weight: 700;
}

.l2p-tag-tree-category + .l2p-tag-tree-category {
    border-top: 1px solid var(--surface-border);
}

.l2p-tag-tree-row {
    position: relative;
    min-height: 3.25rem;
    padding: 0.45rem 1rem;
}

.l2p-tag-tree-category-row {
    padding-left: 0.75rem;
    background: var(--surface-0);
    grid-template-columns: 1.65rem minmax(15rem, 1fr) 8rem 6.5rem;
}

.l2p-tag-tree-tag-row,
.l2p-inline-tag-add {
    padding-left: 4.5rem;
}

.l2p-tag-tree-tag-row::before,
.l2p-inline-tag-add::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 2.15rem;
    width: 1.45rem;
    border-bottom: 1px solid var(--surface-border);
    border-left: 1px solid var(--surface-border);
    border-bottom-left-radius: 6px;
}

.l2p-tag-tree-tag-row:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: -50%;
    left: 2.15rem;
    border-left: 1px solid var(--surface-border);
}

.l2p-tag-tree-tag-row + .l2p-tag-tree-tag-row,
.l2p-inline-tag-add {
    border-top: 1px solid var(--surface-border);
}

.l2p-tag-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color-secondary);
    cursor: pointer;
}

.l2p-tag-tree-toggle:hover {
    background: var(--surface-100);
    color: var(--text-color);
}

.l2p-tag-tree-toggle i {
    font-size: 0.75rem;
}

.l2p-tag-tree-name-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.6rem;
}

.l2p-tag-tree-name {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.55rem !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: text;
}

.l2p-tag-tree-name:hover {
    border-color: var(--surface-border) !important;
    background: var(--surface-0) !important;
}

.l2p-tag-tree-name:focus {
    border-color: var(--primary-color) !important;
    background: var(--surface-0) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
}

.l2p-tag-tree-category-name {
    font-weight: 700;
}

.l2p-tag-tree-created {
    color: var(--text-color-secondary);
    white-space: nowrap;
}

.l2p-tag-tree-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.l2p-tag-tree-children {
    overflow: hidden;
}

.l2p-tag-tree-children-collapsed {
    display: none;
}

.l2p-inline-tag-add {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--surface-50);
}

.l2p-inline-tag-add > .l2p-tag-tree-name-cell {
    flex: 0 1 28rem;
    width: min(100%, 28rem);
}

.l2p-inline-tag-add > span:empty {
    display: none;
}

.l2p-inline-tag-add .l2p-color-input-group > .ui-inputfield {
    width: 100% !important;
}

.l2p-inline-tag-actions {
    justify-content: flex-start;
    width: max-content;
    flex: 0 0 auto;
}

.l2p-tag-tree-empty {
    padding: 2rem 1rem;
    color: var(--text-color-secondary);
    text-align: center;
}

@media screen and (max-width: 640px) {
    .l2p-tag-manager-create {
        align-items: stretch;
        flex-direction: column;
    }

    .l2p-tag-manager-create > .ui-inputfield {
        width: 100%;
    }

    .l2p-tag-tree-header {
        display: none;
    }

    .l2p-tag-tree-row,
    .l2p-tag-tree-category-row {
        grid-template-columns: 1.65rem minmax(0, 1fr) auto;
        gap: 0.35rem;
    }

    .l2p-tag-tree-tag-row,
    .l2p-inline-tag-add {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .l2p-tag-tree-created {
        display: none;
    }

    .l2p-tag-tree-tag-row,
    .l2p-inline-tag-add {
        padding-left: 3.6rem;
    }

    .l2p-inline-tag-add > span:empty {
        display: none;
    }
}

/* Merchant Details address map dialog */
.l2p-merchant-map-data {
	display: none !important;
}

body .l2p-merchant-map-dialog .ui-dialog-content {
	padding: 0;
}

.l2p-merchant-map-canvas {
	height: 420px;
	width: 100%;
}

.l2p-merchant-map-message {
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 2rem;
	color: var(--text-secondary-color);
	text-align: center;
}

@media screen and (max-width: 640px) {
	.l2p-merchant-map-canvas {
		height: 340px;
	}
}

/* ---- Reusable color value and picker field helpers ---- */
.l2p-color-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.l2p-color-swatch {
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--surface-border);
    border-radius: 50%;
    flex: 0 0 1.1rem;
}

.l2p-color-swatch-button {
    display: inline-block;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.l2p-color-swatch-button:hover {
    transform: scale(1.12);
}

.l2p-color-input-group {
    position: relative;
    width: 100%;
}

.l2p-color-input-group > .ui-inputfield {
    width: 100% !important;
    padding-right: 2.75rem;
}

.l2p-color-trigger {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.l2p-color-trigger:hover {
    background: transparent;
}

.l2p-current-color-box {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.l2p-category-color-button,
.l2p-category-color-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.l2p-category-color-button {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    text-decoration: none;
}

.l2p-category-color-button i {
    font-size: 1.1rem;
    line-height: 1;
}

.l2p-category-color-trigger i {
    font-size: 1.25rem;
    line-height: 1;
}

.l2p-color-palette-overlay .ui-overlaypanel-content {
    padding: 0.65rem;
}

.l2p-color-palette-options {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.l2p-color-palette-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.l2p-color-palette-option:hover {
    transform: scale(1.12);
}

.l2p-color-palette-option i {
    color: #fff;
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.l2p-color-palette-selected {
    box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--primary-color);
}

.l2p-color-palette-separator {
    flex: 0 0 1px;
    align-self: center;
    width: 1px;
    height: 1.5rem;
    margin: 0 0.25rem;
    background: var(--surface-300, #d1d5db);
}

.clr-field:has(> input.l2p-custom-color-picker) {
    display: inline-flex !important;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    vertical-align: middle;
}

.clr-field > input.l2p-custom-color-picker {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.clr-field:has(> input.l2p-custom-color-picker) > button {
    inset: 0;
    transform: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--surface-border);
    border-radius: 50%;
    background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.clr-field:has(> input.l2p-custom-color-picker) > button::after {
    content: none !important;
    display: none !important;
}

body .clr-picker.l2p-tag-color-picker-popup {
    z-index: 12000 !important;
}

/* ---- Manage Merchants tag filter ---- */
.l2p-tag-filter-menu {
    width: 100%;
    margin-top: 0.4rem;
}

.l2p-tag-filter-selection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

body .l2p-tag-filter-selected-badge::before {
    display: none;
}

body .layout-light .customer-badge.l2p-tag-filter-selected-badge {
    border-color: #ced4da;
}

body .layout-dim .customer-badge.l2p-tag-filter-selected-badge {
    border-color: #304562;
}

body .layout-dark .customer-badge.l2p-tag-filter-selected-badge {
    border-color: #383838;
}

body .l2p-tag-filter-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: -1;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0;
    color: transparent;
    background-color: var(--l2p-merchant-tag-color, #42A5F5);
    border-radius: 50%;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 0.75rem;
    pointer-events: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body .l2p-tag-filter-selected-badge:hover .l2p-tag-filter-remove,
body .l2p-tag-filter-selected-badge:focus-within .l2p-tag-filter-remove {
    color: var(--red-500, #ef4444);
    background-color: transparent;
    pointer-events: auto;
}

body .l2p-tag-filter-remove:hover,
body .l2p-tag-filter-remove:focus {
    color: var(--red-500, #ef4444);
    background-color: transparent;
    text-decoration: none;
}

@media (hover: none) {
    body .l2p-tag-filter-remove {
        color: var(--red-500, #ef4444);
        background-color: transparent;
        pointer-events: auto;
    }
}

.l2p-tag-filter-selection-empty {
    display: none;
}

.l2p-tag-filter-menu .ui-menu-list,
.l2p-tag-filter-menu .ui-menu-child {
    width: 100%;
}

.l2p-tag-filter-menu .ui-menuitem-link {
    display: flex;
    align-items: center;
}

.l2p-tag-filter-category > .ui-menuitem-link::before {
    content: "\f5fd";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.5rem 0 0;
    color: var(--l2p-tag-category-color, #42A5F5);
    font-family: "Font Awesome 7 Pro";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    flex: 0 0 0.75rem;
    order: -1;
}

body .l2p-tag-filter-menu .l2p-tag-filter-category > .ui-menuitem-link {
    display: flex !important;
    align-items: center;
    column-gap: 0.65rem;
}

.l2p-tag-filter-category > .ui-menuitem-link > .ui-icon-triangle-1-e,
.l2p-tag-filter-category > .ui-menuitem-link > .ui-icon-triangle-1-w,
.l2p-tag-filter-category > .ui-menuitem-link > .ui-submenu-icon {
    position: static !important;
    float: none !important;
    right: auto !important;
    left: auto !important;
    order: -2;
    width: 1rem;
    margin: 0 0.15rem 0 0 !important;
    flex: 0 0 1rem;
    text-align: center;
}

.l2p-tag-filter-category > .ui-menuitem-link > .ui-icon-triangle-1-e {
    transform: rotate(180deg);
}

body .l2p-tag-filter-menu .l2p-tag-filter-item .ui-menuitem-text {
    display: flex;
    align-items: center;
    width: 100%;
    column-gap: 0.6rem;
}

body .l2p-tag-filter-menu .l2p-tag-filter-checkbox {
    margin: 0;
    flex: 0 0 1.5rem;
}

.l2p-tag-filter-option-color {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex: 0 0 0.75rem;
}

body .l2p-tag-filter-menu .ui-menuitem-link:hover .l2p-tag-filter-checkbox .ui-chkbox-box {
    border-color: var(--primary-color);
}

body .l2p-tag-filter-menu .l2p-tag-filter-select-all .ui-chkbox-box:not(.ui-state-active) .ui-icon-minus {
    color: var(--text-color-secondary, #6c757d);
    font-family: 'primeicons' !important;
    text-indent: 0 !important;
    background-image: none !important;
}

body .l2p-tag-filter-menu .l2p-tag-filter-select-all .ui-chkbox-box:not(.ui-state-active) .ui-icon-minus::before {
    content: "\e90f";
}

.l2p-tag-filter-menu .l2p-tag-filter-select-all {
    border-bottom: 1px solid var(--surface-border);
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    .l2p-tag-filter-menu .l2p-tag-filter-category {
        position: relative;
    }

    .l2p-tag-filter-menu .l2p-tag-filter-category > .ui-menu-child {
        top: 100% !important;
        right: auto !important;
        left: 0 !important;
        margin: 0 !important;
        min-width: 100%;
        z-index: 1001;
    }

    .l2p-tag-filter-category > .ui-menuitem-link > .ui-icon-triangle-1-e,
    .l2p-tag-filter-category > .ui-menuitem-link > .ui-icon-triangle-1-w,
    .l2p-tag-filter-category > .ui-menuitem-link > .ui-submenu-icon {
        order: -2;
        margin: 0 0.15rem 0 0 !important;
    }

    .l2p-tag-filter-category > .ui-menuitem-link > .ui-icon-triangle-1-e {
        transform: rotate(90deg);
    }

    .l2p-tag-filter-category > .ui-menuitem-link > .ui-icon-triangle-1-w {
        transform: rotate(-90deg);
    }
}

/* ---- Merchant dashboard trend graphs ---------------------------------- */
/* The tabView only drives the graph selection; its (empty) panels stay hidden and the
   container/nav chrome is removed so only the tab buttons show inside the card. */
body .ui-tabs.dashboard-trend-tabview,
body .ui-tabs.dashboard-trend-tabview .ui-tabs-nav {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Keep informational icons aligned with the active portal theme. */
.l2p-merchant-details-page .fa-circle-info,
.l2p-merchant-details-page .fa-info-circle,
.l2p-merchant-details-page .pi-info-circle,
.l2p-partner-details-page .fa-circle-info,
.l2p-partner-details-page .fa-info-circle,
.l2p-partner-details-page .pi-info-circle,
.l2p-agent-details-page .fa-circle-info,
.l2p-agent-details-page .fa-info-circle,
.l2p-agent-details-page .pi-info-circle {
    color: var(--active-theme-color, var(--primary-color)) !important;
}

/* Affiliate/Admin merchant details: read-only CC, ACH, and RDC values should read as
   content, not as unavailable form controls. The form drops this class as soon
   as Edit is selected, restoring the normal PrimeFaces control presentation. */
.l2p-merchant-details-page .l2p-details-view-mode .ui-inputfield.ui-state-disabled {
    width: auto !important;
    max-width: 100%;
    min-height: 0;
    padding: .45rem 0 !important;
    color: var(--text-color) !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

.l2p-merchant-details-page .l2p-details-view-mode .ui-inputfield.ui-state-disabled::placeholder {
    color: var(--text-color-secondary, #6c757d) !important;
    opacity: 1 !important;
}

.l2p-merchant-details-page .l2p-details-view-mode .ui-inputnumber {
    display: block;
    width: auto !important;
    max-width: 100%;
}

.l2p-merchant-details-page .l2p-details-view-mode .ui-selectonemenu.ui-state-disabled {
    display: block;
    width: auto !important;
    max-width: 100%;
    min-height: 0;
    color: var(--text-color) !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

.l2p-merchant-details-page .l2p-details-view-mode .ui-selectonemenu.ui-state-disabled .ui-selectonemenu-label {
    padding: .45rem 0 !important;
    color: var(--text-color) !important;
    background: transparent !important;
    opacity: 1 !important;
}

.l2p-merchant-details-page .l2p-details-view-mode .ui-selectonemenu.ui-state-disabled .ui-selectonemenu-trigger {
    display: none !important;
}

.l2p-merchant-details-page .l2p-details-view-mode .l2p-readonly-rendered > :not(.l2p-readonly-display) {
    display: none !important;
}

.l2p-merchant-details-page .l2p-details-view-mode .l2p-readonly-display {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    width: 100% !important;
    min-width: 0;
    row-gap: .3rem;
    padding: .35rem 0;
    line-height: 1.4;
}

.l2p-merchant-details-page .l2p-details-view-mode .l2p-readonly-key {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.l2p-merchant-details-page .l2p-details-view-mode .l2p-readonly-value {
    min-width: 0;
    font-weight: 400;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.l2p-merchant-details-page .l2p-details-settings-form .l2p-details-field {
    font-weight: 700;
}

.l2p-merchant-details-page .l2p-details-settings-form .l2p-details-field .ui-inputfield,
.l2p-merchant-details-page .l2p-details-settings-form .l2p-details-field .ui-selectonemenu,
.l2p-merchant-details-page .l2p-details-settings-form .l2p-details-field .ui-selectonemenu-label,
.l2p-merchant-details-page .l2p-details-settings-form .l2p-details-field [id$="Cnt"] {
    font-weight: 400;
}

.l2p-merchant-details-page .l2p-details-view-mode textarea.ui-inputfield.ui-state-disabled {
    height: auto;
    min-height: 2.25rem;
    white-space: pre-wrap;
}

body .ui-tabs.dashboard-trend-tabview .ui-tabs-nav:before {
    display: none; /* Diamond's full-width underline; the active tab keeps its own */
}
body .ui-tabs.dashboard-trend-tabview .ui-tabs-panels {
    display: none;
}
body .ui-tabs.dashboard-trend-tabview .ui-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
}
body .ui-tabs.dashboard-trend-tabview .ui-tabs-nav li.ui-tabs-header {
    flex: 0 0 auto;
}
body .ui-tabs.dashboard-trend-tabview .ui-tabs-nav li.ui-tabs-header a {
    white-space: nowrap;
}
.dashboard-payment-method-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, max-content) 3.25rem;
    column-gap: .75rem;
    align-items: center;
    padding: .6rem 0; /* vertical spacing between rows - adjust here */
}
.dashboard-payment-method-row > :nth-child(2),
.dashboard-payment-method-row > :nth-child(3) {
    text-align: right;
    white-space: nowrap;
}
.dashboard-payment-method-row + .dashboard-payment-method-row {
    border-top: 1px solid rgba(148, 163, 184, .25);
}
.dashboard-payment-method-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .ui-datatable.l2p-table-left-align-footer tfoot > tr > td {
    text-align: left;
}

/* 
	Class l2p-table-horizontal-scroll ensures a table is horizontal-scrollable 
	if it does not fit in its container, and its contents do not wrap 
*/
body .ui-datatable.l2p-table-horizontal-scroll div.ui-datatable-tablewrapper {
    overflow-x: auto;
    table {
	    display: table;
	    table-layout: auto;
	    width: 100%;
		th,
		td {
			width: 1px;
			white-space: nowrap;
		}
	}
}

/* ---- Merchant Analytics (client/report/analytics.xhtml) ----
   Layout from demo/analyticsMockup.xhtml. The heat map and busiest lists are plain markup filled
   by ui:repeat, so their look lives here instead of in script. */
#merchantAnalytics .analytics-card-label,
#merchantAnalytics .analytics-card-title {
    display: flex;
    align-items: center;
    gap: .25rem;
}
#merchantAnalytics .analytics-full-height {
    height: 100%;
}
#merchantAnalytics .analytics-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
#merchantAnalytics .analytics-unavailable {
    margin: 0;
    color: var(--text-secondary-color, var(--text-color-secondary));
}
#merchantAnalytics .analytics-summary-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
#merchantAnalytics .analytics-summary-value {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Same series colors as the Lost Revenue chart (MerchantAnalyticsBean) */
#merchantAnalytics .analytics-color-refund {
    color: #f59e0b;
}
#merchantAnalytics .analytics-color-chargeback {
    color: #ef4444;
}
#merchantAnalytics .analytics-color-ach-return {
    color: #7c3aed;
}
#merchantAnalytics .analytics-heatmap-scroll {
    overflow-x: auto;
    padding: .25rem 0 .5rem;
}
#merchantAnalytics .analytics-heatmap-grid {
    display: grid;
    grid-template-columns: 2.5rem repeat(24, minmax(.45rem, 1fr));
    column-gap: .12rem;
    row-gap: .22rem;
    align-items: center;
    width: 100%;
    min-width: 330px;
}
#merchantAnalytics .analytics-heatmap-hour,
#merchantAnalytics .analytics-heatmap-day {
    font-size: .68rem;
    color: var(--text-secondary-color, var(--text-color-secondary));
}
#merchantAnalytics .analytics-heatmap-hour {
    text-align: center;
}
#merchantAnalytics .analytics-heatmap-day {
    font-weight: 600;
}
#merchantAnalytics .analytics-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    transition: box-shadow .15s ease;
}
/* Highlight only. A scale transform here pushed the last column past the scroll container's edge,
   which made the heat map scroll horizontally while hovering it. */
#merchantAnalytics .analytics-heatmap-cell:hover {
    box-shadow: var(--l2p-shadow-float);
}
/* INTENSITY 0 - 4 from L2P_GET_CLIENT_ANALYTICS_PEAK_HOURS_ */
#merchantAnalytics .analytics-heatmap-level-0 { background: color-mix(in srgb, var(--active-theme-color) 7%, transparent); }
#merchantAnalytics .analytics-heatmap-level-1 { background: color-mix(in srgb, var(--active-theme-color) 18%, transparent); }
#merchantAnalytics .analytics-heatmap-level-2 { background: color-mix(in srgb, var(--active-theme-color) 38%, transparent); }
#merchantAnalytics .analytics-heatmap-level-3 { background: color-mix(in srgb, var(--active-theme-color) 65%, transparent); }
#merchantAnalytics .analytics-heatmap-level-4 { background: var(--active-theme-color); }
#merchantAnalytics .analytics-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    margin-top: .75rem;
}
#merchantAnalytics .analytics-heatmap-legend-box {
    width: .8rem;
    height: .8rem;
    border-radius: 2px;
}
#merchantAnalytics .analytics-progress-list {
    display: grid;
    gap: .8rem;
}
#merchantAnalytics .analytics-progress-row {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr) 4.25rem;
    align-items: center;
    gap: .75rem;
}
/* Hour ranges ("11 AM - 12 PM") need a wider label column than weekday names */
#merchantAnalytics .analytics-progress-list-hours .analytics-progress-row {
    grid-template-columns: 6.75rem minmax(0, 1fr) 4.25rem;
}
#merchantAnalytics .analytics-progress-label,
#merchantAnalytics .analytics-progress-value {
    font-size: .75rem;
    color: var(--text-secondary-color, var(--text-color-secondary));
}
#merchantAnalytics .analytics-progress-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
#merchantAnalytics .analytics-progress-track {
    height: .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    overflow: hidden;
}
#merchantAnalytics .analytics-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--active-theme-color);
}

/* Preserve the normal menu background while applying the theme button color to its label and icon. */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.l2p-menu-action {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    column-gap: 0.5rem;
    justify-content: stretch;
    text-align: left;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-button.l2p-menu-action .ui-menuitem-icon,
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-button.l2p-menu-action .ui-menuitem-text {
    color: inherit;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.l2p-menu-action .ui-menuitem-icon {
    flex: 0 0 auto;
    margin-right: 0;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.l2p-menu-action .ui-menuitem-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.l2p-bank-menu-action {
    align-items: center;
}

body .ui-menu.l2p-bank-actions-menu {
    width: max-content;
    min-width: 15rem;
}

body .ui-menu.l2p-bank-actions-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.l2p-bank-menu-action .ui-menuitem-text {
    white-space: nowrap;
}

body .ui-menu.l2p-document-actions-menu {
    width: max-content;
    min-width: 12rem;
}

body .ui-menu.l2p-document-actions-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text {
    white-space: nowrap;
}

/* Shared background image and headings on the public login pages. */
.login-body .login-wrapper .login-image > .l2p-login-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l2p-login-image-content {
    z-index: 10;
    position: absolute;
    margin-top: 32px;
}

.l2p-login-image-heading {
    text-shadow: 2px 2px grey;
}