@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ═══════════════════════════════════════════
   GLOBAL RESET & FONT — Montserrat everywhere
═══════════════════════════════════════════ */
* {
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 14px;
}

/* Hard override: no element in this app should ever render with a blur/backdrop-blur
   filter. Nothing here intentionally uses one (the one legitimate spot, the global
   loading overlay, has already been changed to a plain dark tint) - this exists purely
   as a last-resort guard in case something applies one in a way that isn't visible in
   this codebase's own CSS/JS. */
html, body, #vp-loader, .ui-dialog, .ui-widget-overlay, .ui-sidebar, .ui-overlaypanel {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Font Awesome icons need their own glyph font — the Montserrat rule above
   would otherwise render icon characters as blank/tofu boxes */
.fa, .fa:before {
    font-family: FontAwesome !important;
}

/* Belt-and-suspenders: cover every PrimeFaces widget class explicitly */
body, input, button, select, textarea, label,
.ui-widget, .ui-widget *, .ui-widget input, .ui-widget select,
.ui-widget textarea, .ui-widget button, .ui-widget label,
.ui-inputtext, .ui-button, .ui-button .ui-button-text,
.ui-selectonemenu, .ui-selectonemenu-item, .ui-selectonemenu-label,
.ui-selectonemenu-trigger, .ui-selectonemenu-panel,
.ui-autocomplete, .ui-autocomplete-panel, .ui-autocomplete-item,
.ui-datepicker, .ui-datepicker *, .ui-datepicker-header,
.ui-datepicker td span, .ui-datepicker td a,
.ui-dialog, .ui-dialog *, .ui-dialog-titlebar, .ui-dialog-content,
.ui-panel, .ui-panel *, .ui-panel-titlebar, .ui-panel-content,
.ui-tabview, .ui-tabview *, .ui-tabview-nav li a,
.ui-menubar, .ui-menubar *, .ui-menu, .ui-menu *,
.ui-menuitem, .ui-menuitem-text, .ui-submenu-list,
.ui-paginator, .ui-paginator *,
.ui-growl, .ui-growl-item, .ui-growl-message,
.ui-datatable, .ui-datatable *, .ui-datatable thead th,
.ui-datatable tbody td, .ui-datatable-header,
.ui-commandlink, .ui-outputlabel, .ui-outputtext,
.ui-messages, .ui-message,
.ui-column-filter, .ui-calendar,
h1, h2, h3, h4, h5, h6, p, span, div, td, th, li, a {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

body {
    background: #f0f2f5 !important;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Ensure forms and their wrappers fill the full viewport width */
form, .clsMainFrom, .clsMainFromNew, #TransactionForm {
    max-width: 100%;
}

tr {
    display: table-row;
    vertical-align: top;
    border-color: inherit;
}

/* ═══════════════════════════════════════════
   MAIN FORM CONTAINER
═══════════════════════════════════════════ */
.clsMainFrom {
    border: none;
    width: auto;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(31,58,95,0.10);
    border: 1px solid #dde3ed;
    overflow: hidden;
    margin: 16px;
}
.clsMainFromNew {
    border: none;
    width: auto;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(31,58,95,0.10);
    border: 1px solid #dde3ed;
    overflow: hidden;
    margin: 16px;
}
.clsLikeMainFromWidth {
    width: 100%;
}
#TransactionForm {
    width: auto;
    margin: 16px;
}
.clsGridApprove {
    width: 100%;
}

/* ═══════════════════════════════════════════
   PAGE TITLE HEADER BAR
═══════════════════════════════════════════ */
.clsGridMainHeader,
.clsGridMainHeaderChild {
    width: 100% !important;
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%) !important;
    background-color: #6db035 !important;
    border: none !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}
/* Push the green all the way into the cells — don't rely on transparency chains */
.clsGridMainHeader > tbody > tr > td,
.clsGridMainHeader > tbody > tr > th,
.clsGridMainHeaderChild > tbody > tr > td,
.clsGridMainHeaderChild > tbody > tr > th,
.clsGridMainHeader td,
.clsGridMainHeader th,
.clsGridMainHeaderChild td,
.clsGridMainHeaderChild th {
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%) !important;
    background-color: #6db035 !important;
    border: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.clsGridMainHeader tr,
.clsGridMainHeader tbody,
.clsGridMainHeaderChild tr,
.clsGridMainHeaderChild tbody {
    background: transparent !important;
    background-color: transparent !important;
}
/* ALL text-like elements inside the header — white, bold, uppercase */
.clsGridMainHeader label,
.clsGridMainHeader span,
.clsGridMainHeader .ui-outputlabel,
.clsGridMainHeader h:outputLabel,
.clsGridMainHeaderChild label,
.clsGridMainHeaderChild span,
.clsGridMainHeaderChild .ui-outputlabel {
    background: none !important;
    background-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}
.clsLabelTop {
    color: #ffffff !important;
    background: none !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    padding: 10px 0 !important;
}

/* ═══════════════════════════════════════════
   INPUT AREA
═══════════════════════════════════════════ */
.clsGridMainInput {
    width: 100%;
    background: #ffffff;
    padding: 14px 16px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   COMMAND BUTTON BAR
═══════════════════════════════════════════ */
.clsGridMainCommands {
    width: 100%;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 6px 12px;
    box-sizing: border-box;
}
.clsGridMainCommandsChild {
    width: 100%;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 6px 10px;
    box-sizing: border-box;
}
.clsGridMainCommands1 {
    width: 49%;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 4px 6px;
}
.clsGridMainCommands2 {
    width: 49%;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 4px 6px;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.clsButton {
    width: 100px;
    height: 32px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    cursor: pointer;
    transition: background 0.15s;
}
.clsButton:hover {
    background: linear-gradient(135deg, #162c4a 0%, #1F3A5F 100%) !important;
}
.clsButtonBigLonger {
    width: 400px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonBig {
    width: 200px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonBigSave {
    width: 200px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonBigClear {
    width: 200px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonVeryBig {
    width: 400px;
    height: 50px;
    font-size: 18px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonMedium {
    width: 210px;
    height: 40px;
    font-size: 16px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

/* ═══════════════════════════════════════════
   MESSAGES & STATUS
═══════════════════════════════════════════ */
.clsGridMainMessages {
    width: 100%;
    background: #ffffff;
    padding: 6px 16px;
    border-top: 1px solid #f0f2f5;
    box-sizing: border-box;
}
.clsActionMessage {
    color: #28a745;
    font-weight: 600;
    font-size: 13px;
}
.clsSuccessStatus { color: #28a745; font-weight: 600; }
.clsFailStatus    { color: #dc3545; font-weight: 600; }

/* ═══════════════════════════════════════════
   SEARCH PANEL
═══════════════════════════════════════════ */
.clsGridMainSearch {
    width: 100%;
    background: #f8f9fa;
    border-top: 1px solid #dde3ed;
    padding: 10px 16px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   INPUT FIELDS & SELECTS
═══════════════════════════════════════════ */
.clsInput {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    height: 34px !important;
    color: #1F3A5F !important;
    background: #fff !important;
}
.clsInput:focus {
    border-color: #1F3A5F !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(31,58,95,0.10) !important;
}
.clsMenu {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    background: #fff !important;
    height: 34px !important;
}

/* ═══════════════════════════════════════════
   TRANSACTOR FORM LABEL/INPUT ALIGNMENT
═══════════════════════════════════════════ */
.cls-tc-label {
    text-align: right !important;
    vertical-align: middle !important;
    padding: 4px 10px 4px 4px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    color: #374151 !important;
    width: 160px !important;
}
.cls-tc-label label,
.cls-tc-label span {
    display: block !important;
    text-align: right !important;
    white-space: normal;
}
.cls-tc-input {
    vertical-align: middle !important;
    padding: 3px 8px !important;
}
/* Extra specificity override for PrimeFaces theme interference */
table[id$="pnlCol1"] td.cls-tc-label,
table[id$="pnlCol2"] td.cls-tc-label {
    text-align: right !important;
    vertical-align: middle !important;
    padding-right: 10px !important;
    width: 160px !important;
    white-space: nowrap !important;
}
table[id$="pnlCol1"] td.cls-tc-input,
table[id$="pnlCol2"] td.cls-tc-input {
    vertical-align: middle !important;
}

/* ═══════════════════════════════════════════
   STANDARD DATA TABLES (h:dataTable)
═══════════════════════════════════════════ */
.cls-table {
    border-collapse: collapse;
    margin: 0 0 10px 5px;
    width: 100%;
}
.cls-table-header {
    text-align: left;
    background: #1F3A5F !important;
    border: none;
    color: #ffffff !important;
    font-weight: 700;
    padding: 10px 12px;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.cls-table-odd-row {
    text-align: left;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    padding-right: 5px;
}
.cls-table-odd-row:hover {
    background: #eef3fb !important;
}
.cls-table-even-row {
    text-align: left;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f2f5;
    padding-right: 5px;
}
.cls-table-even-row:hover {
    background: #eef3fb !important;
}
/* Column cells */
.cls-table-col1,.cls-table-col2,.cls-table-col3,.cls-table-col4,
.cls-table-col5,.cls-table-col6,.cls-table-col7,.cls-table-col8,
.cls-table-col9,.cls-table-col10 {
    border-bottom: 1px solid #f0f2f5;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 8px 10px;
    font-size: 13px;
    color: #374151;
}

/* ═══════════════════════════════════════════
   REPORT FILTER PANELS
═══════════════════════════════════════════ */
.clsPanelReportFilter {
    width: 100%;
    background: #ffffff;
    padding: 12px 16px;
    border-bottom: 1px solid #dde3ed;
}
/* Three pages still keep their action row below the page name rather than in
   it: Subscription and Timesheet carry navigation buttons with hard-coded
   yellow/red inline backgrounds that would clash on the blue band, and
   MoreCompanySettings carries a notice rather than a control. Everywhere else
   this row has moved into .vp-pagehead. */
.clsPanelReportActions {
    width: 100%;
    background: #ffffff;
    padding: 10px 16px 0 16px;
}
.clsLabelReportNotice {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
}
.clsPanelSummary {
    width: 100%;
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%);
    padding: 8px 16px;
}
.clsLabelReportFilter {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
}
.clsInputReportFilter {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    height: 32px !important;
    padding: 4px 8px !important;
    background: #fff !important;
}
.clsButtonReportFilter {
    text-align: center;
}

/* ═══════════════════════════════════════════
   PRIMEFACES DATATABLE — GLOBAL OVERRIDES
═══════════════════════════════════════════ */
.ui-datatable thead th {
    background: #1F3A5F !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border: none !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.ui-datatable thead th .ui-column-title {
    color: #ffffff !important;
}
.ui-datatable tbody td {
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #f0f2f5 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    vertical-align: middle !important;
    color: #374151;
}
.ui-datatable tbody tr:nth-child(even) td {
    background: #f8f9fa;
}
.ui-datatable tbody tr:hover td {
    background: #eef3fb !important;
}
.ui-datatable-header {
    background: #f8f9fa !important;
    border: none !important;
    border-bottom: 1px solid #dde3ed !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1F3A5F !important;
}
.ui-paginator {
    background: #f8f9fa !important;
    border-top: 1px solid #dde3ed !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 6px 10px !important;
}
.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    border-radius: 5px !important;
    color: #1F3A5F !important;
    font-weight: 600 !important;
}
.ui-paginator .ui-state-active {
    background: #1F3A5F !important;
    color: #ffffff !important;
    border-color: #1F3A5F !important;
}
.ui-datatable .ui-datatable-summaryrow td {
    background: #fffde7 !important;
    font-weight: 700 !important;
}
.ui-column-filter {
    border: 1.5px solid #ccd3de !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    padding: 3px 6px !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES INPUT & SELECT OVERRIDES
═══════════════════════════════════════════ */
.ui-inputtext {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    background: #ffffff !important;
}
.ui-inputtext:focus,
.ui-inputtext.ui-state-focus {
    border-color: #1F3A5F !important;
    box-shadow: 0 0 0 2px rgba(31,58,95,0.10) !important;
    outline: none !important;
}
.ui-selectonemenu {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    background: #ffffff !important;
}
.ui-selectonemenu .ui-selectonemenu-trigger {
    border: none !important;
    background: transparent !important;
    color: #1F3A5F !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item {
    font-size: 13px !important;
    color: #1F3A5F !important;
    padding: 6px 10px !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item:hover,
.ui-selectonemenu-panel .ui-state-highlight {
    background: #eef3fb !important;
    color: #1F3A5F !important;
}
/* Date fields (p:calendar): strip the wrapper so there is never a double box,
   and make the input match the design-system text inputs (34px, padded, navy). */
.ui-calendar {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.ui-calendar .ui-inputtext {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    height: 34px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    background: #fff !important;
    box-sizing: border-box !important;
    min-width: 120px !important;
}
.ui-calendar .ui-inputtext:focus {
    border-color: #1F3A5F !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(31,58,95,0.10) !important;
}
.ui-datepicker {
    border: 1px solid #dde3ed !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(31,58,95,0.12) !important;
}
.ui-datepicker .ui-datepicker-header {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
}
.ui-datepicker td span.ui-state-active,
.ui-datepicker td a.ui-state-active {
    background: #1F3A5F !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES BUTTON OVERRIDES
═══════════════════════════════════════════ */
.ui-button,
.ui-button.ui-state-default {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    box-shadow: none !important;
    transition: background 0.15s;
}
.ui-button:hover,
.ui-button.ui-state-hover {
    background: linear-gradient(135deg, #162c4a 0%, #1F3A5F 100%) !important;
}
.ui-button.ui-state-focus {
    box-shadow: 0 0 0 2px rgba(31,58,95,0.18) !important;
    outline: none !important;
}
/* Keep delete/danger buttons red */
.ui-button.ui-button-danger {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
}

/* Icons on buttons: white.

   ui-icon-* is not a font. It is a slice of a sprite PNG that ships with the
   jQuery UI theme, positioned with background-position, and the sprite is
   drawn in that theme's own dark grey. So `color: #ffffff` above sets the
   button's *text* white and leaves the icon dark - which is why every icon
   sat black on a navy button. brightness(0) crushes the sprite to solid
   black and invert(1) flips it to solid white; the datepicker trigger and
   the month arrows further down already use the same trick.

   Buttons only, on purpose. The paginator arrows, dialog close and the rest
   of the PrimeFaces chrome are the same sprite on light backgrounds, where
   the dark version is the readable one. */
.ui-button .ui-icon {
    filter: brightness(0) invert(1) !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES PANEL
═══════════════════════════════════════════ */
.ui-panel .ui-panel-titlebar {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.ui-panel .ui-panel-content {
    background: #ffffff !important;
    border: 1px solid #dde3ed !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES DIALOG
   One border on the outer .ui-dialog frames the whole thing (titlebar + content +
   footer) so every dialog gets a complete, evenly-rounded border regardless of whether
   it uses a p:footer facet - previously only .ui-dialog-content/.ui-dialog-footer had
   their own borders, which left dialogs with no footer looking rounded on top (from the
   titlebar) but square-cornered on the bottom two corners. overflow:hidden lets the
   titlebar's gradient and the content's white background respect the outer radius
   cleanly instead of poking past rounded corners.
═══════════════════════════════════════════ */
.ui-dialog {
    border: 1px solid #dde3ed !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(15,30,60,0.16) !important;
}
.ui-dialog .ui-dialog-titlebar {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}
.ui-dialog .ui-dialog-titlebar-icon span,
.ui-dialog .ui-dialog-titlebar-close span {
    color: #ffffff !important;
}
.ui-dialog .ui-dialog-content {
    background: #ffffff !important;
    border: none !important;
}
.ui-dialog .ui-dialog-footer {
    background: #f8f9fa !important;
    border: none !important;
    border-top: 1px solid #dde3ed !important;
}
.ui-dialog .ui-dialog-content {
    padding: 18px 22px !important;
}
/* Most transaction dialogs (Purchase/Sale/Hire/Adjust Stock/Cash Payment/
   Journal Entry etc - well over a hundred pages) pass header="" and build
   their own title bar inside the body instead, so PrimeFaces still renders
   an otherwise-empty navy .ui-dialog-titlebar above it. :has(:empty) targets
   only that case - dialogs with a real header= string are untouched - and
   flattens it to a plain white strip so the close X sits directly on the
   white card instead of a stray navy sliver above it. */
.ui-dialog-titlebar:has(.ui-dialog-title:empty) {
    background: #ffffff !important;
    border-bottom: none !important;
    padding: 10px 10px 0 10px !important;
    min-height: 0 !important;
}
.ui-dialog-titlebar:has(.ui-dialog-title:empty) .ui-dialog-titlebar-icon,
.ui-dialog-titlebar:has(.ui-dialog-title:empty) .ui-dialog-titlebar-close {
    background: #f1f4f8 !important;
    border: none !important;
}
.ui-dialog-titlebar:has(.ui-dialog-title:empty) .ui-dialog-titlebar-icon span,
.ui-dialog-titlebar:has(.ui-dialog-title:empty) .ui-dialog-titlebar-close span {
    filter: none !important;
}

/* ═══════════════════════════════════════════
   LEGACY TRANSACTION DIALOG CHROME -> "clean card" look
   clsGridMainHeader/clsGridMainCommands/clsButtonBig* are the shared classes
   every legacy transaction dialog (Purchase Invoice, Sale Order, Hire
   Invoice, Adjust/Consume/Dispose Stock, Cash Payment/Receipt, Journal
   Entry, Credit/Debit Note before their own dedicated redesign, etc) is
   built from - a colored band standing in for a title bar, a navy band
   standing in for a footer, and oversized rectangular buttons. Restyling
   those three shared classes turns every one of those dialogs into a plain
   white header with a bold title, a plain white footer, and compact pill
   buttons in one pass, without touching each page's markup. Scoped to
   .ui-dialog/.ui-sidebar specifically so the SAME classes used as an
   ordinary in-page section header on non-dialog pages are left alone. */
.ui-dialog .clsGridMainHeader,
.ui-dialog .clsGridMainHeaderChild,
.ui-sidebar .clsGridMainHeader,
.ui-sidebar .clsGridMainHeaderChild {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #eef1f6 !important;
    min-height: 0 !important;
    padding: 2px 0 14px 0 !important;
}
.ui-dialog .clsGridMainHeader > tbody > tr > td,
.ui-dialog .clsGridMainHeader > tbody > tr > th,
.ui-dialog .clsGridMainHeaderChild > tbody > tr > td,
.ui-dialog .clsGridMainHeaderChild > tbody > tr > th,
.ui-sidebar .clsGridMainHeader > tbody > tr > td,
.ui-sidebar .clsGridMainHeader > tbody > tr > th,
.ui-sidebar .clsGridMainHeaderChild > tbody > tr > td,
.ui-sidebar .clsGridMainHeaderChild > tbody > tr > th {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 3px 8px 3px 0 !important;
}
.ui-dialog .clsGridMainHeader label,
.ui-dialog .clsGridMainHeader span,
.ui-dialog .clsGridMainHeader .ui-outputlabel,
.ui-dialog .clsGridMainHeaderChild label,
.ui-dialog .clsGridMainHeaderChild span,
.ui-sidebar .clsGridMainHeader label,
.ui-sidebar .clsGridMainHeader span,
.ui-sidebar .clsGridMainHeader .ui-outputlabel,
.ui-sidebar .clsGridMainHeaderChild label,
.ui-sidebar .clsGridMainHeaderChild span {
    background: transparent !important;
    background-color: transparent !important;
    color: #16213e !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.ui-dialog .clsGridMainCommands,
.ui-dialog .clsGridMainCommandsChild,
.ui-dialog .clsGridMainCommands1,
.ui-dialog .clsGridMainCommands2,
.ui-sidebar .clsGridMainCommands,
.ui-sidebar .clsGridMainCommandsChild,
.ui-sidebar .clsGridMainCommands1,
.ui-sidebar .clsGridMainCommands2 {
    background: #ffffff !important;
    border-top: 1px solid #eef1f6 !important;
    padding: 14px 0 4px 0 !important;
}
.ui-dialog .clsGridMainCommands label,
.ui-dialog .clsGridMainCommands1 label,
.ui-dialog .clsGridMainCommands2 label,
.ui-sidebar .clsGridMainCommands label,
.ui-sidebar .clsGridMainCommands1 label,
.ui-sidebar .clsGridMainCommands2 label {
    color: #1F3A5F !important;
}
.ui-dialog .clsButtonBig,
.ui-dialog .clsButtonVeryBig,
.ui-dialog .clsButtonBigSave,
.ui-dialog .clsButtonBigClear,
.ui-dialog .clsButtonBigLonger,
.ui-sidebar .clsButtonBig,
.ui-sidebar .clsButtonVeryBig,
.ui-sidebar .clsButtonBigSave,
.ui-sidebar .clsButtonBigClear,
.ui-sidebar .clsButtonBigLonger {
    width: auto !important;
    height: 42px !important;
    min-width: 160px !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
}
/* The h:form wrapper (.clsMainFrom) draws its own card border/shadow/margin
   for use as an ordinary page wrapper - inside a dialog/sidebar that's
   already the card, so its own framing just doubles up as a border-within-
   a-border. Drop it in that context only. */
.ui-dialog .clsMainFrom,
.ui-sidebar .clsMainFrom {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES TAB VIEW
═══════════════════════════════════════════ */
.ui-tabview .ui-tabview-nav li.ui-state-active a,
.ui-tabview .ui-tabview-nav li.ui-state-active {
    background: #1F3A5F !important;
    color: #ffffff !important;
    border-color: #1F3A5F !important;
    border-radius: 6px 6px 0 0 !important;
    font-weight: 700 !important;
}
.ui-tabview .ui-tabview-nav li a {
    color: #1F3A5F !important;
    font-weight: 600;
}
.ui-tabview .ui-tabview-panels {
    background: #ffffff !important;
    border: 1px solid #dde3ed !important;
}

/* ═══════════════════════════════════════════
   AUTOCOMPLETE
═══════════════════════════════════════════ */
.ui-autocomplete-panel {
    border: 1px solid #dde3ed !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(31,58,95,0.12) !important;
}
.ui-autocomplete-panel .ui-autocomplete-item {
    font-size: 13px !important;
    padding: 7px 12px !important;
    color: #1F3A5F !important;
}
.ui-autocomplete-panel .ui-state-highlight {
    background: #eef3fb !important;
    color: #1F3A5F !important;
}

/* ═══════════════════════════════════════════
   GROWL / MESSAGES — modern floating toast
   Previously p:growl had no position/z-index anywhere in this stylesheet (this app doesn't
   load the PrimeFaces base theme, only its own CSS), so every growl message rendered INLINE
   wherever the <p:growl> tag happened to sit in the page - easy to miss, and on some pages
   (e.g. the Sale page) it showed up buried among other controls rather than as a notification.
   This makes it a real floating toast: fixed top-right, stacked, icon per severity, slide-in.
═══════════════════════════════════════════ */
.ui-growl {
    position: fixed !important;
    top: 76px;
    right: 20px;
    z-index: 99999;
    width: 360px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.ui-growl-item-container {
    position: relative;
    pointer-events: auto;
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 34px 14px 16px !important;
    margin-bottom: 10px;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(15,30,60,0.22) !important;
    color: #fff;
    animation: vpToastIn .22s ease-out;
}
@keyframes vpToastIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ui-growl-item-container.ui-growl-message-info    { background: #1F3A5F !important; }
.ui-growl-item-container.ui-growl-message-success { background: #218838 !important; }
.ui-growl-item-container.ui-growl-message-error   { background: #c0392b !important; }
.ui-growl-item-container.ui-growl-message-warn    { background: #b8860b !important; }

/* Replace PrimeFaces' own sprite icon (never rendered - base theme isn't loaded) with a
   Font Awesome glyph matched to severity. */
.ui-growl-item-container .ui-growl-image {
    width: 18px !important; height: 18px !important;
    flex-shrink: 0; margin-top: 1px;
    background: none !important;
}
.ui-growl-item-container .ui-growl-image::before {
    font-family: FontAwesome; font-size: 18px; line-height: 1;
}
.ui-growl-item-container.ui-growl-message-info    .ui-growl-image::before { content: "\f05a"; }
.ui-growl-item-container.ui-growl-message-success .ui-growl-image::before { content: "\f058"; }
.ui-growl-item-container.ui-growl-message-error   .ui-growl-image::before { content: "\f057"; }
.ui-growl-item-container.ui-growl-message-warn    .ui-growl-image::before { content: "\f071"; }

.ui-growl-title { font-weight: 700; font-size: 14px; display: block; margin-bottom: 2px; }
.ui-growl-message p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.ui-growl-icon-close {
    position: absolute; top: 10px; right: 10px;
    color: rgba(255,255,255,.75) !important; cursor: pointer; font-size: 13px;
}
.ui-growl-icon-close:hover { color: #fff !important; }

@media (max-width: 600px) {
    .ui-growl { left: 12px; right: 12px; top: 66px; width: auto; }
}

/* ═══════════════════════════════════════════
   SIDEBAR (p:sidebar) — used for "Session" pickers, item search popups etc.
   Same root cause as the growl fix above: this app never loads the PrimeFaces base theme,
   so p:sidebar had zero CSS anywhere - it rendered as a plain block sitting inline in the
   normal page flow instead of a floating panel, and its close link had no visible icon
   (relies on a jQuery UI sprite background that was never loaded), so there was no obvious
   way to dismiss it. Pages set a fixed height (e.g. 600px) assuming a bottom-anchored
   floating panel; without positioning that just pushed page content down/off-screen.
═══════════════════════════════════════════ */
.ui-sidebar {
    position: fixed !important;
    background: #fff !important;
    z-index: 100000 !important;
    box-shadow: 0 10px 36px rgba(15,30,60,0.3) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    max-height: 85vh !important;
    padding: 22px 24px !important;
}
.ui-sidebar-left   { top: 0 !important; left: 0 !important; bottom: 0 !important; max-height: 100% !important; }
.ui-sidebar-right  { top: 0 !important; right: 0 !important; bottom: 0 !important; max-height: 100% !important; }
.ui-sidebar-top    { top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 0 0 14px 14px !important; }
.ui-sidebar-bottom { bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 14px 14px 0 0 !important; }

.ui-sidebar-close {
    position: absolute !important;
    top: 14px !important; right: 16px !important;
    width: 30px !important; height: 30px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important;
    background: #f1f4f8 !important;
    color: #1F3A5F !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    z-index: 2 !important;
    cursor: pointer;
}
.ui-sidebar-close:hover { background: #e2e8f0 !important; }
.ui-sidebar-close .ui-icon-closethick { background: none !important; width: auto !important; height: auto !important; text-indent: 0 !important; }
.ui-sidebar-close .ui-icon-closethick::before { font-family: FontAwesome; content: "\f00d"; font-size: 14px; }

/* Only used if a sidebar is ever set modal="true" - defensive, none currently are */
/* No z-index here on purpose. PrimeFaces computes each overlay's z-index at show time as
   (that dialog/sidebar's own z-index - 1) and sets it as an inline style so the overlay always
   sits directly under its own modal - see PrimeFaces.utils.addModal(). A hardcoded !important
   z-index here (this used to be 99998) clobbers that inline value on every modal, so the overlay
   ends up ABOVE dialogs whose z-index is far lower (most run in the 1000-1500 range), completely
   covering the dialog and eating every click meant for it - this was the root cause of the
   "blurred and totally unresponsive" dialog reports across the app. */
.ui-widget-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(15,30,60,0.45) !important; }

@media (max-width: 600px) {
    .ui-sidebar-left, .ui-sidebar-right { width: 90vw !important; }
}

/* ═══════════════════════════════════════════
   PRINT / SALES INVOICE TABLES (unchanged)
   These are used for printed receipts — keep as-is
═══════════════════════════════════════════ */
.cls-table-SalesInvoice {
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    width: 350px;
}
.cls-table-SalesInvoice-very-small {
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    width: 290px;
}
.cls-table-header-SalesInvoice {
    text-align: left;
    border: 1px dotted black;
    color: black;
    font-weight: bold;
}
.cls-table-odd-row-SalesInvoice {
    text-align: left;
    border: 1px dotted #BBBBBB;
}
.cls-table-even-row-SalesInvoice {
    text-align: left;
    border: 1px dotted #BBBBBB;
}
.cls-table-col1-SalesInvoice,
.cls-table-col2-SalesInvoice,
.cls-table-col3-SalesInvoice,
.cls-table-col4-SalesInvoice,
.cls-table-col5-SalesInvoice {
    border: 1px dotted;
    font-size: 12px;
}

/* ═══════════════════════════════════════════
   TRANSACTION FORM SPECIFICS
═══════════════════════════════════════════ */
#dtblTransactorA {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -100;
}

/* ═══════════════════════════════════════════
   FIGURE (unchanged)
═══════════════════════════════════════════ */
figure {
    width: 150px;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
    border: thin silver solid;
    margin: 0.5em;
    padding: 0.5em;
}

/* ═══════════════════════════════════════════
   ROW STATUS COLORS (aging reports etc.)
   Must come AFTER datatable overrides so they
   win over the nth-child even-row rule.
═══════════════════════════════════════════ */
.green td,
tr.green td {
    background-color: #238823 !important;
    background-image: none !important;
    color: #000000 !important;
}
.blue td,
tr.blue td {
    background-color: #007fff !important;
    background-image: none !important;
    color: #000000 !important;
}
.amber td,
tr.amber td {
    background-color: #ffbf00 !important;
    background-image: none !important;
    color: #000000 !important;
}
.red td,
tr.red td {
    background-color: #ee4035 !important;
    background-image: none !important;
    color: #000000 !important;
}
.white td,
tr.white td {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}
.lightgreenrow td,
tr.lightgreenrow td {
    background-color: #b6fcb6 !important;
    color: #222 !important;
}
/* Keep old bare class selectors for backward compat */
.green  { background-color: #238823 !important; background-image: none !important; color: #000000 !important; }
.blue   { background-color: #007fff !important; background-image: none !important; color: #000000 !important; }
.amber  { background-color: #ffbf00 !important; background-image: none !important; color: #000000 !important; }
.red    { background-color: #ee4035 !important; background-image: none !important; color: #000000 !important; }
.white  { background-color: #ffffff !important; background-image: none !important; color: #000000 !important; }

/* ═══════════════════════════════════════════
   MODERN LOADING SPINNER
   Replaces the old ajax-loader.gif globally
═══════════════════════════════════════════ */
@keyframes vp-spin {
    to { transform: rotate(360deg); }
}
@keyframes vp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* Replace gif with CSS spinner via content property (Chrome/FF/Edge) */
img[src*="ajax-loader"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='22' fill='none' stroke='%23e8f5e0' stroke-width='5'/%3E%3Ccircle cx='28' cy='28' r='22' fill='none' stroke='%237BC043' stroke-width='5' stroke-dasharray='34 104' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='0.85s' from='0 28 28' to='360 28 28' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    width: 56px !important;
    height: 56px !important;
    display: block !important;
    margin: auto !important;
}

/* Style the loading dialog itself — dark glass background, centred */
.ui-dialog:has(img[src*="ajax-loader"]) .ui-dialog-content,
.ui-dialog .ui-dialog-content:has(img[src*="ajax-loader"]) {
    background: rgba(15, 35, 65, 0.90) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px !important;
    min-height: 90px !important;
    padding: 20px !important;
}
.ui-dialog:has(img[src*="ajax-loader"]) {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    border-radius: 14px !important;
    border: none !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════
   SECTIONED TRANSACTOR FORM (Add Customer redesign)
   Grouped-section layout — used by TransactorChild.xhtml
═══════════════════════════════════════════ */

/* White body that holds the search bar + section columns */
.cls-form-body {
    background: #ffffff;
    padding: 16px 18px 20px;
    box-sizing: border-box;
}

/* Search bar */
.cls-search-bar {
    background: #f8f9fa;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.cls-search-bar > label,
.cls-search-bar > .ui-outputlabel {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.cls-search-input {
    max-width: 380px;
    width: 100% !important;
}
.cls-search-results { margin-top: 6px; }
.cls-search-results:empty { display: none; }
.cls-search-results-tbl { max-width: 420px; }
.cls-search-results-tbl a { color: #1F3A5F; font-weight: 600; }
.cls-search-results-tbl a:hover { color: #7BC043; }

/* Two-column layout of section cards (stacks on narrow screens) */
.cls-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1000px) {
    .cls-cols { grid-template-columns: 1fr; }
}

/* A single titled section card */
.cls-section {
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    padding: 14px 16px 16px;
    margin-bottom: 16px;
}
.cls-section:last-child { margin-bottom: 0; }
.cls-section-full { margin-top: 16px; }
.cls-section-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #1F3A5F !important;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid #eef1f6;
    display: flex;
    align-items: center;
}
.cls-section-title i {
    color: #7BC043;
    margin-right: 8px;
    font-size: 14px;
}

/* Contacts table (Customer/Supplier/Provider) - the full add/edit form's list of everything
   that exists, with per-row view/edit/delete, plus the search bar above filtering it live. */
.cls-contacts-tbl { width: 100%; }
.cls-contacts-tbl .ui-datatable-header,
.cls-contacts-tbl .ui-datatable-footer {
    background: #f8f9fa !important;
    border-color: #e3e8f0 !important;
}
.cls-contacts-tbl thead th {
    background: #1F3A5F !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-color: #1F3A5F !important;
    padding: 10px 12px !important;
}
.cls-contacts-tbl tbody td {
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-color: #eef1f6 !important;
    vertical-align: middle !important;
}
.cls-contacts-tbl tbody tr:hover td { background: #f8faff !important; }
.cls-contacts-tbl__name,
.cls-contacts-tbl__name:visited {
    color: #1F3A5F !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.cls-contacts-tbl__name:hover { color: #7BC043 !important; text-decoration: underline !important; }
.cls-row-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    color: #1F3A5F;
    text-decoration: none !important;
    margin: 0 2px;
    cursor: pointer;
}
.cls-row-action:hover { background: #eef1f6; color: #1F3A5F; }
.cls-row-action--danger { color: #c0392b; }
.cls-row-action--danger:hover { background: #fdecea; color: #c0392b; }

/* Reusable "modal form" dialog positioning - fixed regardless of scroll position or content
   height (never touches "display", which fights PrimeFaces' own show/hide toggle - see
   SaleInvoiceTrans.xhtml's .pos-receipt-dialog comment for the full story on why that broke a
   dialog outright). Pair with baseZIndex set safely above 1300 on the p:dialog tag itself -
   Menu.xhtml's top navbar is fixed at z-index:1300, and a dialog shown before PrimeFaces' own
   dynamic counter has climbed past that (e.g. the first dialog opened on a freshly-loaded page)
   can otherwise render with its titlebar/close-X covered by the navbar.
   Anchored from the TOP (not vertically centered via top:50%+translateY(-50%)) on purpose - a
   dialog taller than the viewport (a long add/edit form, not just a confirm box) centered that
   way gets HALF ITS OWN HEIGHT pushed above y:0, shoving the titlebar/close-X off the top of the
   screen with no scrollbar able to reach it, effectively locking the dialog open. Anchoring the
   top edge a fixed distance down keeps the titlebar always on-screen no matter how tall the form
   is. That distance is Menu.xhtml's own --vp-appbar-h (the fixed top navbar's real height) plus a
   comfortable 16px gap, so the dialog's OWN title/close-X always sits fully clear of the navbar
   band instead of merely relying on baseZIndex to win an overlap - the earlier "3vh" guess put
   the dialog's top above the navbar's actual height on most screens, letting the navbar visually
   cover the dialog's titlebar even though baseZIndex was technically higher. */
.vp-modal-form-dialog {
    position: fixed !important;
    top: calc(var(--vp-appbar-h, 56px) + 16px) !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    max-height: calc(100vh - var(--vp-appbar-h, 56px) - 32px) !important;
}
.vp-modal-form-dialog .ui-dialog-titlebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    min-height: 20px !important;
    line-height: 20px !important;
    padding: 9px 15px !important;
    position: relative !important;
    z-index: 1 !important;
}
.vp-modal-form-dialog .ui-dialog-content {
    max-height: calc(100vh - var(--vp-appbar-h, 56px) - 132px) !important;
    overflow-y: auto !important;
}

/* Responsive grid of label/input pairs inside a section */
.cls-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 18px;
}
.cls-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
/* A field that should span the full width of its section grid */
.cls-field-wide { grid-column: 1 / -1; }

.cls-field > label,
.cls-field > .ui-outputlabel,
.cls-field .ui-outputlabel {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
}
.cls-req { color: #e74c3c; font-weight: 700; }

/* Make every input/select/textarea/calendar fill its field cell */
.cls-field .clsInput,
.cls-field .clsMenu,
.cls-field select,
.cls-field textarea,
.cls-field input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
}
.cls-field .ui-calendar,
.cls-field .ui-calendar input {
    width: 100% !important;
    box-sizing: border-box;
}
.cls-field textarea.clsInput {
    height: 34px;
    min-height: 34px;
    resize: vertical;
    padding-top: 6px !important;
}

/* Edit-vs-new status banner (Customer/Supplier/Provider) - the same form is used both to
   add a brand-new record and to edit one loaded via search, populated either way with no
   other visual cue, so without this it's easy to think you're on an "add" screen while
   actually editing someone's saved details (or vice versa). */
.cls-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}
.cls-status-banner i { font-size: 15px; }
.cls-status-banner strong { font-weight: 800; }
.cls-status-banner--edit {
    background: #eaf2fe;
    border: 1px solid #bcd6fb;
    color: #1e4c8a;
}
.cls-status-banner--edit i { color: #3b82f6; }
.cls-status-banner--new {
    background: #eef9f0;
    border: 1px solid #cdecd4;
    color: #276b3d;
}
.cls-status-banner--new i { color: #7BC043; }

/* Centered command bar */
.cls-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 16px 20px;
}
.cls-form-actions .clsButtonBig,
.cls-form-actions .clsButtonBigSave,
.cls-form-actions .clsButtonBigClear {
    height: 48px !important;
    width: 180px !important;
    font-size: 15px !important;
}

/* ═══════════════════════════════════════════
   TRANSACTION-PAGE CONSISTENCY (app-wide)
   Defines previously-undefined trans-item input/label classes,
   themes the calendar trigger, and adds line-item table dividers.
═══════════════════════════════════════════ */

/* Line-item inputs (Qty / Unit Price / Amount ...) — were undefined, so they
   fell back to default browser styling. Border/radius only, so intentional
   inline styling on totals fields (yellow bg, 20px font) is preserved. */
.clsInputTransItem {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    color: #1F3A5F !important;
    box-sizing: border-box !important;
}
.clsInputTransItem:focus {
    border-color: #1F3A5F !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(31,58,95,0.10) !important;
}
.clsLabelTransItem {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

/* Calendar (date) trigger button — navy fill + WHITE icon, app-wide */
.ui-datepicker-trigger,
.ui-datepicker-trigger.ui-button {
    width: 34px !important; min-width: 34px !important; height: 34px !important;
    margin: 0 !important; padding: 0 !important;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    background-color: #1F3A5F !important;
    border: 1.5px solid #1F3A5F !important;
    border-radius: 0 6px 6px 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: none !important; vertical-align: top !important; color: #ffffff !important;
}
.ui-datepicker-trigger .ui-icon,
.ui-datepicker-trigger .ui-button-icon-left,
.ui-datepicker-trigger .fa {
    filter: brightness(0) invert(1) !important;
    color: #ffffff !important;
    margin: 0 !important; position: static !important;
}
.ui-datepicker-trigger .ui-button-text { display: none !important; }

/* Datepicker POPUP: white month-navigation arrows on the navy header
   (these calendars open on focus — there is no external trigger button). */
.ui-datepicker .ui-datepicker-header .ui-icon,
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    filter: brightness(0) invert(1) !important;
    color: #ffffff !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { cursor: pointer !important; }

/* Transaction line-item tables (styleClass="cls-table" on p:dataTable):
   navy header + clear cell dividers (they had none). */
.cls-table thead th {
    background: #1F3A5F !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 9px 10px !important;
    border: none !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-bottom: 2px solid #142335 !important;
}
.cls-table thead th:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.22) !important;
}
.cls-table tbody td {
    border-bottom: 1px solid #e9edf2 !important;
}
.cls-table tbody td:not(:last-child) {
    border-right: 1px solid #e9edf2 !important;
}
.cls-table tbody tr:hover td { background: #eef3fb !important; }

/* Bulletproof: line-item entry inputs matched to the top-row inputs BY ID
   (overrides their inline height:24px so all fields are a uniform 34px). */
input[id$="itxtQty"],
input[id$="itxtUnitPrice"],
input[id$="itxtAmount"] {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    height: 34px !important;
    padding: 4px 8px !important;
    color: #1F3A5F !important;
    box-sizing: border-box !important;
}

/* Calendar trigger — broaden coverage across button variants + force white icon */
.ui-calendar .ui-datepicker-trigger,
.ui-calendar button.ui-button,
.ui-calendar > button {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    background-color: #1F3A5F !important;
    border: 1.5px solid #1F3A5F !important;
    color: #ffffff !important;
}
.ui-calendar .ui-datepicker-trigger .ui-icon,
.ui-calendar button .ui-icon,
.ui-calendar .ui-icon {
    filter: brightness(0) invert(1) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════
   PAGE HEAD — the blue title band
   ═══════════════════════════════════════════
   Every screen that carries the menu names itself here, so there is always
   something on the page that says which page it is. It replaces the green
   caption bar that used to do this job (clsPanelReportFilterTitle, removed in
   the de-greening pass) and it inherits that bar's second duty: the working
   controls that lived inside it — the Today/Yesterday quick-date links, the
   report search buttons — sit in it too, on the right.

   Full-bleed and sticky under the fixed app bar, so the page name stays put
   while a long report scrolls. --vp-appbar-h is declared by Menu.xhtml, which
   every page carrying this band also includes; the literal is the fallback for
   anything that renders the band without the menu. */
.vp-pagehead {
    position: sticky;
    top: var(--vp-appbar-h, 56px);
    z-index: 900;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-height: 44px;
    padding: 7px 18px;
    box-sizing: border-box;
    background: linear-gradient(120deg, #17305a 0%, #1F3A5F 45%, #2b5390 100%);
    border-bottom: 2px solid #7BC043;
    box-shadow: 0 2px 10px rgba(15,30,60,.18);
}
/* The icon keeps its own tile so titles of different lengths still start on
   the same vertical line. */
.vp-pagehead__icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    color: #ffffff;
    font-size: 13px;
}
.vp-pagehead__icon .fa { color: #ffffff !important; }
.vp-pagehead__title {
    flex: 1 1 auto;
    min-width: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    line-height: 1.3;
}

/* A page whose name depends on what it is showing (Transactor: Customer /
   Supplier / Scheme / Provider) needs its icon+title pair behind one rendered
   condition. h:panelGroup wraps them in a span, which would then be the flex
   item instead of them; display:contents hands the layout back to the pair. */
.vp-pagehead__group { display: contents; }

/* ── Controls carried by the band ──────────────────────────────────────
   h:panelGrid renders a table, so the row of links arrives as <table><td>.
   Strip the table chrome and let the cells sit side by side. */
.vp-pagehead__actions {
    flex: 0 0 auto;
    margin-left: auto;
    background: transparent !important;
    border: none !important;
    border-collapse: collapse;
}
/* Not every band gets its controls from a panelGrid — a couple hand-roll a div.
   Only the div form needs flex; forcing it on the table form would flatten the
   panelGrid's own rows. */
.vp-pagehead > div.vp-pagehead__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vp-pagehead__actions td,
.vp-pagehead__actions tr,
.vp-pagehead__actions tbody {
    background: transparent !important;
    border: none !important;
    padding: 0 3px !important;
    vertical-align: middle !important;
}

/* Quick-date links (Today / Yesterday). White-on-green once, then navy-on-white
   when the green bar went; back on a coloured bar they read as light chips. */
.vp-pagehead__link,
.vp-pagehead a.ui-commandlink {
    display: inline-block;
    color: #eaf3ff !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.24);
    transition: background .15s ease, border-color .15s ease;
}
.vp-pagehead__link:hover,
.vp-pagehead a.ui-commandlink:hover {
    background: rgba(255,255,255,.26);
    border-color: rgba(255,255,255,.45);
    color: #ffffff !important;
}
/* Some bands carry buttons rather than links (report Search). Same chip, so the
   band reads as one row of controls instead of a mix of two widget styles. */
.vp-pagehead .ui-button,
.vp-pagehead .ui-button.ui-state-default,
.vp-pagehead input[type="submit"],
.vp-pagehead button {
    background: rgba(255,255,255,.12) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;
    color: #eaf3ff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .4px;
    padding: 4px 13px !important;
    box-shadow: none !important;
    min-height: 0 !important;
}
.vp-pagehead .ui-button:hover,
.vp-pagehead button:hover,
.vp-pagehead input[type="submit"]:hover {
    background: rgba(255,255,255,.26) !important;
    border-color: rgba(255,255,255,.45) !important;
    color: #ffffff !important;
}
.vp-pagehead .ui-button .ui-button-text {
    color: #eaf3ff !important;
    padding: 0 !important;
}
.vp-pagehead .ui-button:hover .ui-button-text { color: #ffffff !important; }
/* .fa is a font, so colour applies; .ui-icon is the sprite, so it needs the
   filter instead - colour alone left it dark on the navy band. */
.vp-pagehead .ui-button .fa { color: #eaf3ff !important; }
.vp-pagehead .ui-icon { filter: brightness(0) invert(1) !important; }

/* Narrow screens: the controls drop under the title rather than squeezing it. */
@media (max-width: 700px) {
    .vp-pagehead { padding: 7px 12px; }
    .vp-pagehead__title { font-size: 12px; letter-spacing: .8px; }
    .vp-pagehead__actions { margin-left: 34px; }
}

/* ═══════════════════════════════════════════
   CUSTOMERS (Customer.xhtml)

   A list you can actually read a customer off - avatar, spend, loyalty, status - with a
   right-hand drawer that holds the profile, the last ten purchases, and the add/edit form.
   Deliberately lighter than the app's default navy-header table: this is a browsing screen
   people sit on, not a report they print.
═══════════════════════════════════════════ */

.vp-cust {
    padding: 18px 20px 28px;
    box-sizing: border-box;
}

/* ── Title row ─────────────────────────────────────────────────────── */
.vp-cust__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.vp-cust__title {
    font-size: 24px;
    font-weight: 800;
    color: #16233b;
    line-height: 1.2;
}
.vp-cust__sub {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 4px;
}
.vp-cust__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────────────────
   Sized for a toolbar, unlike the 200x60 clsButtonBig* used on transaction
   forms. !important throughout because p:commandButton renders a <button>
   that picks up the app's global button rules. */
.vp-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px !important;
    width: auto !important;
    padding: 0 16px !important;
    border-radius: 9px !important;
    border: 1px solid transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}
.vp-btn--primary {
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(90,158,47,.35);
}
.vp-btn--primary:hover { filter: brightness(1.05); }
.vp-btn--ghost {
    background: #ffffff !important;
    color: #1F3A5F !important;
    border-color: #d7dee9 !important;
}
.vp-btn--ghost:hover { background: #f3f6fb !important; }
.vp-btn--danger {
    background: #ffffff !important;
    color: #c0392b !important;
    border-color: #f0c4be !important;
}
.vp-btn--danger:hover { background: #fdecea !important; }

/* ── Search + status chips ─────────────────────────────────────────── */
.vp-cust__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.vp-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}
.vp-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa4b2;
    font-size: 13px;
    pointer-events: none;
}
.vp-search__input {
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box;
    padding: 0 12px 0 32px !important;
    border: 1px solid #d7dee9 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    font-size: 13px !important;
    color: #1f2937 !important;
}
.vp-search__input:focus {
    outline: none !important;
    border-color: #7BC043 !important;
    box-shadow: 0 0 0 3px rgba(123,192,67,.15) !important;
}
.vp-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vp-chip {
    display: inline-block;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid #d7dee9;
    background: #ffffff;
    color: #4b5563 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
}
.vp-chip:hover { background: #f3f6fb; }
.vp-chip--on {
    border-color: #7BC043;
    background: #f2fbe9;
    color: #3f6b1c !important;
}

/* ── The list ──────────────────────────────────────────────────────── */
.vp-card {
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.vp-tbl { width: 100%; }
/* Light header instead of the app-wide navy band - see the note at the top. */
.vp-tbl thead th {
    background: #f7f9fc !important;
    color: #6b7280 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: 11px 14px !important;
    border-bottom: 1px solid #e6ebf3 !important;
}
.vp-tbl thead th .ui-column-title { color: #6b7280 !important; }
.vp-tbl tbody td {
    padding: 11px 14px !important;
    border-bottom: 1px solid #f1f4f9 !important;
    font-size: 13px !important;
    color: #374151;
}
/* No zebra striping: the avatars already give the eye a rhythm, and stripes on top
   of them just make the row look busy. */
.vp-tbl tbody tr td { background: #ffffff !important; }
.vp-tbl tbody tr:hover td { background: #f7fbf3 !important; }
.vp-tbl tbody tr:last-child td { border-bottom: none !important; }

.vp-tbl .vp-col-num { text-align: right !important; }
.vp-tbl .vp-col-money { font-weight: 700 !important; color: #1e7a3c !important; }
.vp-tbl .vp-col-loyalty { color: #b45309 !important; font-weight: 600 !important; white-space: nowrap; }
.vp-tbl .vp-col-loyalty .fa { margin-right: 4px; }
.vp-tbl .vp-col-mono { font-family: "Consolas", "Courier New", monospace; font-size: 12.5px !important; }
.vp-tbl .vp-col-muted { color: #8b95a5 !important; white-space: nowrap; }
.vp-tbl .vp-col-status { width: 110px; }
.vp-tbl .vp-col-act { width: 128px; text-align: center !important; white-space: nowrap; }

/* Name cell: avatar + name over a secondary line (email, else address) */
.vp-custcell {
    display: flex !important;
    align-items: center;
    gap: 11px;
    text-decoration: none !important;
    min-width: 0;
}
.vp-custcell__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vp-custcell__name {
    font-size: 13.5px;
    font-weight: 700;
    color: #16233b;
    line-height: 1.25;
}
.vp-custcell:hover .vp-custcell__name { color: #5a9e2f; }
.vp-custcell__sub {
    font-size: 11.5px;
    color: #98a2b3;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

/* ── Avatar disc ───────────────────────────────────────────────────────
   Tone is derived from the transactor id (CustomerSummary.getAvatarTone), so a
   customer keeps the same colour on every load and becomes recognisable by it. */
.vp-avatar {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}
.vp-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.vp-avatar--1 { background: #fee2e2; color: #b91c1c; }
.vp-avatar--2 { background: #e0e7ff; color: #3730a3; }
.vp-avatar--3 { background: #dcfce7; color: #166534; }
.vp-avatar--4 { background: #fef3c7; color: #92400e; }
.vp-avatar--5 { background: #cffafe; color: #155e75; }
.vp-avatar--6 { background: #fae8ff; color: #86198f; }
.vp-avatar--edit { background: #e8eef8; color: #1F3A5F; }

/* ── Status badge ──────────────────────────────────────────────────── */
.vp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.vp-badge--vip     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.vp-badge--regular { background: #eef2f7; color: #465b76; border-color: #dfe6ef; }
.vp-badge--new     { background: #eef9f0; color: #276b3d; border-color: #cdecd4; }

/* ── Row actions ───────────────────────────────────────────────────── */
.vp-act {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin: 0 2px;
    border-radius: 7px;
    border: 1px solid #e3e8f0;
    color: #64748b !important;
    font-size: 12px;
    text-decoration: none !important;
}
.vp-act:hover { background: #eef3fb; color: #1F3A5F !important; border-color: #d7dee9; }
.vp-act--danger:hover { background: #fdecea; color: #c0392b !important; border-color: #f0c4be; }

/* ── The drawer ────────────────────────────────────────────────────────
   Sits on the shared .ui-sidebar rules further up; only the width (set inline on
   the component), the padding and the inner layout are page-specific. */
.vp-drawer {
    width: 520px;
    padding: 20px 22px 26px !important;
}
.vp-drawer__head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 42px 14px 0;   /* clears the sidebar's own close X */
    border-bottom: 1px solid #eef1f6;
    margin-bottom: 4px;
}
.vp-drawer__ident {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.vp-drawer__name {
    font-size: 17px;
    font-weight: 800;
    color: #16233b;
    line-height: 1.2;
}
.vp-drawer__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #8b95a5;
    flex-wrap: wrap;
}
.vp-drawer__sect { padding: 14px 0 4px; }
.vp-drawer__secttitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1F3A5F;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.vp-drawer__secttitle i { color: #7BC043; margin-right: 7px; font-size: 13px; }

/* Label/value rows - the read-only face of the same fields the edit form holds */
.vp-kv {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed #f0f2f6;
    font-size: 13px;
}
.vp-kv:last-child { border-bottom: none; }
.vp-kv__k {
    flex: 0 0 118px;
    color: #8b95a5;
    font-size: 12px;
    font-weight: 600;
}
.vp-kv__v {
    flex: 1 1 auto;
    color: #1f2937;
    min-width: 0;
    word-break: break-word;
}
.vp-kv__v--strong { font-weight: 700; color: #1e7a3c; }

.vp-drawer__note {
    background: #fffdf3;
    border: 1px solid #f2e8c9;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #6b5c2e;
    white-space: pre-wrap;
}

/* Recent purchases - a compact table, not the app's full report chrome */
.vp-minitbl thead th {
    background: #f7f9fc !important;
    color: #8b95a5 !important;
    font-size: 10px !important;
    letter-spacing: .7px;
    padding: 7px 9px !important;
    border-bottom: 1px solid #eef1f6 !important;
}
.vp-minitbl thead th .ui-column-title { color: #8b95a5 !important; }
.vp-minitbl tbody td {
    font-size: 12.5px !important;
    padding: 7px 9px !important;
    border-bottom: 1px solid #f5f7fa !important;
    background: #ffffff !important;
}
.vp-minitbl tbody tr:hover td { background: #f7fbf3 !important; }
.vp-minitbl .vp-col-num { text-align: right !important; font-weight: 600; }
.vp-minitbl .vp-col-muted { color: #8b95a5 !important; white-space: nowrap; }

.vp-drawer__msg { padding: 8px 0 0; }
.vp-drawer__msg:empty { display: none; }
.vp-drawer__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    margin-top: 6px;
    border-top: 1px solid #eef1f6;
}
.vp-drawer__actions .vp-btn { flex: 1 1 auto; }

@media (max-width: 820px) {
    .vp-cust { padding: 14px 12px 24px; }
    .vp-cust__title { font-size: 20px; }
    .vp-cust__toolbar { align-items: stretch; }
    .vp-search { max-width: none; }
    .vp-custcell__sub { max-width: 150px; }
}
@media (max-width: 600px) {
    .vp-drawer { width: 90vw !important; padding: 18px 16px 24px !important; }
    .vp-kv { flex-direction: column; gap: 2px; }
    .vp-kv__k { flex: 0 0 auto; }
}

/* ===========================================================================
   REPORT PAGES - CUSTOMER-STYLE TREATMENT
   Every report renders inside <h:form id="formReport">, so an #formReport
   prefix confines all of this to reports and never leaks into another page.

   The target is Customer.xhtml: white cards on a gutter, muted uppercase
   labels, a light-header table and small pill buttons - in place of the
   full-bleed filter strip, the navy datatable band, the 400x60 navy
   clsButtonBig* slabs and the raw print tables.

   Written against what the pages actually contain rather than a per-page id
   list: the 76 reports between them carry 30+ button ids (cmdbSearch,
   cmdbReset, cmdbView, cmdbEdit, cmdbSync, toggler, cmdbcancel*...), so every
   button in a report form takes the ghost pill by default and only the ones
   that submit the filter are promoted to the green primary. New reports
   inherit the treatment without being listed here.
   =========================================================================== */

/* -- Page shell ----------------------------------------------------------
   Deliberately NO padding on the form itself. Reports come in two shapes: on
   about a third of them .vp-pagehead is a sibling above the form, on the rest
   it lives inside it - and that band is a sticky, full-bleed navy bar, so any
   padding on #formReport would inset and shift it. Each block below carries
   its own 20px gutter instead, which lands the same either way. */

/* -- Filter panel: full-bleed strip becomes a card ----------------------- */
#formReport .clsPanelReportFilter {
    width: calc(100% - 40px);
    margin: 14px 20px;
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    padding: 12px 14px;
    border-collapse: separate;
    border-spacing: 8px 6px;
    box-sizing: border-box;
}
#formReport .clsPanelReportFilter > tbody > tr > td {
    vertical-align: middle;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    /* width:1% makes each cell shrink to its content, so the fields group at the
       left with the slack at the end - the way the flex .vp-filtercard lays out -
       instead of a table distributing them evenly across the whole card. */
    width: 1%;
}
#formReport .clsLabelReportFilter {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #6b7280 !important;
    white-space: nowrap;
    padding-right: 6px;
}
/* The flex variant of the same card, for filters built as labelled field
   stacks rather than a panelGrid table (ReportStock). Same shell, same
   metrics, so the two shapes are indistinguishable on screen. */
#formReport .vp-filtercard {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 14px 20px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    box-sizing: border-box;
}
#formReport .vp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* A filter with more than one action (Search + Reset) keeps them side by side and
   wrapping as a unit, instead of each button claiming its own field and Reset
   dropping to a second line the moment the card runs out of width. */
#formReport .vp-field--actions { flex-direction: row; align-items: flex-end; gap: 8px; }
/* The label may be a plain <label> (ReportStock) or an h:/p:outputLabel that has
   to stay a component because something ajax-renders it by id - e.g. lblDate1 on
   ReportOpenBalance, whose text changes with the selected date type. Both get the
   same micro-caps treatment, so wrapping a pair in .vp-field is all a page needs. */
#formReport .vp-field > label,
#formReport .vp-field > .ui-outputlabel,
#formReport .clsPanelReportFilter label,
#formReport .clsPanelReportFilter .ui-outputlabel {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #6b7280 !important;
    white-space: nowrap;
}
/* Controls sized to the stack rather than to a table cell. */
#formReport .vp-field > select,
#formReport .vp-field > input[type="text"],
#formReport .vp-field > .ui-inputfield,
#formReport .vp-field > .ui-selectonemenu,
#formReport .vp-field > .ui-calendar,
#formReport .vp-field > .ui-autocomplete { min-width: 150px; }
#formReport .vp-field > .ui-calendar > input,
#formReport .vp-field > .ui-autocomplete > input { width: 100% !important; }

/* Two thirds of the pages tag their fields with clsInputReportFilter; the rest
   drop a bare input or select into the same grid, so both are covered. */
#formReport .clsInputReportFilter,
#formReport .clsPanelReportFilter input[type="text"],
#formReport .clsPanelReportFilter select,
#formReport .clsPanelReportFilter .ui-inputfield,
#formReport .clsPanelReportFilter .ui-selectonemenu,
#formReport .vp-filtercard input[type="text"],
#formReport .vp-filtercard select,
#formReport .vp-filtercard .ui-inputfield,
#formReport .vp-filtercard .ui-selectonemenu {
    border: 1px solid #d7dee9 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    color: #1f2937 !important;
    height: 34px !important;
    padding: 4px 10px !important;
    background: #ffffff !important;
    box-sizing: border-box;
}
#formReport .clsInputReportFilter:focus,
#formReport .clsInputReportFilter.ui-state-focus,
#formReport .clsPanelReportFilter input[type="text"]:focus,
#formReport .clsPanelReportFilter select:focus,
#formReport .vp-filtercard input[type="text"]:focus,
#formReport .vp-filtercard select:focus,
#formReport .vp-filtercard .ui-inputfield:focus {
    border-color: #7BC043 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(123,192,67,.15) !important;
}

/* -- Buttons -------------------------------------------------------------
   Base = the .vp-btn--ghost pill, sized for a toolbar rather than the 200x60
   slabs the transaction forms use. */
/* The :not([style*="background"]) guard matters: a handful of buttons colour
   themselves inline to carry state - the dashboards' year picker highlights the
   selected year that way, and the tax-API reports use a small red button to
   flag an unsynced row. Repainting those white would quietly delete the signal,
   so a button that sets its own background keeps it. */
#formReport button:not([style*="background"]):not(.vp-row-action),
#formReport .ui-button:not([style*="background"]):not(.vp-row-action),
#formReport input[type="submit"]:not([style*="background"]):not(.vp-row-action) {
    height: 36px !important;
    width: auto !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    border: 1px solid #d7dee9 !important;
    background: #ffffff !important;
    color: #1F3A5F !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    box-shadow: none !important;
    cursor: pointer;
}
#formReport button:not([style*="background"]):not(.vp-row-action):hover,
#formReport .ui-button:not([style*="background"]):not(.vp-row-action):hover,
#formReport input[type="submit"]:not([style*="background"]):not(.vp-row-action):hover { background: #f3f6fb !important; }
/* PrimeFaces pads the inner span as well; zero it so the button padding is the
   only thing setting the width, but leave room for a left-hand icon. */
#formReport .ui-button-text-only .ui-button-text { padding: 0 !important; }
#formReport .ui-button-text-icon-left .ui-button-text { padding: 0 0 0 18px !important; }
#formReport .ui-button-icon-only:not(.vp-row-action) { width: 36px !important; padding: 0 !important; }

/* Report table "definitive icon" row actions (View/Edit/Credit Note/etc, one
   button per action instead of a dropdown). These opt out of the white pill
   rule above on purpose: that rule pairs a white background with the ui-icon
   sprite's white-invert filter further up this file, which made the icons
   invisible - white on white. Laid out with flex/nowrap on the cell itself so
   the icons sit in one row instead of wrapping onto their own line each,
   which is what was stretching every row's height. */
#formReport td.vp-row-actions {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
#formReport .ui-button.vp-row-action {
    background: #1F3A5F !important;
    border-radius: 6px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
}
#formReport .ui-button.vp-row-action:hover {
    background: #162c4a !important;
}

/* The filter submit is the one green thing on the page.
   These selectors deliberately carry .ui-button as well: the base rule above
   is #formReport .ui-button:not([style*="background"]), and a :not() takes the
   specificity of its argument, so a plain #formReport button[id$=...] would
   lose to it and come out white. */
#formReport .ui-button.clsButtonReportFilter,
#formReport .ui-button[id$="cmdbSearch"],
#formReport .ui-button[id$="cmdbSearch1"],
#formReport .ui-button[id$="cmdbSearch2"],
#formReport .ui-button[id$="cmdbRefresh"],
#formReport .ui-button[id$="cmdbGenerate"],
#formReport input[type="submit"][id$="cmdbSearch"] {
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 1px 3px rgba(90,158,47,.35) !important;
}
#formReport .ui-button.clsButtonReportFilter:hover,
#formReport .ui-button[id$="cmdbSearch"]:hover,
#formReport .ui-button[id$="cmdbSearch1"]:hover,
#formReport .ui-button[id$="cmdbSearch2"]:hover,
#formReport .ui-button[id$="cmdbRefresh"]:hover,
#formReport .ui-button[id$="cmdbGenerate"]:hover,
#formReport input[type="submit"][id$="cmdbSearch"]:hover {
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%) !important;
    filter: brightness(1.05);
}
/* Cancelling a posted transaction from a report is destructive: same quiet
   pill, but it says so. */
#formReport .ui-button[id*="cancel"],
#formReport .ui-button[id*="Cancel"],
#formReport .ui-button[id$="cmdbDelete"] {
    color: #c0392b !important;
    border-color: #f0c4be !important;
}
#formReport .ui-button[id*="cancel"]:hover,
#formReport .ui-button[id*="Cancel"]:hover,
#formReport .ui-button[id$="cmdbDelete"]:hover { background: #fdecea !important; }
/* On about two thirds of the reports .vp-pagehead sits INSIDE the form, and
   three of those (CashAccBal, PayableSummary, ReceivableSummary) carry their
   search button in the band itself. The band has its own chip treatment for
   controls (see .vp-pagehead .ui-button above); these rules hand it back,
   since a solid green pill on the navy band would shout over the title. */
#formReport .vp-pagehead .ui-button,
#formReport .vp-pagehead button,
#formReport .vp-pagehead input[type="submit"] {
    height: auto !important;
    line-height: normal !important;
    padding: 4px 13px !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    background-image: none !important;
    color: #eaf3ff !important;
    font-size: 11.5px !important;
    box-shadow: none !important;
}
#formReport .vp-pagehead .ui-button:hover,
#formReport .vp-pagehead button:hover,
#formReport .vp-pagehead input[type="submit"]:hover {
    background: rgba(255,255,255,.26) !important;
    border-color: rgba(255,255,255,.45) !important;
    color: #ffffff !important;
}

/* Print / statement / snapshot buttons sit on their own line above the table. */
#formReport .clsButtonBigLonger,
#formReport button[id$="cmdbPrint"],
#formReport button[id$="cmdbSnapshot"] { margin: 0 20px 14px !important; }

/* -- Tables: the Customer list, applied to every report datatable -------- */
#formReport .ui-datatable {
    margin: 0 20px 22px;
    background: #ffffff;
    border: 1px solid #e3e8f0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
/* The header facet carries the report title and the Columns toggler, so it
   becomes a toolbar row like .vp-cust__head rather than a centred caption. */
#formReport .ui-datatable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    text-align: left !important;
    background: #ffffff !important;
    color: #16233b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 1px solid #e6ebf3 !important;
}
/* Most pages pass tableStyle="width:100%", but not all of them - without it
   the table shrinks to its content and leaves a bare white gap inside the
   card, which reads as a broken layout rather than a short table. */
#formReport .ui-datatable > .ui-datatable-tablewrapper > table,
#formReport .ui-datatable > table { width: 100% !important; }
#formReport .ui-datatable thead th {
    background: #f7f9fc !important;
    color: #6b7280 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: 11px 14px !important;
    border: none !important;
    border-bottom: 1px solid #e6ebf3 !important;
}
/* Inherit, never hardcode: the header text lives in a span inside the th, and a
   page that overrides the header (ReportStockLedger keeps a navy band, at equal
   specificity but later in the document so it wins) colours only the th itself.
   Hardcoding grey here put grey text on that navy band - unreadable. Inheriting
   means the title always matches whatever colour won for the cell. */
#formReport .ui-datatable thead th .ui-column-title { color: inherit !important; }
#formReport .ui-datatable tbody td {
    padding: 11px 14px !important;
    border: none !important;
    border-bottom: 1px solid #f1f4f9 !important;
    font-size: 13px !important;
    color: #374151;
}
/* Plain rows go white. Rows carrying a status class keep their colour: the
   expiry, aging and stock-status reports encode meaning in it, and a flat
   white table would quietly throw that away. p:summaryRow is excluded for the
   same reason - it is the totals line, not a data row.

   A cell that paints itself inline is left alone for the same reason as the
   buttons: ReportStockLedger's Subtract column is white-on-red and its Balance
   and Detail columns are yellow, all set via p:column style, and forcing those
   white turned white text onto a white cell - the figures vanished. */
#formReport .ui-datatable tbody tr:not(.red):not(.amber):not(.green):not(.light-grey):not(.ui-datatable-summaryrow) td:not([style*="background"]) {
    background: #ffffff !important;
}
#formReport .ui-datatable tbody tr:not(.red):not(.amber):not(.green):not(.light-grey):not(.ui-datatable-summaryrow):hover td:not([style*="background"]) {
    background: #f7fbf3 !important;
}
#formReport .ui-datatable tbody tr:last-child td { border-bottom: none !important; }
/* Same meaning as the app-wide .red/.amber/.green rows, in the softer palette
   the rest of this design uses - a report where half the rows are flagged is
   still readable. */
#formReport .ui-datatable tbody tr.red td        { background: #fdecea !important; color: #9b2c1e !important; }
#formReport .ui-datatable tbody tr.amber td      { background: #fff7e6 !important; color: #8a5210 !important; }
#formReport .ui-datatable tbody tr.green td      { background: #eef9f0 !important; color: #276b3d !important; }
#formReport .ui-datatable tbody tr.light-grey td { background: #f7f9fc !important; color: #4b5563 !important; }
/* Totals line: a quiet band that closes the table, instead of the app-wide
   #fffde7 highlighter yellow that fought with the light header. */
#formReport .ui-datatable tbody tr.ui-datatable-summaryrow td {
    background: #f7f9fc !important;
    color: #16233b !important;
    font-weight: 700 !important;
    border-top: 1px solid #e6ebf3 !important;
    border-bottom: none !important;
}

/* Pagination: a quiet footer, active page in the primary green. */
#formReport .ui-paginator {
    background: #ffffff !important;
    border: none !important;
    border-top: 1px solid #f1f4f9 !important;
    padding: 8px !important;
    font-size: 12.5px !important;
}
#formReport .ui-paginator .ui-paginator-page,
#formReport .ui-paginator .ui-paginator-next,
#formReport .ui-paginator .ui-paginator-prev,
#formReport .ui-paginator .ui-paginator-first,
#formReport .ui-paginator .ui-paginator-last {
    display: inline-block;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    margin: 0 2px;
    padding: 0 6px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 7px !important;
    color: #4b5563 !important;
    font-weight: 600 !important;
}
#formReport .ui-paginator .ui-paginator-page.ui-state-active {
    background: #7BC043 !important;
    border-color: #7BC043 !important;
    color: #ffffff !important;
}
/* Rows-per-page dropdown: a native select, so it needs saying explicitly or it
   sits in the footer with default browser chrome. */
#formReport .ui-paginator .ui-paginator-rpp-options {
    height: 28px;
    margin: 0 8px 0 0;
    padding: 0 6px;
    border: 1px solid #d7dee9 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #4b5563 !important;
    font-size: 12px;
}

/* The red validation/status line above the table. */
#formReport [id$="pnlgActionMessage"],
#formReport [id$="pnlgMessage"] { margin: 0 20px 10px; }

/* -- Legacy print tables --------------------------------------------------
   Bill, CustomerCard, ProviderBill, SupplierCard and ProdInputOutput have no
   datatable at all - they are hand-built <table border="1"> statements with
   inline yellow / #ADD8E6 / #E5E5E5 band colours. Neutralise those into the
   same light table language, keeping the header band distinct. Restricted by
   [border] so ReportTransaction's datatable (which shares the id
   "tblTransaction") is untouched. */
#formReport table[id="tblTransaction"][border],
#formReport table[border]:not(.ui-datatable-data) {
    /* The inline style on these tables is width:100%, so the gutter that every
       other block on the page has needs !important to land. */
    width: calc(100% - 40px) !important;
    margin: 0 20px 22px;
    border-collapse: collapse;
    font-size: 11.5px !important;
    color: #374151;
}
#formReport table[id="tblTransaction"][border] td,
#formReport table[id="tblTransaction"][border] th,
#formReport table[border]:not(.ui-datatable-data) td,
#formReport table[border]:not(.ui-datatable-data) th {
    border: 1px solid #e6ebf3;
    padding: 7px 9px;
}
#formReport table[id="tblTransaction"][border] tr[style*="yellow"] td,
#formReport table[id="tblTransaction"][border] tr[style*="yellow"] th,
#formReport table[border]:not(.ui-datatable-data) tr[style*="yellow"] td,
#formReport table[border]:not(.ui-datatable-data) tr[style*="yellow"] th {
    background: #f7f9fc !important;
    color: #1F3A5F !important;
    font-weight: 700 !important;
}
#formReport table[id="tblTransaction"][border] tr[style*="#ADD8E6"] td,
#formReport table[id="tblTransaction"][border] tr[style*="#ADD8E6"] th,
#formReport table[border]:not(.ui-datatable-data) tr[style*="#ADD8E6"] td,
#formReport table[border]:not(.ui-datatable-data) tr[style*="#ADD8E6"] th {
    background: #f7f9fc !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 10.5px !important;
}
#formReport table[id="tblTransaction"][border] tr[style*="#E5E5E5"] td,
#formReport table[border]:not(.ui-datatable-data) tr[style*="#E5E5E5"] td {
    background: #ffffff !important;
}
#formReport table[id="tblTransaction"][border] tr[style*="#E5E5E5"]:hover td,
#formReport table[border]:not(.ui-datatable-data) tr[style*="#E5E5E5"]:hover td {
    background: #f7fbf3 !important;
}
/* The black "STATEMENT" sidebar block on report letterheads reads as navy. */
#formReport [style*="background-color: #000000"] {
    background-color: #1F3A5F !important;
}