@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600&display=swap');

/* ===========================================================================
   Chrome theme for the ADempiere web UI.

   Linked from index.zul, so it reaches BOTH the login page and the desktop.
   That is the reason it lives here rather than being injected by a panel:
   the login is a separate document, and a dashboard panel cannot style it.

   Panel-specific CSS (the KPI cards, the charts) still ships with its panel.
   This file covers only the shell: login, header, menu, dashboard chrome.
   =========================================================================== */

/* ---------------------------------------------------------------- login --
   The supplied logo is a white wordmark on a transparent ground, so it is
   unreadable on the white form. The card therefore carries a dark brand band
   at the top, where the logo sits, with the form below it on white.
   ------------------------------------------------------------------------ */
/* =====================================================================
   Login - split layout: artwork on the left, form on the right.

   The design is free-standing HTML; this page is not. ADempiere builds the
   login from LoginPanel.java as a table of login-label / login-field cells,
   and nothing can be added to it. So the layout, the palette, the type and
   the artwork are reproduced with CSS over that fixed markup, and the pieces
   the design adds as new content are called out in the comments below.
   ===================================================================== */

.login-window {
    background: #ffffff !important;
}
.login-window .z-window-embedded,
.login-window .z-window-embedded-cnt-noborder {
    height: 100% !important;
}

.z-window-embedded-cnt-noborder:has(> .login-box-body) {
    --art-w: 51.22%;          /* the design's 1.05fr of 2.05fr */
    --art-pad: 56px;
    --navy: #0B3550;
    --navy-2: #0E4064;
    --accent: #008FD3;
    --ink: #12181D;
    --ink-2: #4A545E;
    --ink-3: #5F6873;
    --muted: #6B7480;
    --line: #D5DCE2;

    position: relative !important;
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-items: center !important;
    background: #ffffff !important;
    min-height: 100% !important;
    font-family: 'Archivo', system-ui, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- left panel -------------------------------------------------------
   Eight pseudo-elements carry the artwork. They hang off the three markup
   blocks, which sit in the right column, but every one is positioned inside
   the left band, so nothing overlaps the form. */

/* the panel itself */
.z-window-embedded-cnt-noborder:has(> .login-box-body)::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: var(--art-w) !important;
    background: var(--navy) !important;
    overflow: hidden !important;
}
/* the cut-corner disc, top right of the panel - the logo's own silhouette */
.z-window-embedded-cnt-noborder:has(> .login-box-body)::after {
    content: '' !important;
    position: absolute !important;
    /* sized to end exactly at the panel edge: these pseudo-elements hang off
       the container, which does not clip at the artwork boundary the way the
       design's own overflow:hidden panel did */
    top: -170px !important;
    left: calc(var(--art-w) - 520px) !important;
    width: 520px !important; height: 520px !important;
    border-radius: 50% !important;
    background: var(--navy-2) !important;
    clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%) !important;
}
/* the outlined disc, bottom left */
.login-box-header::before {
    content: '' !important;
    position: absolute !important;
    bottom: -230px !important; left: -170px !important;
    width: 520px !important; height: 520px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%) !important;
}
/* the three skewed bars: one skewed box carrying three gradient layers */
.login-box-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: 74px !important;
    left: calc(var(--art-w) - 56px - 78px) !important;
    width: 78px !important; height: 96px !important;
    opacity: .5 !important;
    transform: skewX(-11deg) !important;
    background-image:
        linear-gradient(#1D5375, #1D5375),
        linear-gradient(#2A6B93, #2A6B93),
        linear-gradient(var(--accent), var(--accent)) !important;
    background-size: 20px 44px, 20px 68px, 20px 96px !important;
    background-position: 0 100%, 29px 100%, 58px 100% !important;
    background-repeat: no-repeat !important;
}
/* wordmark, top left */
.login-box-body::before {
    content: '' !important;
    position: absolute !important;
    top: 52px !important; left: var(--art-pad) !important;
    width: 190px !important; height: 38px !important;
    background-image: url('../images/AD10030HB.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: auto 32px !important;
}
/* The large mark is drawn, not scaled. The source asset is 302x72, so filling
   a 132px box meant enlarging it 1.83x and the letters went soft. The design
   itself specifies this shape in CSS - a disc with the corner cut - which is
   what makes it sharp at any size and on any display density. */
.login-box-body::after {
    content: 'AD' !important;
    position: absolute !important;
    top: 50% !important;
    left: var(--art-pad) !important;
    transform: translateY(-152px) !important;
    width: 132px !important;
    height: 132px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* nudges the glyphs away from the cut corner, as the design does */
    padding: 0 6px 6px 0 !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 53px !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    line-height: 1 !important;
    color: #ffffff !important;
}
/* headline and standfirst. Static copy is acceptable here because it is
   marketing text, not data - but it does not go through AD_Message, so it
   will not follow the language the user picks. */
.login-box-footer::before {
    content: 'Toda la operación\A en un solo sistema' !important;
    white-space: pre-line !important;
    position: absolute !important;
    top: 50% !important;
    left: var(--art-pad) !important;
    transform: translateY(0px) !important;
    max-width: 460px !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    letter-spacing: -.028em !important;
    line-height: 1.12 !important;
    color: #ffffff !important;
    text-align: left !important;
}
/* the rule beside the eyebrow */
.login-box-footer::after {
    content: '' !important;
    position: absolute !important;
    bottom: 58px !important;
    left: calc(var(--art-pad) + 250px) !important;
    width: calc(var(--art-w) - var(--art-pad) - 250px - 56px - 80px) !important;
    height: 1px !important;
    background: rgba(255,255,255,.13) !important;
}

/* --- right panel: the form -------------------------------------------- */
.login-box-header,
.login-box-body,
.login-box-footer {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 376px !important;
    position: static !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
}
.login-box-header { grid-row: 1 !important; }
.login-box-body   { grid-row: 2 !important; overflow: visible !important; }
/* The form table carries cellspacing="5", so its rows sit 15px inside the
   376px column while the footer does not - the button came out 30px wider
   than the fields and overflowed its own container. Matching that inset here
   lines the button up with the inputs exactly. */
.login-box-footer {
    grid-row: 3 !important;
    padding: 12px 15px 0 15px !important;
    box-sizing: border-box !important;
}

/* label over field, full width. The child combinators are load-bearing: ZK
   lays the language combobox out with a table of its own inside a cell, and
   an unscoped `.login-box-body tr` reaches into it and collapses the cell
   holding the input to zero width - the field disappears entirely. */
.login-box-body > tbody > tr,
.login-box-body > tbody > tr > td {
    display: block !important;
    width: 100% !important;
}
/* the logo row is redundant - the mark lives on the artwork */
.login-box-body > tbody > tr:first-child { display: none !important; }

/* The selector is doubled up on purpose: the global `.z-label` rule further
   down this sheet has the same specificity and, being later, was winning -
   the title rendered at 12px/500 like a field label. It also carries the
   same 15px inset as the form rows (the form table's cellspacing) so the
   heading lines up with the inputs instead of hugging the panel edge. */
span.login-box-header-txt.z-label,
.login-box-header-txt {
    position: static !important;
    top: auto !important;
    display: block !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    letter-spacing: -.022em !important;
    line-height: 1.15 !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
    text-transform: none !important;
    text-align: left !important;
    padding: 0 15px 26px 15px !important;
}

.login-label {
    display: block !important;
    font-family: 'Barlow Semi Condensed', 'Archivo', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink-3) !important;
    text-align: left !important;
    padding: 14px 0 7px 0 !important;
    white-space: nowrap !important;
}
.login-field { text-align: left !important; padding: 0 !important; }

/* "Forgot password" lands in a label cell and inherited the field-label
   treatment - uppercase and letter-spaced - which made it read as a caption. */
.login-box-body > tbody > tr > td.login-label:has(a) {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 14px !important;
    padding: 18px 0 0 0 !important;
}

/* :not() keeps the combobox's inner input out of this rule. Without it the
   input drew its own bordered white box inside the combobox's bordered white
   box - the double frame that made the selects look wrong. */
.login-box-body input[type="text"]:not(.z-combobox-inp),
.login-box-body input[type="password"],
.login-box-body .z-textbox {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1E293B !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    height: 44px !important;
    padding: 0 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.login-box-body input[type="text"]:not(.z-combobox-inp):hover,
.login-box-body input[type="password"]:hover,
.login-box-body .z-textbox:hover {
    border-color: #93C5FD !important;
    background-color: #F8FAFC !important;
}
.login-box-body input[type="text"]:not(.z-combobox-inp):focus,
.login-box-body input[type="password"]:focus,
.login-box-body .z-textbox:focus {
    outline: none !important;
    background-color: #ffffff !important;
    border-color: var(--accent, #008FD3) !important;
    box-shadow: 0 0 0 3px rgba(0, 143, 211, 0.15) !important;
}

/* Only the combobox's outer box is touched. Its inner input is measured and
   sized by ZK in JavaScript at render time, so styling that input strands it
   at whatever width was computed - which is how the language field vanished
   earlier. */
.login-box-body .z-combobox,
.login-box-body .z-combobox > table {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* RolePanel reuses these classes for Role, Client, Organization and
   Warehouse - four comboboxes in a row. Only the outer box is styled, so the
   field reads like the text inputs beside it without disturbing the inner
   input ZK sizes in JavaScript. */
.login-box-body .z-combobox {
    height: 44px !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 0 10px 0 14px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.login-box-body .z-combobox:hover {
    border-color: #93C5FD !important;
    background-color: #F8FAFC !important;
}
.login-box-body .z-combobox > table { background: none !important; }
/* ZK's dropdown arrow is replaced with a sleek modern SVG chevron down */
.login-box-body .z-combobox-img { display: none !important; }
.login-box-body .z-combobox-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    border: 0 !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 16px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.login-box-body .z-combobox-btn::after {
    display: none !important;
    content: none !important;
}
.login-box-body .z-combobox-btn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23008FD3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
.login-box-body .z-combobox-inp,
.login-box-body .z-combobox-inp-readonly,
.login-box-body .z-combobox input,
.login-box-body input.z-combobox-inp,
.login-box-body input.z-combobox-inp[readonly] {
    border: 0 !important;
    height: 100% !important;
    background: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    /* The same weight as the text fields above them. At 600 every selection
       field came out bold - the language on the login, and role, tenant,
       organisation and warehouse on the role panel, which uses this same
       markup - and read as four emphasised lines in a row. */
    font-weight: 500 !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    opacity: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}
.login-box-body .z-combobox-inp:focus { outline: none !important; }
.login-box-body .z-combobox:focus-within {
    background-color: #ffffff !important;
    border-color: var(--accent, #008FD3) !important;
    box-shadow: 0 0 0 3px rgba(0, 143, 211, 0.15) !important;
}

.login-error {
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #c02626 !important;
    text-align: left !important;
    width: auto !important;
}

/* --- confirm buttons --------------------------------------------------
   ConfirmPanel builds both OK and Cancel and puts them in one unclassed div,
   stacked. Two full-width blue bars, each with a 16px dark icon on a blue
   ground, is what "the buttons look bad" was.

   The label is read from the span's own title attribute, which ADempiere
   fills from its message catalogue - already translated. That is why no text
   is hard-coded here: attr(title) follows the login language selector, a
   literal would not. */
.login-box-footer-pnl div:has(> span.z-button) {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
}
/* The stock theme gives this panel `width: 420px; margin: 0 10px`, which is
   what made the OK button wider than the fields and pushed it past its own
   footer. It follows the footer's box instead, and the four spacer cells ZK
   emits around the buttons are collapsed so the button cell keeps the full
   width - otherwise the buttons start 10px to the right of the inputs. */
.login-box-footer-pnl {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
    float: none !important;
    position: static !important;
}
.login-box-footer-pnl td:not(:has(span.z-button)) {
    width: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}
.login-box-footer-pnl td:has(span.z-button) {
    width: 100% !important;
    padding: 0 !important;
}

.login-box-footer-pnl span.z-button[id^="Ok"],
.login-box-footer-pnl span.z-button[id^="Cancel"] {
    flex: 1 1 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
    border-radius: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    cursor: pointer !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    transition: background .14s ease, border-color .14s ease !important;
}
.login-box-footer-pnl span.z-button[id^="Ok"] {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #ffffff !important;
}
.login-box-footer-pnl span.z-button[id^="Ok"]:hover {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
}
.login-box-footer-pnl span.z-button[id^="Cancel"] {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-2) !important;
}
.login-box-footer-pnl span.z-button[id^="Cancel"]:hover { background: #F4F6F8 !important; }

/* ZK 3.6 binds the button's click handler to its inner sprite table, not to
   the span. Shrinking that table to the icon left it 22x17 inside a 419x48
   button, so most of the surface - including the label - was dead. The table
   is stretched to fill the button instead, and the label rides above it as a
   layer that does not intercept the pointer. */
.login-box-footer-pnl span.z-button[id^="Ok"],
.login-box-footer-pnl span.z-button[id^="Cancel"] {
    position: relative !important;
    overflow: hidden !important;
}
.login-box-footer-pnl span.z-button[id^="Ok"] > table,
.login-box-footer-pnl span.z-button[id^="Cancel"] > table {
    width: 100% !important;
    height: 100% !important;
    display: table !important;
    border-collapse: collapse !important;
    background: none !important;
}
.login-box-footer-pnl span.z-button[id^="Ok"] > table td,
.login-box-footer-pnl span.z-button[id^="Cancel"] > table td {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}
/* the icon would sit under the label; the label alone reads better */
.login-box-footer-pnl span.z-button[id^="Ok"] img,
.login-box-footer-pnl span.z-button[id^="Cancel"] img { display: none !important; }

/* the label comes from the span's own title, which ADempiere fills from its
   message catalogue - already translated, so it follows the language the
   user picked. A literal here would not. */
.login-box-footer-pnl span.z-button[id^="Ok"]::after,
.login-box-footer-pnl span.z-button[id^="Cancel"]::after {
    content: attr(title) !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

/* The version label doubles as the design's eyebrow caption. It is the one
   piece of build information the markup already provides; implementation
   vendor and build date are dynamic values CSS cannot reach. Host, database,
   schema and user are deliberately never shown: this page is public. */
.login-box-footer > .z-label {
    position: absolute !important;
    left: auto !important;
    right: calc(100% - var(--art-w) + var(--art-pad)) !important;
    top: auto !important;
    bottom: 52px !important;
    width: auto !important;
    margin: 0 !important;
    font-family: 'Barlow Semi Condensed', 'Archivo', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #A9BECD !important;
    -webkit-text-fill-color: #A9BECD !important;
}

.login-box-body a, .login-box-footer a {
    color: var(--accent) !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
.login-box-body a:hover, .login-box-footer a:hover {
    color: var(--navy) !important;
    text-decoration: none !important;
}
.login-box-body .z-checkbox,
.login-box-body span.z-checkbox {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    vertical-align: middle !important;
    gap: 8px !important;
    margin: 12px 0 6px 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    height: auto !important;
}

.login-box-body .z-checkbox input[type="checkbox"],
.login-box-body span.z-checkbox input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    accent-color: var(--accent) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: 0 !important;
}

.login-box-body .z-checkbox-cnt,
.login-box-body .z-checkbox label,
.login-box-body span.z-checkbox label,
.login-box-body span.z-checkbox .z-checkbox-cnt {
    display: inline-block !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink-2) !important;
    -webkit-text-fill-color: var(--ink-2) !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
    top: 0 !important;
}

.login-east-panel, .login-west-panel { display: none !important; }

/* ---------------------------------------------------------------- shell --
   Header, main menu and dashboard chrome. Extracted verbatim from the Java
   class that used to inject it, so it now loads for every page instead of
   only where a dashboard panel happens to be rendered.
   ------------------------------------------------------------------------ */
.z-portal-layout{box-sizing:border-box!important;padding-left:12px!important;padding-right:12px!important;overflow-x:hidden!important}
.z-portal-layout-inner{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.z-portal-children .z-panel{border:0!important;background:transparent!important}
.z-portal-children .z-panel-header{background:none!important;background-image:none!important;border:0!important;height:auto!important;padding:2px 2px 8px 2px!important;font-family:'Segoe UI',Roboto,Arial,sans-serif!important;font-size:13px!important;font-weight:700!important;color:#0f172a!important;line-height:1.3!important}
.z-portal-children .z-panel-tl,.z-portal-children .z-panel-tr,.z-portal-children .z-panel-hl,.z-portal-children .z-panel-hr,.z-portal-children .z-panel-bl,.z-portal-children .z-panel-br,.z-portal-children .z-panel-btm{background:none!important;border:0!important}
.z-portal-children .z-panel-body{border:0!important;background:transparent!important}
.z-portal-children .z-panel-children{background:#fff!important;border:1px solid #e6e9f0!important;border-radius:10px!important;padding:6px!important;box-shadow:0 1px 2px rgba(16,24,40,.05)!important}
.z-portal-children .z-tree{border:0!important;background:transparent!important}
.z-portal-children .z-tree-body{border:0!important;background:transparent!important}
.z-portal-children .z-tree-header,.z-portal-children .z-tree-footer,.z-portal-children .z-tree-faker{display:none!important}
.z-portal-children .z-tree-row{background:none!important}
.z-portal-children .z-tree-cell{font-family:'Segoe UI',Roboto,Arial,sans-serif!important;font-size:12px!important;color:#334155!important;padding:5px 8px!important;border:0!important;border-radius:6px!important;cursor:pointer;transition:background .12s ease}
.z-portal-children .z-tree-cell:hover{background:#f1f5f9!important}
.z-portal-children .z-tree-row-seld .z-tree-cell{background:#e4ecf7!important;color:#1c4e8a!important}
.z-portal-children .z-checkbox{display:none!important}
.z-portal-children .z-button-tl,.z-portal-children .z-button-tm,.z-portal-children .z-button-tr,.z-portal-children .z-button-cl,.z-portal-children .z-button-cm,.z-portal-children .z-button-cr,.z-portal-children .z-button-bl,.z-portal-children .z-button-bm,.z-portal-children .z-button-br{background:none!important;background-image:none!important;border:0!important;height:auto!important}
.z-portal-children .z-button-cm,.z-portal-children .z-button-cm *{color:#334155!important;font-family:'Segoe UI',Roboto,Arial,sans-serif!important;font-size:12px!important;text-align:left!important;white-space:nowrap!important}
.z-portal-children span.z-button,.z-portal-children .z-toolbar-button{font-family:'Segoe UI',Roboto,Arial,sans-serif!important;font-size:12px!important;color:#334155!important;background:none!important;background-image:none!important;border:0!important;border-radius:6px!important;text-decoration:none!important;display:inline-block;transition:background .12s ease}
.z-portal-children span.z-button:hover .z-button-cm,.z-portal-children span.z-button:hover .z-button-cm *{color:#1c4e8a!important}
.z-portal-children .z-toolbar-button{display:block!important;padding:6px 8px!important;margin:0!important;line-height:16px!important;text-decoration:none!important}
.z-portal-children .z-toolbar-button:hover{background:#f1f5f9!important;color:#1c4e8a!important;text-decoration:none!important}
.z-portal-children .z-toolbar-button-cnt{font-weight:400!important;color:inherit!important}
.z-portal-children .z-tree-cell-cnt{background:none!important;background-image:none!important;color:inherit!important;padding:0!important}
.z-portal-children .z-tree-row-over .z-tree-cell,.z-portal-children .z-tree-row-over-seld .z-tree-cell{background:#f1f5f9!important}
.desktop-header{background-image:none!important;background:#003764!important}
.desktop-header-left{margin:0 0 0 16px!important}
.desktop-header-left img{height:30px!important;width:auto!important;display:block!important}
.desktop-header-right{margin:0!important;padding-right:16px!important}
.desktop-header-right.erpya-user-menu-ready .erpya-user-original-panel{display:none!important}
.erpya-user-source{display:none!important}
/* The row of plain buttons is replaced by the avatar menu in script, which
   is hidden only after the custom menu is mounted. Keeping the stock panel
   visible until then avoids an empty user area during the first ZK render. */
.desktop-header-right .z-vbox{visibility:visible!important}
.desktop-header,.desktop-header-right,.desktop-header-right .z-center-body,.desktop-header-right .z-vbox{overflow:visible!important}
.z-north:has(.desktop-header),.z-north-body:has(.desktop-header){overflow:visible!important;z-index:10000!important}
.desktop-header-right{position:relative!important;z-index:10000!important}
.desktop-header-right .z-center-body{position:relative!important;z-index:10000!important}
#erpya-user-menu{position:absolute!important;right:12px!important;left:auto!important;top:4px!important;display:flex!important;align-items:center!important;gap:8px!important;min-height:58px!important}
.erpya-user-badge{display:block!important;text-align:right!important;cursor:pointer!important;user-select:none!important;max-width:430px!important;min-width:0!important}
.erpya-user-name-label{display:block!important;font-family:'Segoe UI',Roboto,Arial,sans-serif!important;font-size:13px!important;font-weight:600!important;color:#ffffff!important;line-height:1.2!important;white-space:nowrap!important;letter-spacing:.01em!important}
.erpya-user-role-label,.erpya-user-org-label{display:inline-block!important;vertical-align:middle!important;font-family:'Segoe UI',Roboto,Arial,sans-serif!important;font-size:11px!important;font-weight:400!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:200px!important}
.erpya-user-role-label{color:#cfe3f5!important}
.erpya-user-org-label{color:#a9cce3!important}
.erpya-user-org-label::before{content:'·';display:inline-block!important;margin:0 6px!important;color:#80b5d3!important}
.erpya-user-badge:hover .erpya-user-name-label{color:#cfe3f5!important}
.erpya-user-trigger{position:relative}
.erpya-user-trigger{display:flex!important;align-items:center!important;gap:7px!important;padding:4px 8px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#ffffff!important;cursor:pointer!important;font:600 12px 'Segoe UI',sans-serif!important;position:relative!important;z-index:10001!important;pointer-events:auto!important}
.erpya-user-trigger:hover{background:rgba(255,255,255,.14)!important}
.erpya-user-avatar{display:inline-block;width:32px;height:32px;border-radius:50%;background:#E4F1F8 url("/webui/images/dark/user.svg") center/18px 18px no-repeat}
.erpya-user-trigger::after{content:'';width:7px;height:7px;border-right:1.5px solid #CFE3F5;border-bottom:1.5px solid #CFE3F5;transform:rotate(45deg) translateY(-2px)}
.erpya-user-trigger{position:relative}
.erpya-user-dropdown{display:none;position:absolute!important;right:0!important;top:40px!important;min-width:250px;padding:8px;background:#ffffff;border:1px solid #D9E3EC;border-radius:8px;box-shadow:0 12px 30px rgba(15,23,42,.18);z-index:10002!important;pointer-events:auto!important;text-align:left}
#erpya-user-menu.is-open .erpya-user-dropdown{display:block}
.erpya-user-identity{padding:8px 10px 10px;border-bottom:1px solid #E8EEF5;color:#174A70;font:600 13px 'Segoe UI',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erpya-user-action{display:block;width:100%;padding:8px 10px;border:0;border-radius:5px;background:transparent;color:#334155;text-align:left;cursor:pointer;font:400 12px 'Segoe UI',sans-serif}
.erpya-user-action:hover{background:#EFF5FB;color:#174A70}
.erpya-user-action::before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-4px;background-position:center;background-repeat:no-repeat;background-size:16px 16px;opacity:.82}
.erpya-user-action:nth-of-type(1)::before{background-image:url('/webui/images/dark/Info.svg')}
.erpya-user-action:nth-of-type(2)::before{background-image:url('/webui/images/dark/Preference.svg')}
.erpya-user-action:nth-of-type(3)::before{background-image:url('/webui/images/dark/menu-window.svg')}
.erpya-user-action:nth-of-type(4)::before{background-image:url('/webui/images/dark/Refresh.svg')}
.erpya-user-action:nth-of-type(5)::before{background-image:url('/webui/images/dark/Logout.svg')}
.erpya-dashboard-icon{width:20px!important;height:20px!important;object-fit:contain!important;vertical-align:middle!important}
.dashboard-welcome-panel{width:fit-content!important;max-width:min(520px,calc(100vw - 48px))!important;margin:12px 0 14px 8px!important;background:#ffffff!important;background-color:#ffffff!important;border:1px solid #9bd4ee!important;border-left:4px solid #008fd3!important;border-radius:10px!important;box-shadow:0 8px 22px rgba(15,23,42,.12)!important;overflow:hidden!important}
.dashboard-welcome-panel .z-panel-body,.dashboard-welcome-panel .z-panel-children{background:#ffffff!important;background-color:#ffffff!important;border:0!important;box-shadow:none!important}
.dashboard-welcome{display:block!important;max-width:100%!important;overflow:hidden!important;padding:13px 18px!important;background:#ffffff!important;background-color:#ffffff!important;color:#0b4f73!important;font-family:'Archivo','Segoe UI',sans-serif!important;font-size:22px!important;font-weight:600!important;letter-spacing:0!important;line-height:1.3!important;white-space:nowrap!important;text-overflow:ellipsis!important}
.z-portal-children img[src$="mWindow.png"]{content:url("/webui/images/dark/menu-window.svg")!important}
.z-portal-children img[src$="mProcess.png"]{content:url("/webui/images/dark/menu-process.svg")!important}
.z-portal-children img[src$="mReport.png"]{content:url("/webui/images/dark/menu-report.svg")!important}
.z-portal-children img[src$="InfoProduct16.png"]{content:url("/webui/images/dark/view-product.svg")!important}
.z-portal-children img[src$="InfoBPartner16.png"]{content:url("/webui/images/dark/view-partner.svg")!important}
.z-portal-children img[src$="InfoAccount16.png"]{content:url("/webui/images/dark/view-account.svg")!important}
.z-portal-children img[src$="InfoSchedule16.png"]{content:url("/webui/images/dark/view-schedule.svg")!important}
.z-portal-children img[src$="Info16.png"]{content:url("/webui/images/dark/menu-browser.svg")!important}
.z-portal-children img[src$="mWindow.png"],
.z-portal-children img[src$="mProcess.png"],
.z-portal-children img[src$="mReport.png"],
.z-portal-children img[src$="InfoProduct16.png"],
.z-portal-children img[src$="InfoBPartner16.png"],
.z-portal-children img[src$="InfoAccount16.png"],
.z-portal-children img[src$="InfoSchedule16.png"],
.z-portal-children img[src$="Info16.png"]{width:20px!important;height:20px!important;object-fit:contain!important;vertical-align:middle!important}
.desktop-header-font{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important;font-size:12px!important}
.desktop-header .z-label{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-weight:600!important;letter-spacing:.01em!important}
.desktop-header .z-toolbar-button{color:#cfe3f5!important;-webkit-text-fill-color:#cfe3f5!important;text-decoration:none!important;padding:4px 8px!important;border-radius:5px!important;transition:background .12s ease}
.desktop-header .z-toolbar-button:hover{background:rgba(255,255,255,.14)!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;text-decoration:none!important}
.desktop-header .z-separator{opacity:.35!important}
.z-west:has(.z-tree),.z-west-body:has(.z-tree){background:#f7f9fc!important}
.desktop-header .z-west,.desktop-header .z-west-body{background:transparent!important;overflow:visible!important}
.z-west .z-panel-children,.z-west .z-panel-body,.z-west .z-tree,.z-west .z-tree-body{background:transparent!important;border:0!important}
.z-west .z-tree-cell{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important;font-size:12px!important;color:#334155!important;padding:3px 6px!important;height:auto!important;border-radius:5px!important;cursor:pointer;transition:background .1s ease}
.z-west .z-tree-cell:hover{background:#e8eef7!important}
.z-west .z-tree-row{background:none!important}
.z-west .z-tree-row-seld .z-tree-cell{background:#dbe7f6!important;color:#0f172a!important;font-weight:600!important}
.z-west .z-tree-cell-cnt{background:none!important;color:inherit!important}
.z-west .z-tree-cell img{display:inline-block!important;width:16px!important;height:16px!important;object-fit:contain!important;vertical-align:middle!important;margin-right:6px!important;opacity:.92!important}
.z-west .z-tree-row-seld .z-tree-cell img{opacity:1!important;filter:saturate(1.15)!important}

/* --- the remaining copy from the design ------------------------------
   Eight pseudo-elements were already spent on the artwork, so these two hang
   off the right-hand title and the button panel. Both sit inside the left
   band, so neither touches the form.

   This copy is static: it does not come from AD_Message and so will not
   follow the language the user picks. That is the trade for not overriding
   LoginPanel.java - the field labels and buttons around it DO translate,
   because those strings are ADempiere's own. */
.login-box-header-txt::before {
    content: 'Ventas, compras, almacén y finanzas conectados: un dato se registra una vez y viaja por toda la empresa.' !important;
    position: absolute !important;
    top: 50% !important;
    left: var(--art-pad) !important;
    transform: translateY(118px) !important;
    max-width: 430px !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 16.5px !important;
    /* The design's 300 weight measures fine for contrast (7.8:1) but reads
       washed out: thin strokes on a dark ground lose perceived weight. 400
       and a lighter tone keep the same hierarchy and actually read. */
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    color: #E8F1F8 !important;
    -webkit-text-fill-color: #E8F1F8 !important;
}
/* Implementer attribution, under the divider row. Plain text rather than a
   link: CSS generated content cannot carry an href, and turning it into a
   real anchor would mean overriding LoginPanel.java. */
.login-box-footer-pnl::after {
    content: 'erpya.com' !important;
    position: absolute !important;
    left: var(--art-pad) !important;
    bottom: 26px !important;
    font-family: 'Barlow Semi Condensed', 'Archivo', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .12em !important;
    color: rgba(255, 255, 255, .42) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .42) !important;
    white-space: nowrap !important;
}


.login-box-footer-pnl::before {
    content: 'Gestión empresarial integrada' !important;
    position: absolute !important;
    left: var(--art-pad) !important;
    bottom: 52px !important;
    font-family: 'Barlow Semi Condensed', 'Archivo', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #A9BECD !important;
    -webkit-text-fill-color: #A9BECD !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   PASSWORD SHOW / HIDE TOGGLE
   login-ui.js appends button.pwd-toggle to document.body and positions it
   over the field. It is deliberately NOT placed inside the field cell: any
   foreign element inside the subtree ZK rendered breaks ZK's re-render after
   a failed sign-in and leaves the window blank.
   ========================================================================== */

/* No class is set on ZK's cell either - the padding is applied straight to
   the input so nothing about ZK's own markup changes. */
#rowPassword input {
    padding-right: 46px !important;
    box-sizing: border-box !important;
}

/* The input keeps all existing styles, just needs room for the button */
.pwd-toggle {
    position: fixed !important;
    z-index: 2000 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    /* Hidden until login-ui.js has measured the password field and placed it.
       It is only shown while that field exists and is visible. */
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8A939C !important;
    border-radius: 4px !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    outline: none !important;
}

.pwd-toggle.is-visible {
    display: flex !important;
}

.pwd-toggle:hover {
    color: var(--accent, #008FD3) !important;
    background: rgba(0, 143, 211, 0.08) !important;
}

.pwd-toggle svg {
    display: block !important;
    pointer-events: none !important;
}

/* ==========================================================================
   NEXOINT-STYLE COMBOBOX DROPDOWN POPUP
   ZK 3.6 renders the dropdown popup with class z-combobox-pp.
   ZK 3.6 items use classes with hyphen: z-combo-item, z-combo-item-seld,
   z-combo-item-over, z-combo-item-over-seld, z-combo-item-text, z-combo-item-img.
   We support both z-combo-item and z-comboitem syntax.
   ========================================================================== */

/* Remove any ZK shadow / iframe wrapper */
.z-combobox-shadow,
.z-shadow,
.z-combobox-pp-shadow,
div.z-combobox-shadow,
table.z-combobox-shadow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
    background: none !important;
    border: none !important;
}

/* Dropdown Popup container - Compact, Elegant ERP density */
.z-combobox-pp {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding: 4px !important;
    margin-top: 2px !important;
    z-index: 99999 !important;
    max-height: 220px !important;
    /*  ZK measures the list and writes the width it needs - 740px for a
        lookup whose labels carry the module name - so a flat 300 cap cut the
        text off, and with overflow-x hidden there was no way to reach the
        rest.  The ceiling stays, or one long label would stretch the popup
        across a wide monitor, but it is high enough for a real label and
        follows the viewport on a laptop.  */
    max-width: min(860px, 92vw) !important;
    min-width: 170px !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Other ZK popups use the same viewport-safe behavior as modal windows. */
.z-window-popup {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94A3B8 #F1F5F9 !important;
}
.z-popup:has(.z-listbox),
.z-popup:has(.z-combobox),
.z-window-popup:has(.z-listbox),
.z-window-popup:has(.z-combobox) {
    width: min(1100px, calc(100vw - 32px)) !important;
    max-width: min(1100px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/*  And when a label does reach the ceiling, let it end in an ellipsis
    rather than mid-letter, so it reads as shortened instead of broken.  */
.z-combobox-pp .z-combo-item-text,
.z-combobox-pp .z-comboitem-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Reset Inner Table */
.z-combobox-pp table,
.z-combobox-pp tbody {
    width: max-content !important;
    min-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 1px !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Icon/Image Column */
.z-combobox-pp .z-combo-item-img,
.z-combobox-pp .z-comboitem-img,
.z-combobox-pp td[class*="-img"] {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* 1. DEFAULT ITEM ROW & CELL */
.z-combobox-pp tr,
.z-combobox-pp tr.z-combo-item,
.z-combobox-pp tr.z-comboitem {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    transition: background-color 0.1s ease !important;
}

.z-combobox-pp td,
.z-combobox-pp td.z-combo-item-text,
.z-combobox-pp td.z-comboitem-text,
.z-combobox-pp td.z-combo-item,
.z-combobox-pp td.z-comboitem,
.z-combobox-pp .z-combo-item td,
.z-combobox-pp .z-comboitem td {
    padding: 4px 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    text-align: left !important;
    white-space: nowrap !important;
    border-radius: 5px !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
}

.z-combobox-pp a,
.z-combobox-pp a.z-combo-item-text,
.z-combobox-pp a.z-comboitem-text {
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    background: transparent !important;
}

/* Secondary description text (e.g. In menu search or items with description) */
.z-combobox-pp .z-combo-item-inner,
.z-combobox-pp .z-comboitem-inner,
.z-combobox-pp span.z-combo-item-inner,
.z-combobox-pp span.z-comboitem-inner,
.z-combobox-pp .z-combo-item-cnt,
.z-combobox-pp .z-comboitem-cnt {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    font-style: normal !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.z-combobox-pp .z-combo-item-inner:empty,
.z-combobox-pp .z-comboitem-inner:empty,
.z-combobox-pp .z-combo-item-cnt:empty,
.z-combobox-pp .z-comboitem-cnt:empty {
    display: none !important;
}

/* The accounting search contains many fields. Keep its chooser readable and
   make the list itself the scroll container instead of allowing labels to
   collapse into one character per line. */
.z-combobox-pp {
    max-height: min(420px, calc(100vh - 180px)) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}
.z-combobox-pp table,
.z-combobox-pp tbody,
.z-combobox-pp tr,
.z-combobox-pp td,
.z-combobox-pp td * {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* 2. SELECTED ITEM (Active selection e.g. 'English') - Nexoint Brand Blue Accent */
.z-combobox-pp tr.z-combo-item-seld,
.z-combobox-pp tr.z-comboitem-seld,
.z-combobox-pp tr.z-combo-item-sel,
.z-combobox-pp tr.z-comboitem-sel,
.z-combobox-pp tr.z-combo-item-selected,
.z-combobox-pp tr.z-comboitem-selected,
.z-combobox-pp tr[class*="-seld"],
.z-combobox-pp tr[class*="-sel"],
.z-combobox-pp td.z-combo-item-seld,
.z-combobox-pp td.z-comboitem-seld,
.z-combobox-pp td.z-combo-item-sel,
.z-combobox-pp td.z-comboitem-sel,
.z-combobox-pp td[class*="-seld"],
.z-combobox-pp td[class*="-sel"],
.z-combobox-pp [class*="combo-item-sel"],
.z-combobox-pp [class*="comboitem-sel"] {
    background-color: #EFF6FF !important;
    background: #EFF6FF !important;
    border-radius: 5px !important;
}

/* Force bright readable brand blue text on ALL elements within selected row */
.z-combobox-pp tr.z-combo-item-seld *,
.z-combobox-pp tr.z-comboitem-seld *,
.z-combobox-pp tr.z-combo-item-sel *,
.z-combobox-pp tr.z-comboitem-sel *,
.z-combobox-pp tr.z-combo-item-selected *,
.z-combobox-pp tr.z-comboitem-selected *,
.z-combobox-pp tr[class*="-seld"] *,
.z-combobox-pp tr[class*="-sel"] *,
.z-combobox-pp td.z-combo-item-seld *,
.z-combobox-pp td.z-comboitem-seld *,
.z-combobox-pp td.z-combo-item-sel *,
.z-combobox-pp td.z-comboitem-sel *,
.z-combobox-pp td[class*="-seld"] *,
.z-combobox-pp td[class*="-sel"] *,
.z-combobox-pp [class*="combo-item-sel"] *,
.z-combobox-pp [class*="comboitem-sel"] *,
.z-combobox-pp tr.z-combo-item-seld .z-combo-item-text,
.z-combobox-pp tr.z-comboitem-seld .z-comboitem-text,
.z-combobox-pp tr.z-combo-item-seld a,
.z-combobox-pp tr.z-combo-item-seld span,
.z-combobox-pp tr.z-combo-item-seld td {
    color: #008FD3 !important;
    -webkit-text-fill-color: #008FD3 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.z-combobox-pp tr.z-combo-item-seld .z-combo-item-inner,
.z-combobox-pp tr.z-comboitem-seld .z-comboitem-inner,
.z-combobox-pp tr[class*="-seld"] .z-combo-item-inner,
.z-combobox-pp tr[class*="-sel"] .z-combo-item-inner {
    color: #0284C7 !important;
    -webkit-text-fill-color: #0284C7 !important;
    font-weight: 400 !important;
}

/* 3. HOVER STATE ON UNSELECTED ITEM */
.z-combobox-pp tr:hover:not(.z-combo-item-seld):not(.z-comboitem-seld):not([class*="-seld"]):not([class*="-sel"]),
.z-combobox-pp tr.z-combo-item-over:not(.z-combo-item-seld):not([class*="-seld"]):not([class*="-sel"]),
.z-combobox-pp tr.z-comboitem-over:not(.z-comboitem-seld):not([class*="-seld"]):not([class*="-sel"]),
.z-combobox-pp td.z-combo-item-over:not(.z-combo-item-seld):not([class*="-seld"]):not([class*="-sel"]),
.z-combobox-pp td.z-comboitem-over:not(.z-comboitem-seld):not([class*="-seld"]):not([class*="-sel"]) {
    background-color: #F1F5F9 !important;
    background: #F1F5F9 !important;
    border-radius: 5px !important;
}

.z-combobox-pp tr:hover:not(.z-combo-item-seld):not(.z-comboitem-seld):not([class*="-seld"]):not([class*="-sel"]) *,
.z-combobox-pp tr.z-combo-item-over:not(.z-combo-item-seld):not([class*="-seld"]):not([class*="-sel"]) *,
.z-combobox-pp tr.z-comboitem-over:not(.z-comboitem-seld):not([class*="-seld"]):not([class*="-sel"]) *,
.z-combobox-pp td.z-combo-item-over:not(.z-combo-item-seld):not([class*="-seld"]):not([class*="-sel"]) *,
.z-combobox-pp td.z-comboitem-over:not(.z-comboitem-seld):not([class*="-seld"]):not([class*="-sel"]) * {
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.z-combobox-pp tr:hover:not(.z-combo-item-seld):not(.z-comboitem-seld):not([class*="-seld"]):not([class*="-sel"]) .z-combo-item-inner,
.z-combobox-pp tr.z-combo-item-over:not(.z-combo-item-seld):not([class*="-seld"]):not([class*="-sel"]) .z-combo-item-inner,
.z-combobox-pp td.z-combo-item-over:not(.z-combo-item-seld):not([class*="-seld"]):not([class*="-sel"]) .z-combo-item-inner {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    font-weight: 400 !important;
}

/* 4. HOVER STATE ON SELECTED ITEM */
.z-combobox-pp tr.z-combo-item-seld:hover,
.z-combobox-pp tr.z-comboitem-seld:hover,
.z-combobox-pp tr.z-combo-item-over-seld,
.z-combobox-pp tr.z-comboitem-over-seld,
.z-combobox-pp tr[class*="-seld"]:hover,
.z-combobox-pp tr[class*="-sel"]:hover,
.z-combobox-pp td.z-combo-item-over-seld,
.z-combobox-pp td.z-comboitem-over-seld {
    background-color: #DBEAFE !important;
    background: #DBEAFE !important;
    border-radius: 5px !important;
}

.z-combobox-pp tr.z-combo-item-seld:hover *,
.z-combobox-pp tr.z-comboitem-seld:hover *,
.z-combobox-pp tr.z-combo-item-over-seld *,
.z-combobox-pp tr.z-comboitem-over-seld *,
.z-combobox-pp tr[class*="-seld"]:hover *,
.z-combobox-pp tr[class*="-sel"]:hover *,
.z-combobox-pp td.z-combo-item-over-seld *,
.z-combobox-pp td.z-comboitem-over-seld * {
    color: #0284C7 !important;
    -webkit-text-fill-color: #0284C7 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.z-combobox-pp tr.z-combo-item-seld:hover .z-combo-item-inner,
.z-combobox-pp tr.z-comboitem-seld:hover .z-comboitem-inner,
.z-combobox-pp tr.z-combo-item-over-seld .z-combo-item-inner,
.z-combobox-pp td.z-combo-item-over-seld .z-combo-item-inner {
    color: #0369A1 !important;
    -webkit-text-fill-color: #0369A1 !important;
    font-weight: 400 !important;
}

/* Thin sleek scrollbar */
.z-combobox-pp::-webkit-scrollbar       { width: 4px !important; }
.z-combobox-pp::-webkit-scrollbar-track { background: transparent !important; }
.z-combobox-pp::-webkit-scrollbar-thumb { background: #CBD5E1 !important; border-radius: 9999px !important; }
.z-combobox-pp::-webkit-scrollbar-thumb:hover { background: #94A3B8 !important; }

/* ==========================================================================
   SIDEBAR & TREE MENU SEARCH (Buscar:)
   ========================================================================== */
.z-west .z-toolbar .z-toolbar-body,
.z-west-body .z-toolbar .z-toolbar-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.z-west .z-toolbar .z-toolbar-body > div,
.z-west-body .z-toolbar .z-toolbar-body > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* the label is wrapped in a div of its own - keep it from stretching */
.z-west .z-toolbar .z-toolbar-body > div > div,
.z-west-body .z-toolbar .z-toolbar-body > div > div {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.z-west .z-toolbar .z-toolbar-body .z-label,
.z-west-body .z-toolbar .z-toolbar-body .z-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 26px !important;
}

.z-west .z-toolbar .z-toolbar-body span.z-combobox,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 80px !important;
    height: 26px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 5px !important;
    padding: 0 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.z-west .z-toolbar .z-toolbar-body span.z-combobox:hover,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox:hover {
    border-color: #94A3B8 !important;
}

.z-west .z-toolbar .z-toolbar-body span.z-combobox:focus-within,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox:focus-within {
    border-color: #008FD3 !important;
    box-shadow: 0 0 0 2px rgba(0, 143, 211, 0.15) !important;
}

.z-west .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-inp,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-inp {
    border: none !important;
    background: transparent !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #1E293B !important;
    padding: 0 2px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    outline: none !important;
    box-shadow: none !important;
}

.z-west .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-btn,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 11px !important;
    cursor: pointer !important;
}

.z-west .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-btn:hover,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-btn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23008FD3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

.z-west .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-img,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-img {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ZK builds the combobox as span > table > tr > td(input) + td(button). The
   span was 20px tall while the input inside it was 26px and started 12px
   below the toolbar padding, so the field ran 4px past the bottom of the
   toolbar and bit into the tree underneath. Sizing the span and letting the
   table fill it keeps the whole control inside the bar and on the same
   centre line as the "Lookup" label. */
.z-west .z-toolbar .z-toolbar-body span.z-combobox,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox {
    height: 26px !important;
    padding: 0 6px !important;
}
.z-west .z-toolbar .z-toolbar-body span.z-combobox > table,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox > table {
    width: 100% !important;
    height: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}
.z-west .z-toolbar .z-toolbar-body span.z-combobox td,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox td {
    padding: 0 !important;
    border: 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
}
.z-west .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-inp,
.z-west-body .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-inp {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Give the bar enough room for a 28px control plus breathing space, and a
   hairline that separates it from the tree instead of the field doing it.
   Scoped to the panel top: the west panel has a second toolbar at the bottom
   ("Expand Tree") that must not pick up the divider. */
.z-west .z-panel-top .z-toolbar,
.z-west-body .z-panel-top .z-toolbar {
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #E2E8F0 !important;
    background: #F8FAFC !important;
}

/* ==========================================================================
   STANDARD FORM LAYOUT, WORKSPACE & THEME HARMONY
   ========================================================================== */

/* 1. Reset hide for all elements marked display:none by ZK (Fixes asterisk bug) */
.z-label[style*="display:none"],
.z-label[style*="display: none"],
.mandatory-decorator-text[style*="display:none"],
.mandatory-decorator-text[style*="display: none"],
span.mandatory-decorator-text[style*="display:none"],
span.mandatory-decorator-text[style*="display: none"],
span[style*="display:none"],
span[style*="display: none"],
div[style*="display:none"],
div[style*="display: none"],
tr[style*="display:none"],
tr[style*="display: none"],
td[style*="display:none"],
td[style*="display: none"] {
    display: none !important;
}

/* 2. Mandatory decorator (the red asterisk on truly required fields only) */
.mandatory-decorator-text {
    color: #EF4444 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-left: 3px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* 3. Global Form Backgrounds & Containers - Clean, unified Slate 50 */
.adwindow-content,
.adwindow-form,
.adtab-content,
.adtab-body,
.adtab-grid-panel,
.desktop-tabpanel,
.z-tabpanel,
.z-tabpanel-cnt,
.z-tabpanels,
.adtab-tabpanels,
.adtab-grid {
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border: none !important;
}

/* Eliminate all legacy zebra striping that ruins form elegance */
.adtab-grid-panel .z-row:nth-child(even) *,
.adtab-grid-panel .z-row:nth-child(odd) * {
    background-color: transparent !important;
}

.z-grid,
.z-grid-body,
.z-grid-odd,
tr.z-grid-odd,
tr.z-row,
tr.z-row td.z-row-inner,
tr.z-grid-odd td.z-row-inner,
tr.z-row td.z-cell,
div.z-row-cnt {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Row padding and spacing for high density, elegant alignment */
tr.z-row td.z-row-inner,
tr.z-grid-odd td.z-row-inner,
tr.z-row td.z-cell {
    padding: 3px 6px !important;
    vertical-align: middle !important;
}

.z-row-cnt {
    padding: 0 !important;
    line-height: normal !important;
}

/* 4. Field Labels - Clean, professional Slate 700 neutral dark text (Strictly NO blue text) */
.field-label {
    text-align: right !important;
    padding-right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 26px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.z-row .z-label,
.z-grid .z-label,
.field-label .z-label,
.field-label a.z-label,
.z-row a.z-label,
.z-grid a.z-label,
.z-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #334155 !important; /* Neutral dark Slate 700 */
    /* NOTE: -webkit-text-fill-color wins over `color` at paint time, so any
       rule that recolours a .z-label - or a pseudo-element inheriting from
       one - has to set BOTH, or it will compute correctly and still render
       this grey. The login artwork rules below do exactly that. */
    -webkit-text-fill-color: #334155 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* 5. Modern Form Input Fields (strictly non-login) */
.z-textbox:not(.login-box-body *):not(.login-window *),
.z-decimalbox:not(.login-box-body *):not(.login-window *),
.z-intbox:not(.login-box-body *):not(.login-window *),
.z-longbox:not(.login-box-body *):not(.login-window *),
.z-doublebox:not(.login-box-body *):not(.login-window *),
.z-datebox-inp:not(.login-box-body *):not(.login-window *),
.z-timebox-inp:not(.login-box-body *):not(.login-window *),
.z-bandbox-inp:not(.login-box-body *):not(.login-window *),
.z-combobox-inp:not(.login-box-body *):not(.login-window *) {
    border: 1px solid #CBD5E1 !important;
    border-radius: 5px !important;
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    padding: 3px 7px !important;
    height: 26px !important;
    line-height: 18px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.z-textbox:not(.login-box-body *):not(.login-window *):focus,
.z-decimalbox:not(.login-box-body *):not(.login-window *):focus,
.z-intbox:not(.login-box-body *):not(.login-window *):focus,
.z-longbox:not(.login-box-body *):not(.login-window *):focus,
.z-doublebox:not(.login-box-body *):not(.login-window *):focus,
.z-datebox-inp:not(.login-box-body *):not(.login-window *):focus,
.z-timebox-inp:not(.login-box-body *):not(.login-window *):focus,
.z-bandbox-inp:not(.login-box-body *):not(.login-window *):focus,
.z-combobox-inp:not(.login-box-body *):not(.login-window *):focus {
    border-color: #008FD3 !important;
    box-shadow: 0 0 0 2px rgba(0, 143, 211, 0.18) !important;
    outline: none !important;
    background-color: #FFFFFF !important;
}

.z-textbox:not(.login-box-body *):not(.login-window *):hover:not([readonly]):not(:focus),
.z-decimalbox:not(.login-box-body *):not(.login-window *):hover:not([readonly]):not(:focus),
.z-intbox:not(.login-box-body *):not(.login-window *):hover:not([readonly]):not(:focus),
.z-datebox-inp:not(.login-box-body *):not(.login-window *):hover:not([readonly]):not(:focus),
.z-combobox-inp:not(.login-box-body *):not(.login-window *):hover:not([readonly]):not(:focus) {
    border-color: #94A3B8 !important;
}

/* Numbers alignment */
.z-decimalbox,
.z-intbox,
.z-longbox,
.z-doublebox {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

/* Readonly fields (e.g. Saldo Actual) */
.z-textbox:not(.login-box-body *):not(.login-window *)[readonly],
.z-decimalbox:not(.login-box-body *):not(.login-window *)[readonly],
.z-intbox:not(.login-box-body *):not(.login-window *)[readonly],
.z-datebox-inp:not(.login-box-body *):not(.login-window *)[readonly],
.z-combobox-inp:not(.login-box-body *):not(.login-window *)[readonly],
.z-textbox:not(.login-box-body *):not(.login-window *)[disabled],
.z-decimalbox:not(.login-box-body *):not(.login-window *)[disabled],
.z-intbox:not(.login-box-body *):not(.login-window *)[disabled],
.z-datebox-inp:not(.login-box-body *):not(.login-window *)[disabled],
.z-combobox-inp:not(.login-box-body *):not(.login-window *)[disabled] {
    background-color: #F8FAFC !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* Mandatory Field Indicator - Only truly mandatory fields */
.z-textbox-text-invalid,
.z-decimalbox-text-invalid,
.z-intbox-text-invalid {
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
}

/* 6. Form Comboboxes (Scoped so it does NOT affect search / menu / treesearch) */
span.z-combobox:not(.treesearch-panel *):not(.menu-search *):not(.login-box-body *):not(.login-window *):not(.login-box *):not([style*="display: none"]):not([style*="display:none"]) {
    display: inline-block !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

span.z-combobox:not(.treesearch-panel *):not(.menu-search *):not(.login-box-body *):not(.login-window *):not(.login-box *) .z-combobox-inp {
    display: inline-block !important;
    vertical-align: middle !important;
    padding-right: 22px !important;
    cursor: pointer !important;
}

span.z-combobox:not(.treesearch-panel *):not(.menu-search *):not(.login-box-body *):not(.login-window *):not(.login-box *) .z-combobox-btn {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    margin-left: -22px !important;
    width: 20px !important;
    height: 20px !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 11px !important;
    border: none !important;
    z-index: 2 !important;
}

span.z-combobox:not(.treesearch-panel *):not(.menu-search *):not(.login-box-body *):not(.login-window *):not(.login-box *) .z-combobox-btn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23008FD3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

span.z-combobox:not(.treesearch-panel *):not(.menu-search *):not(.login-box-body *):not(.login-window *):not(.login-box *) .z-combobox-img {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 7. Button Structure Reset for ZK 3.6 (Strip 9-slice table artifacts) */
span.z-button,
table.z-button,
table.editor-button {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

table.z-button,
table.editor-button,
span.z-button table.z-button {
    width: 100% !important;
    height: 100% !important;
    display: table !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

/* Hide top and bottom slice rows completely */
table.z-button tr.z-button-r1,
table.z-button tr.z-button-r3,
table.z-button > tbody > tr:first-child:has(td.z-button-tl),
table.z-button > tbody > tr:last-child:has(td.z-button-bl),
table.editor-button > tbody > tr:first-child,
table.editor-button > tbody > tr:last-child,
span.z-button tr.z-button-r1,
span.z-button tr.z-button-r3 {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide left and right slice cells completely */
table.z-button td.z-button-cl,
table.z-button td.z-button-cr,
table.z-button td.z-button-tl,
table.z-button td.z-button-tr,
table.z-button td.z-button-tm,
table.z-button td.z-button-bl,
table.z-button td.z-button-br,
table.z-button td.z-button-bm,
table.editor-button td.z-button-cl,
table.editor-button td.z-button-cr,
table.editor-button td.z-button-tl,
table.editor-button td.z-button-tr,
table.editor-button td.z-button-tm,
table.editor-button td.z-button-bl,
table.editor-button td.z-button-br,
table.editor-button td.z-button-bm,
span.z-button td.z-button-cl,
span.z-button td.z-button-cr {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Center cell only */
table.z-button td.z-button-cm,
table.editor-button td.z-button-cm,
span.z-button td.z-button-cm {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* Inner button elements must NEVER produce borders, backgrounds, or hover shifts */
button.form-button,
button.z-button,
button.z-button-btn,
button[id$="!real"],
span.z-button button,
span.form-button button,
table.editor-button button {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    display: inline-block !important;
    position: static !important;
    transform: none !important;
}

button.form-button:hover,
button.z-button:hover,
button.z-button-btn:hover,
button[id$="!real"]:hover,
span.z-button button:hover,
span.form-button button:hover,
table.editor-button button:hover {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 8. Attached Editor Buttons (Search, Lookup, Calculator, Date, URL, POS) */
/* Only target the specific div.z-div wrapper that EditorBox produces */
div.z-div:not([style*="display: none"]):not([style*="display:none"]):has(table.editor-button),
div.z-div:not([style*="display: none"]):not([style*="display:none"]):has(td.editor-button),
div.z-div:not([style*="display: none"]):not([style*="display:none"]):has(.editor-button) {
    display: inline-block !important;
    width: 100% !important;
    vertical-align: middle !important;
}

div.z-div > table:has(table.editor-button),
div.z-div > table:has(td.editor-button),
div.z-div > table:has(.editor-button) {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Hide separator between input and search button */
div.z-div > table:has(.editor-button) td.z-hbox-separator,
div.z-div > table:has(table.editor-button) td.z-hbox-separator,
div.z-div > table:has(td.editor-button) td.z-hbox-separator {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* All cells inside the container: no padding */
div.z-div > table:has(.editor-button) > tbody > tr > td {
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Input field - remove right radius/border to connect to button */
div.z-div > table:has(.editor-button) input,
div.z-div > table:has(table.editor-button) input,
div.z-div > table:has(td.editor-button) input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    width: 100% !important;
    height: 26px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Button cell wrapper */
td.editor-button,
.z-row td.editor-button,
.z-grid td.editor-button,
div.z-div > table > tbody > tr > td:last-child:has(table.editor-button),
div.z-div > table > tbody > tr > td:last-child:has(.editor-button) {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* Seamless editor/search button - attached to right of input */
table.editor-button,
table.editor-button.z-button,
span.editor-button,
span.z-button.editor-button,
td.editor-button > table.z-button,
td.editor-button > span.z-button,
td.editor-button > table,
td:has(> table.editor-button) > table.editor-button {
    display: inline-table !important;
    vertical-align: middle !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid #CBD5E1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    table-layout: fixed !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

table.editor-button > tbody {
    display: table-row-group !important;
}

table.editor-button > tbody > tr {
    display: table-row !important;
    height: 26px !important;
}

table.editor-button > tbody > tr > td.z-button-cm {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

table.editor-button:hover,
span.editor-button:hover,
td.editor-button > table.z-button:hover,
td.editor-button > span.z-button:hover {
    background: #E2E8F0 !important;
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}

table.editor-button:active,
span.editor-button:active,
td.editor-button > table.z-button:active,
td.editor-button > span.z-button:active {
    background: #CBD5E1 !important;
    background-color: #CBD5E1 !important;
}

/* Icons inside search/editor buttons */
table.editor-button img,
span.editor-button img,
td.editor-button img,
table.editor-button td.z-button-cm img {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
    border: none !important;
    opacity: 0.9 !important;
    visibility: visible !important;
}

/* Date box - calendar button must be on the RIGHT, attached to input */
span.z-datebox:not(.login-box-body *):not(.login-window *):not([style*="display: none"]):not([style*="display:none"]) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    flex-wrap: nowrap !important;
}

span.z-datebox:not(.login-box-body *):not(.login-window *) .z-datebox-inp {
    flex: 1 1 auto !important;
    order: 1 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
    box-sizing: border-box !important;
}

/*	never a button ZK hid: the time half of a DatetimeBox is given
	setButtonVisible(false)	*/
span.z-datebox:not(.login-box-body *):not(.login-window *) .z-datebox-btn:not([style*="display: none"]):not([style*="display:none"]) {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid #CBD5E1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}

span.z-datebox:not(.login-box-body *):not(.login-window *) .z-datebox-btn:hover {
    background: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}

span.z-datebox:not(.login-box-body *):not(.login-window *) .z-datebox-img {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    opacity: 0.9 !important;
}

/* 9. Standalone Action Buttons (e.g. 'Liga Organización', Form Action Buttons) */
span.form-button,
span.z-button.form-button,
.z-row span.form-button,
.z-grid span.form-button,
.z-row td > span.z-button:has(button.z-button-btn:not(:empty)),
.z-grid td > span.z-button:has(button.z-button-btn:not(:empty)),
.z-row td > div > span.z-button:has(button.z-button-btn:not(:empty)) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    min-height: 28px !important;
    width: auto !important;
    min-width: 100px !important;
    max-width: none !important;
    padding: 0 16px !important;
    margin: 2px 0 !important;
    border-radius: 6px !important;
    border: 1px solid #008FD3 !important;
    background: linear-gradient(180deg, #008FD3 0%, #0077B6 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 143, 211, 0.25) !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    position: relative !important;
    overflow: hidden !important;
}

span.form-button:hover,
span.z-button.form-button:hover,
.z-row span.form-button:hover,
.z-grid span.form-button:hover,
.z-row td > span.z-button:has(button.z-button-btn:not(:empty)):hover,
.z-grid td > span.z-button:has(button.z-button-btn:not(:empty)):hover {
    background: linear-gradient(180deg, #0284C7 0%, #0369A1 100%) !important;
    border-color: #0369A1 !important;
    box-shadow: 0 2px 4px rgba(0, 143, 211, 0.35) !important;
}

span.form-button:active,
span.z-button.form-button:active {
    background: linear-gradient(180deg, #0369A1 0%, #075985 100%) !important;
    border-color: #075985 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

span.form-button table.z-button,
span.z-button.form-button table.z-button {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

span.form-button td.z-button-cm,
span.z-button.form-button td.z-button-cm {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

span.form-button button,
span.form-button .z-button-btn,
span.z-button.form-button button,
span.z-button.form-button .z-button-btn {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: inherit !important;
}

/* ==========================================================================
   CALCULATOR POPUP & MODAL POPUPS (Crystal clear dark numbers and buttons)
   ========================================================================== */
.z-popup,
.z-window-popup,
div.z-popup,
div.z-window-popup {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
    padding: 8px !important;
    z-index: 99999 !important;
}

/* Calculator input display */
.z-popup input,
.z-popup .z-textbox,
.z-window-popup input,
.z-window-popup .z-textbox {
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 6px !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: right !important;
    padding: 6px 10px !important;
    margin: 0 0 8px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.z-popup input:focus,
.z-popup .z-textbox:focus {
    border-color: #008FD3 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 143, 211, 0.15) !important;
}

/* Calculator tables structure */
.z-popup table,
.z-window-popup table {
    border-collapse: separate !important;
    border-spacing: 3px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.z-popup tr,
.z-window-popup tr {
    background: transparent !important;
    border: none !important;
}

.z-popup td,
.z-window-popup td {
    padding: 1px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Button tiles in calculator popup - Proper rectangular shape and size */
.z-popup span.z-button,
.z-window-popup span.z-button,
.z-popup .calc-btn,
.z-window-popup .calc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: background-color 0.1s ease, border-color 0.1s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.z-popup span.z-button:hover,
.z-window-popup span.z-button:hover,
.z-popup .calc-btn:hover,
.z-window-popup .calc-btn:hover {
    background: #E2E8F0 !important;
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}

.z-popup span.z-button:active,
.z-window-popup span.z-button:active,
.z-popup .calc-btn:active,
.z-window-popup .calc-btn:active {
    background: #CBD5E1 !important;
    background-color: #CBD5E1 !important;
}

/* 9-slice strip inside popup span.z-button */
.z-popup span.z-button table.z-button,
.z-window-popup span.z-button table.z-button {
    width: 100% !important;
    height: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    display: table !important;
}

.z-popup span.z-button tr.z-button-r1,
.z-popup span.z-button tr.z-button-r3,
.z-window-popup span.z-button tr.z-button-r1,
.z-window-popup span.z-button tr.z-button-r3 {
    display: none !important;
}

.z-popup span.z-button td.z-button-cl,
.z-popup span.z-button td.z-button-cr,
.z-window-popup span.z-button td.z-button-cl,
.z-window-popup span.z-button td.z-button-cr {
    display: none !important;
    width: 0 !important;
}

.z-popup span.z-button td.z-button-cm,
.z-window-popup span.z-button td.z-button-cm {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Button text strictly centered in tile with bold dark Slate 900 color */
.z-popup span.z-button button,
.z-popup span.z-button .z-button-btn,
.z-popup td.z-button-cm,
.z-popup td.z-button-cm *,
.z-window-popup span.z-button button,
.z-window-popup span.z-button .z-button-btn,
.z-window-popup td.z-button-cm,
.z-window-popup td.z-button-cm *,
.z-popup .calc-btn,
.z-window-popup .calc-btn {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 30px !important;
    text-align: center !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

.z-popup span.z-button-disd,
.z-window-popup span.z-button-disd {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #F1F5F9 !important;
}

/* ==========================================================================
   10. UNIVERSAL CHECKBOX STYLING (Forms, Grids, Windows, Login, Dialogs)
   ========================================================================== */
.z-checkbox,
span.z-checkbox,
div.z-checkbox,
.z-row .z-checkbox,
.z-grid .z-checkbox,
.field-input .z-checkbox,
td.login-field .z-checkbox,
.login-box-body .z-checkbox {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    line-height: 1 !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    pointer-events: auto !important;
}

.z-checkbox input[type="checkbox"],
span.z-checkbox input[type="checkbox"],
div.z-checkbox input[type="checkbox"],
.z-row .z-checkbox input[type="checkbox"],
.z-grid .z-checkbox input[type="checkbox"],
td.login-field .z-checkbox input[type="checkbox"],
.login-box-body .z-checkbox input[type="checkbox"],
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    accent-color: #008FD3 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    pointer-events: auto !important;
}

.z-checkbox[disabled] input[type="checkbox"],
span.z-checkbox[disabled] input[type="checkbox"],
.z-checkbox-disd input[type="checkbox"],
input[type="checkbox"][disabled],
input[type="checkbox"][readonly] {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.z-checkbox label,
.z-checkbox .z-checkbox-cnt,
.z-checkbox-cnt,
span.z-checkbox label,
span.z-checkbox .z-checkbox-cnt,
div.z-checkbox label,
div.z-checkbox .z-checkbox-cnt,
.z-row .z-checkbox label,
.z-grid .z-checkbox label,
.field-input .z-checkbox label,
td.login-field .z-checkbox label,
.login-box-body .z-checkbox label,
.login-box-body .z-checkbox .z-checkbox-cnt {
    display: inline-block !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
    top: 0 !important;
    pointer-events: auto !important;
}

.z-checkbox[disabled] label,
span.z-checkbox[disabled] label,
.z-checkbox-disd label {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* 11. Field Groups & Collapsible Section Headers (e.g. 'Información Fiscal') */
tr.z-group,
tr.z-group td.z-group-inner,
.z-group-inner {
    background: #EDF2F7 !important;
    background-color: #EDF2F7 !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #CBD5E1 !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

tr.z-group:hover,
tr.z-group td.z-group-inner:hover {
    background-color: #E2E8F0 !important;
}

.z-group-inner .z-group-cnt,
.z-group-inner .z-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    letter-spacing: 0.01em !important;
    vertical-align: middle !important;
}

.z-group-img {
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* ==========================================================================
   CONFIRM PANEL & ACTION BUTTONS (Modals, FindWindow, ProcessDialog)
   ========================================================================== */
.action-button,
.action-text-button,
span.action-button,
span.action-text-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.action-button:hover,
.action-text-button:hover,
span.action-button:hover,
span.action-text-button:hover {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

.action-button img,
.action-text-button img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
}

/*  Icon-only action buttons at the foot of a form.

    Export, Print and the form's own process button carry both .action-button
    and .z-button. The ZK 3.6 button reset further up matches table.z-button,
    which outranks .action-button, so the rule above lost its border, its
    background and its padding: the three buttons collapsed to their 16px
    icons, touching each other in the bottom corner with nothing around them.
    One of them is Export, and a 16px grey PNG with no frame is easy to miss
    altogether - a client reported not finding it at all.

    The frame goes on the span, which is the element that takes the click.
    Specificity has to clear table.z-button, hence the :has().  */
span.z-button:has(> table.action-button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 34px !important;
    height: 28px !important;
    padding: 0 8px !important;
    margin-right: 6px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

span.z-button:has(> table.action-button):hover {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
}

span.z-button:has(> table.action-button):active {
    background: #F1F5F9 !important;
}

/* The inner table only carries the icon now; the span draws the button. */
table.action-button.z-button {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*  These buttons still point at the 16px bitmaps of the old icon set, which
    are soft on any display above 1x. The theme already ships vector versions
    of the same icons, drawn on a 24px grid with the stroke the rest of the
    chrome uses; swap them the way the menu icons are swapped further up.
    The .action-button img rule above keeps them at 16px.

    Matching on the suffix covers both spellings ZK emits for the same file,
    "/webui/images/Export16.png" and "images/Export16.png".  */
span.z-button > table.action-button img[src$="Export16.png"] {
    content: url("/webui/images/Export.svg") !important;
}
span.z-button > table.action-button img[src$="Print16.png"] {
    content: url("/webui/images/Print.svg") !important;
}
span.z-button > table.action-button img[src$="Process16.png"] {
    content: url("/webui/images/Process.svg") !important;
}
span.z-button > table.action-button img[src$="Ok16.png"] {
    content: url("/webui/images/Ok.svg") !important;
}
span.z-button > table.action-button img[src$="Cancel16.png"] {
    content: url("/webui/images/Cancel.svg") !important;
}
span.z-button > table.action-button img[src$="New16.png"] {
    content: url("/webui/images/New.svg") !important;
}

/* ==========================================================================
   MODERN TOOLBAR BUTTONS & ICONS
   ========================================================================== */
.adwindow-toolbar,
.z-toolbar {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 4px 8px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
}

.z-toolbar-cnt,
.z-toolbar-body,
.z-toolbar-start {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
}

.toolbar-button,
.z-toolbarbutton,
span.z-toolbarbutton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    padding: 4px !important;
    margin: 0 1px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    opacity: 0.92 !important;
}

.toolbar-button:hover,
.z-toolbarbutton:hover,
span.z-toolbarbutton:hover {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.toolbar-button:active,
.z-toolbarbutton:active,
span.z-toolbarbutton:active {
    background-color: #E2E8F0 !important;
    transform: translateY(0px) scale(0.96) !important;
}

.toolbar-button[disabled],
.z-toolbarbutton-disd,
.toolbar-button.z-toolbarbutton-disd {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(100%) !important;
}

/* ==========================================================================
   WINDOW CONTENT & TAB BAR SEPARATION FROM TOOLBAR
   ========================================================================== */
.adwindow-form,
.adtab-body,
.adtabpanel-tabbox,
.adwindow-content > .z-tabbox,
.adwindow-content > .adtab-tabpanels,
.adtab-content,
.adwindow-center {
    margin-top: 6px !important;
}

.adtabpanel-tabbox .z-tabs,
.adwindow-form .z-tabs,
.z-tabbox .z-tabs {
    padding-top: 4px !important;
}

.z-tab {
    margin-bottom: 4px !important;
}

.z-tab-ver,
.z-tabs-ver .z-tab,
.adtabpanel-tabbox .z-tab {
    margin-bottom: 4px !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   HIDE NATIVE ZK ERRBOX (Replaced by Toast)
   ZK renders a z-errbox balloon attached to the offending field.
   We hide it completely so it never displays as an ugly HTML balloon.
   ========================================================================== */

.z-errbox,
.z-errbox-left,
.z-errbox-right,
.z-errbox-center,
.z-errbox-text,
.z-errbox-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* ZK loading state: replace the old progress GIF and flat theme block with a
   compact status card that stays readable over forms and Smart Browse grids. */
.z-loading {
    background: rgba(15, 23, 42, .16) !important;
    border: 0 !important;
    z-index: 100000 !important;
}

.z-loading-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 150px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    background: #FFFFFF !important;
    border: 1px solid #D9E3EC !important;
    border-radius: 9px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18) !important;
    color: #174A70 !important;
    -webkit-text-fill-color: #174A70 !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
}

.z-loading-icon {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    background: none !important;
    border: 2px solid #C7DCE8 !important;
    border-top-color: #008FD3 !important;
    border-radius: 50% !important;
    animation: erpya-loading-spin .75s linear infinite !important;
}

@keyframes erpya-loading-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   NEXOINT-STYLE TOAST NOTIFICATION SYSTEM
   Shown by login-ui.js when ZK throws an error or when triggered from server.
   Replaces the native z-errbox balloon with a polished slide-in notification.
   ========================================================================== */

#erpya-toast-container {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: none !important;
    max-width: 400px !important;
    width: calc(100vw - 48px) !important;
}

.erpya-toast {
    pointer-events: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    transform: translateX(calc(100% + 32px)) !important;
    opacity: 0 !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.22s ease !important;
}

.erpya-toast--visible {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.erpya-toast--out {
    transform: translateX(calc(100% + 32px)) !important;
    opacity: 0 !important;
    transition: transform 0.22s ease, opacity 0.18s ease !important;
}

/* Error toast */
.erpya-toast--error {
    background: #FFF1F0 !important;
    border: 1px solid #FFCCC7 !important;
    color: #A8071A !important;
}
.erpya-toast--error .erpya-toast__icon {
    color: #CF1322 !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

/* Success toast */
.erpya-toast--success {
    background: #F0FFF4 !important;
    border: 1px solid #B7EB8F !important;
    color: #135200 !important;
}
.erpya-toast--success .erpya-toast__icon {
    color: #389E0D !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

/* Warning toast */
.erpya-toast--warning {
    background: #FFFBE6 !important;
    border: 1px solid #FFE58F !important;
    color: #613400 !important;
}
.erpya-toast--warning .erpya-toast__icon {
    color: #D46B08 !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.erpya-toast__icon {
    display: flex !important;
    align-items: center !important;
}

.erpya-toast__msg {
    flex: 1 !important;
    word-break: break-word !important;
    font-weight: 500 !important;
}

.erpya-toast__close {
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    opacity: 0.5 !important;
    border-radius: 4px !important;
    padding: 0 !important;
    color: inherit !important;
    transition: opacity 0.15s ease, background 0.15s ease !important;
}

.erpya-toast__close:hover {
    opacity: 1 !important;
    background: rgba(0,0,0,0.06) !important;
}


/* Fix for Search Fields (Socio del Negocio) */
div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    flex-wrap: nowrap !important;
}

div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > .z-bandbox-input,
div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > .z-bandbox-inp {
    flex: 1 1 auto !important;
    order: 1 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
    box-sizing: border-box !important;
}

div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > button.editor-button,
div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > a.editor-button {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid #CBD5E1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}

div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > button.editor-button:hover,
div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > a.editor-button:hover {
    background: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}

div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > button.editor-button i,
div.z-bandbox.editor-box:not([style*="display: none"]):not([style*="display:none"]) > a.editor-button i {
    font-size: 14px !important;
    color: #475569 !important;
}

/* Also support Datebox the exact same way for both button and btn and 'a' or 'button' */
/*	The time half of a DatetimeBox gets setButtonVisible(false), which ZK
	writes as display:none on the button itself - not on the box - so it was
	slipping past the exclusions above and a calendar icon appeared beside
	the time, opening nothing.	*/
span.z-datebox:not(.login-box-body *):not(.login-window *):not([style*="display: none"]):not([style*="display:none"]) .z-datebox-button:not([style*="display: none"]):not([style*="display:none"]),
span.z-datebox:not(.login-box-body *):not(.login-window *):not([style*="display: none"]):not([style*="display:none"]) .z-datebox-btn:not([style*="display: none"]):not([style*="display:none"]) {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid #CBD5E1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}
span.z-datebox:not(.login-box-body *):not(.login-window *):not([style*="display: none"]):not([style*="display:none"]) .z-datebox-button:hover,
span.z-datebox:not(.login-box-body *):not(.login-window *):not([style*="display: none"]):not([style*="display:none"]) .z-datebox-btn:hover {
    background: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}

/* ==========================================================================
   SIDEBAR SEARCH FIELD - final shape
   The generic combobox rule further up strips background and border from the
   span and carries a long :not() chain, which gives it more specificity than
   a plainly scoped sidebar rule. So the visible box goes on the input, like
   everywhere else in the app, and the class is doubled up to outrank it.
   ========================================================================== */
.z-west.z-west .z-toolbar .z-toolbar-body span.z-combobox input.z-combobox-inp,
.z-west-body.z-west-body .z-toolbar .z-toolbar-body span.z-combobox input.z-combobox-inp {
    width: 100% !important;
    height: 26px !important;
    line-height: 24px !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    padding: 0 26px 0 9px !important;
    font-size: 12px !important;
    color: #1E293B !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04) !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
}

.z-west.z-west .z-toolbar .z-toolbar-body span.z-combobox input.z-combobox-inp:hover {
    border-color: #94A3B8 !important;
}

.z-west.z-west .z-toolbar .z-toolbar-body span.z-combobox input.z-combobox-inp:focus {
    border-color: #008FD3 !important;
    box-shadow: 0 0 0 3px rgba(0, 143, 211, .15) !important;
    outline: none !important;
}

/* the chevron overlays the right end of the input */
.z-west.z-west .z-toolbar .z-toolbar-body span.z-combobox .z-combobox-btn {
    margin-left: -24px !important;
    z-index: 2 !important;
}

/* the combobox takes the rest of the bar next to the label */
.z-west.z-west .z-toolbar .z-toolbar-body span.z-combobox {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 26px !important;
    padding: 0 !important;
}

/* ==========================================================================
   MENU SEARCH - magnifier inside the field
   The caption moves into the placeholder (set by desktop-ui.js from the very
   same label, so it stays translated) and the label itself is hidden, which
   gives the field the ~50px the caption was taking.
   ========================================================================== */
.z-west.z-west .z-toolbar .z-toolbar-body .z-label,
.z-west-body.z-west-body .z-toolbar .z-toolbar-body .z-label {
    display: none !important;
}

.z-west.z-west .z-toolbar .z-toolbar-body > div > div:not(:has(span.z-combobox)):not(:has(.desktop-menu-toggle)),
.z-west-body.z-west-body .z-toolbar .z-toolbar-body > div > div:not(:has(span.z-combobox)):not(:has(.desktop-menu-toggle)) {
    display: none !important;
}

.z-west.z-west .z-toolbar .z-toolbar-body span.z-combobox input.z-combobox-inp,
.z-west-body.z-west-body .z-toolbar .z-toolbar-body span.z-combobox input.z-combobox-inp {
    padding-left: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 9px center !important;
    background-size: 14px 14px !important;
}

.z-west.z-west .z-toolbar .z-toolbar-body span.z-combobox input.z-combobox-inp::placeholder {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   MENU TREE - chevrons instead of the sprite triangles
   ZK marks folders with .z-tree-ico plus -close/-open and draws the dotted
   connector lines with .z-tree-line. The lines are dropped (their width is
   kept, since that is what indents each level) and the folder marker becomes
   a chevron that turns when the branch opens - the same chevron the
   comboboxes use, so the sidebar stops looking like a different decade.
   ========================================================================== */
.z-west .z-tree-line {
    background-image: none !important;
}

.z-west .z-tree-ico {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 13px 13px !important;
    background-color: transparent !important;
    cursor: pointer !important;
}

.z-west .z-tree-root-close,
.z-west .z-tree-tee-close,
.z-west .z-tree-last-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") !important;
}

.z-west .z-tree-root-open,
.z-west .z-tree-tee-open,
.z-west .z-tree-last-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23008FD3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

.z-west .z-tree-root-leaf,
.z-west .z-tree-tee-leaf,
.z-west .z-tree-last-leaf {
    background-image: none !important;
    background-color: transparent !important;
}

/* ==========================================================================
   HEADER - identity reads as identity
   The line is one ZK label holding user, tenant and organisation, so it can
   only be treated as a whole: a person glyph in front of it, and enough
   weight and spacing that it stops competing with the links below.
   ========================================================================== */
.desktop-header .z-label::before {
    content: '' !important;
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    margin-right: 7px !important;
    vertical-align: -3px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 15px 15px !important;
    opacity: .85 !important;
}

.desktop-header-right {
    padding-right: 18px !important;
}

/* A long menu entry used to wrap, and the second line started at the very
   left edge of the panel because the indentation lives in the spacers of the
   first line only - "Generate Inventory Movement from Sales / Orders" read as
   a stray root item. One line per entry, cut with an ellipsis; desktop-ui.js
   can put the full text in the tooltip. */
.z-west .z-tree-cell,
.z-west .z-tree-cell-cnt {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================================
   MULTILINE TEXTBOXES
   The field rule above pins .z-textbox to 26px, and a ZK multiline textbox is
   a <textarea> carrying that same class - so the Context window, which holds
   all 457 environment variables in one textarea, showed a single line and
   looked like it had lost its content. The height is handed back: the inline
   height ZK writes when the box fills its parent is honoured, and everything
   else falls back to its rows attribute.
   ========================================================================== */
textarea.z-textbox:not(.login-box-body *):not(.login-window *) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 26px !important;
    line-height: 1.45 !important;
    padding: 6px 9px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    resize: vertical !important;
}

/* Form fields in ADempiere are table cells. The cell must be allowed to
   shrink, otherwise a long description expands the whole window sideways. */
.z-row-cnt:has(> textarea.z-textbox),
.z-row-cnt:has(textarea.z-textbox) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}
.z-row-cnt > textarea.z-textbox,
.z-row-cnt textarea.z-textbox {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    resize: vertical !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

textarea.z-textbox[style*="height:100%"]:not(.login-box-body *):not(.login-window *),
textarea.z-textbox[style*="height: 100%"]:not(.login-box-body *):not(.login-window *) {
    height: 100% !important;
}

/* ==========================================================================
   CONFIRM PANEL (OK / Cancel)
   The new icon set draws these as thin outlines instead of the filled,
   coloured ones that shipped before, so at their native 16px they read as
   tiny. They are swapped for the 24px SVG of that same set - vector, so it
   stays crisp - and given a real hit area. content: url() replaces what the
   <img> paints without touching the element ZK rendered.
   ========================================================================== */
img[src$="/Ok16.png"],
img[src$="/Ok24.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008FD3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    width: 24px !important;
    height: 24px !important;
}

img[src$="/Cancel16.png"],
img[src$="/Cancel24.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    width: 24px !important;
    height: 24px !important;
}

/* the cell was sized for a 16px icon */
td.z-button-cm:has(img[src$="/Ok16.png"]),
td.z-button-cm:has(img[src$="/Cancel16.png"]) {
    padding: 0 6px !important;
}

/* ==========================================================================
   DATE AND DATETIME FIELDS
   ========================================================================== */

/* ZK 3.6 positions the calendar button with inline styles at render time
   (position:relative; top:-6px; left:-2px), which lifted it clear of the
   input it is supposed to be welded to. The flex row below only works once
   that is neutralised. */
span.z-datebox:not(.login-box-body *):not(.login-window *) .z-datebox-btn,
span.z-datebox:not(.login-box-body *):not(.login-window *) .z-datebox-button {
    position: static !important;
    top: auto !important;
    left: auto !important;
    align-self: center !important;
    /* its 1px border sat outside the 26px, leaving the button 2px taller
       than the input it is welded to */
    box-sizing: border-box !important;
}

/* the wrapper was 20px tall while the input inside it was 26 */
span.z-datebox:not(.login-box-body *):not(.login-window *) {
    height: 26px !important;
    box-sizing: border-box !important;
}

/* A DateTime field is two dateboxes side by side - date and time - and each
   one was told to take the full width of its container, so the second sat
   outside it. They share the row instead.

   This was scoped to a pair sitting directly in a form cell, which left the
   search panel of a smart browse out: there the two editors of a range go
   inside an Hbox, a table deeper, so the rule never reached them. A range of
   date and time is four boxes, and what you saw was three - the time of the
   first landing exactly on top of the date of the second, and the last one
   past the edge of the cell. The pair is matched wherever it stands now; a
   div holding two adjacent dateboxes is a DatetimeBox by construction. */
div:has(> span.z-datebox + span.z-datebox) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    white-space: normal !important;
}

div:has(> span.z-datebox + span.z-datebox) > span.z-datebox {
    width: auto !important;
    min-width: 0 !important;
}

/*	the date needs the room, the time does not	*/
div:has(> span.z-datebox + span.z-datebox) > span.z-datebox:first-child {
    flex: 3 1 0 !important;
}

div:has(> span.z-datebox + span.z-datebox) > span.z-datebox:last-child {
    flex: 2 1 0 !important;
}

/* ==========================================================================
   EMPTY IMAGE / BINARY FIELD
   The core renders these as a 48x48 ZK Image (WEditor.fillHorizontal), and
   with no content ZK points it at its 1x1 spacer.gif - a blank box with a
   black hairline and no hint that it takes a click. The scope is deliberately
   narrow: a spacer image sitting directly in a field cell, never the spacers
   ZK uses inside trees and buttons.
   ========================================================================== */
.z-row-cnt > img[src$="spacer.gif"] {
    border: 1px dashed #CBD5E1 !important;
    border-radius: 6px !important;
    background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") no-repeat center center !important;
    transition: border-color .12s ease, background-color .12s ease !important;
}

.z-row-cnt > img[src$="spacer.gif"]:hover {
    border-color: #008FD3 !important;
    background-color: #EFF8FD !important;
}

/* ==========================================================================
   DATE PICKER POPUP
   ZK 3.6 draws this as three stacked tables with 10px type, red weekend
   headers and a flat blue selection - the one piece of the form that still
   looked like 2009. Same markup, restyled: the cells keep their classes and
   their click handlers, only their appearance changes.
   ========================================================================== */
.z-datebox-pp {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16) !important;
    padding: 10px !important;
    margin: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    width: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.z-datebox-pp > table,
.z-datebox-pp > div,
.z-datebox-pp .z-datebox-calyear,
.z-datebox-pp .z-datebox-calmon,
.z-datebox-pp .z-datebox-caldow,
.z-datebox-pp .z-datebox-calday {
    border-collapse: separate !important;
    border-spacing: 3px !important;
}

.z-datebox-pp .z-datebox-calyear,
.z-datebox-pp .z-datebox-calmon,
.z-datebox-pp .z-datebox-caldow,
.z-datebox-pp .z-datebox-calday {
    margin: 0 0 4px 0 !important;
}

/* header: month and year, with the two arrows */
.z-datebox-pp .z-datebox-calyear {
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    padding-bottom: 6px !important;
}

.z-datebox-pp .z-datebox-calyear img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* the row is seven cells: the back arrow sits in the second, the forward
   one in the sixth, and neither is the last child - that is an empty
   spacer cell. */
.z-datebox-pp .z-datebox-calyear td:nth-child(6) img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* month strip */
.z-datebox-pp .z-datebox-calmon {
    width: 100% !important;
    border-spacing: 2px !important;
}

.z-datebox-pp .z-datebox-calmon td {
    font-size: 11px !important;
    color: #475569 !important;
    text-align: center !important;
    padding: 3px 0 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

.z-datebox-pp .z-datebox-calmon td:hover {
    background: #F1F5F9 !important;
}

/* day names */
.z-datebox-pp .z-datebox-caldow td {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #94A3B8 !important;
    text-align: center !important;
    padding: 6px 0 4px 0 !important;
}

/* days */
.z-datebox-pp .z-datebox-calday td,
.z-datebox-pp table.z-datebox-calday td {
    font-size: 12px !important;
    color: #1E293B !important;
    text-align: center !important;
    width: 28px !important;
    height: 26px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color .1s ease !important;
}

.z-datebox-pp .z-datebox-calday td:hover {
    background: #EFF8FD !important;
}

/* the selected day */
.z-datebox-pp .z-datebox-seld,
.z-datebox-pp td.z-datebox-seld {
    background: #008FD3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* the time box that rides along in a DateTime popup */
.z-datebox-pp .z-datebox-timebox-inp {
    border: 1px solid #CBD5E1 !important;
    border-radius: 5px !important;
    height: 24px !important;
    font-size: 12px !important;
    padding: 0 6px !important;
}

/* ==========================================================================
   FILE SELECT DIALOG (image / binary fields)
   The control that picks the file is a ZK button whose label is the current
   file name - "-" when empty - so it rendered as a 20px sliver next to the
   "Select File" caption and read as decoration rather than a control. That
   is stock behaviour, not a regression: it measures the same with this
   stylesheet disabled. It is given the size, colour and glyph of a button.

   The scope is narrow on purpose. The attachment dialog also has buttons in
   its north region - it lays them out in a table.z-hbox with no caption -
   and an unscoped rule turned those three icon buttons into wide blue
   slabs. Only a button that is a direct sibling of its caption label
   qualifies, which is the shape the file-select dialog uses.
   ========================================================================== */
.z-window-modal .z-north-body > div:has(> span.z-label) > span.z-button,
.z-window-highlighted .z-north-body > div:has(> span.z-label) > span.z-button,
.z-window-overlapped .z-north-body > div:has(> span.z-label) > span.z-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 132px !important;
    height: 30px !important;
    padding: 0 14px !important;
    margin-left: 10px !important;
    background: #008FD3 !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

.z-window-modal .z-north-body > div:has(> span.z-label) > span.z-button:hover,
.z-window-highlighted .z-north-body > div:has(> span.z-label) > span.z-button:hover,
.z-window-overlapped .z-north-body > div:has(> span.z-label) > span.z-button:hover {
    background: #0079B3 !important;
}

/* the upload glyph, so the control announces what it does */
.z-window-modal .z-north-body > div:has(> span.z-label) > span.z-button::before,
.z-window-highlighted .z-north-body > div:has(> span.z-label) > span.z-button::before,
.z-window-overlapped .z-north-body > div:has(> span.z-label) > span.z-button::before {
    content: '' !important;
    width: 15px !important;
    height: 15px !important;
    margin-right: 8px !important;
    flex: 0 0 15px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 15px 15px !important;
}

/* ZK builds the button as a 3x3 sprite table; the middle cell holds the
   label - the file name, or "-" while nothing has been picked. */
.z-window-modal .z-north-body > div:has(> span.z-label) > span.z-button > table,
.z-window-highlighted .z-north-body > div:has(> span.z-label) > span.z-button > table,
.z-window-overlapped .z-north-body > div:has(> span.z-label) > span.z-button > table {
    width: auto !important;
    background: transparent !important;
}

.z-window-modal .z-north-body > div:has(> span.z-label) > span.z-button td.z-button-cm,
.z-window-highlighted .z-north-body > div:has(> span.z-label) > span.z-button td.z-button-cm,
.z-window-overlapped .z-north-body > div:has(> span.z-label) > span.z-button td.z-button-cm {
    background: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

/* the caption beside it */
.z-window-modal .z-north-body > div > span.z-label,
.z-window-highlighted .z-north-body > div > span.z-label,
.z-window-overlapped .z-north-body > div > span.z-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   WINDOW SIDE TABS (adwindow-nav)
   The tab strip down the left of a window was pale blue chips with black
   13.3px text on an even paler blue column, the selected one a flat
   #0068C5 block. The left margin of each button is how ADempiere encodes
   the tab's depth - a child tab sits further in - so margins are left
   untouched and only the look changes.
   ========================================================================== */
.adwindow-nav .adwindow-nav-content {
    /* The stock theme gives this height:100% and an inset dark glow. The
       padding has to be counted inside that height or the strip runs 6px
       past its own container, which is what put a seam under the last tab. */
    box-sizing: border-box !important;
    height: 100% !important;
    padding: 10px 0 10px 0 !important;
    background: #F4F7FA !important;
    box-shadow: none !important;
    border-right: 1px solid #E2E8F0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* a thin, quiet scrollbar for windows with many tabs */
.adwindow-nav .adwindow-nav-content::-webkit-scrollbar { width: 6px !important; }
.adwindow-nav .adwindow-nav-content::-webkit-scrollbar-track { background: transparent !important; }
.adwindow-nav .adwindow-nav-content::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 9999px !important;
}
.adwindow-nav .adwindow-nav-content::-webkit-scrollbar-thumb:hover { background: #94A3B8 !important; }

.adwindow-nav .adwindow-nav-content button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px 0 0 6px !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    padding: 6px 10px 6px 8px !important;
    min-height: 28px !important;
    cursor: pointer !important;
    /* the stock theme hangs a dark 5px glow off every unselected tab, which
       is what drew the boxy outline around them */
    box-shadow: none !important;
    background-image: none !important;
    transition: background-color .12s ease, color .12s ease !important;
}

.adwindow-nav .adwindow-nav-content button:hover {
    background: #E8EFF7 !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
}

/* the tab being edited */
.adwindow-nav .adwindow-nav-content button[class*="navbtn-sel"] {
    background: #008FD3 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 143, 211, .28) !important;
}

.adwindow-nav .adwindow-nav-content button[class*="navbtn-sel"]:hover {
    background: #0079B3 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* a hairline where the strip meets the form */
.adwindow-nav.z-west,
.adwindow-nav .z-west-body {
    background: #F4F7FA !important;
    border-right: 0 !important;
    overflow: hidden !important;
}

/* A tab that cannot be entered yet - no parent record saved, no access -
   carried exactly the same ink as an available one, so there was nothing to
   tell them apart until you clicked and nothing happened. */
.adwindow-nav .adwindow-nav-content button[class*="navbtn-dis"] {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    cursor: default !important;
}

.adwindow-nav .adwindow-nav-content button[class*="navbtn-dis"]:hover {
    background: transparent !important;
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
}

/* The indentation alone was too quiet to show that, say, Column Translation
   hangs off Column: standing in a nested tab, nothing said which tab you had
   to go through to get there. The tabs on the way in stay lit - a tinted
   ground and a chevron pointing at what they lead to - so the route reads
   at a glance and the tab you are on still stands alone in the brand blue.

   desktop-ui.js works the route out and writes data-tab-path: the depth
   lives in the left margin ADempiere assigns, and a selector can neither
   read a computed margin nor walk back up a flat list of buttons. */
.adwindow-nav .adwindow-nav-content button[data-tab-path="true"] {
    position: relative !important;
    background: #EAF6FD !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    font-weight: 600 !important;
    padding-right: 20px !important;
}

.adwindow-nav .adwindow-nav-content button[data-tab-path="true"]:hover {
    background: #DCEEF9 !important;
}

/* the chevron points at what this tab leads to */
.adwindow-nav .adwindow-nav-content button[data-tab-path="true"]::after {
    content: '' !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    width: 11px !important;
    height: 11px !important;
    margin-top: -5px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008FD3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 11px 11px !important;
    pointer-events: none !important;
}

/* a disabled tab on the route keeps its muted ink */
.adwindow-nav .adwindow-nav-content button[data-tab-path="true"][class*="navbtn-dis"] {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
}

/* ==========================================================================
   SMART BROWSE TOOLBAR
   Its options - Select All, Export, Delete record, Update record - are ZK
   text buttons, and a broad rule paints every descendant of a .z-button
   white so the blue primary buttons read. On this toolbar the ground is
   #F8FAFC, so the labels were white on near-white: the buttons were still
   there and still worked, they just could not be seen. They are given the
   shape and ink of a secondary button.
   ========================================================================== */
.z-toolbar span.z-button:not(.form-button) {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    padding: 0 12px !important;
    margin: 0 4px 0 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04) !important;
    cursor: pointer !important;
    transition: background-color .12s ease, border-color .12s ease !important;
}

.z-toolbar span.z-button:not(.form-button):hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

.z-toolbar span.z-button:not(.form-button) > table {
    width: auto !important;
    height: 100% !important;
    background: transparent !important;
}

.z-toolbar span.z-button:not(.form-button) td,
.z-toolbar span.z-button:not(.form-button) td.z-button-cm,
.z-toolbar span.z-button:not(.form-button) * {
    background: transparent !important;
    border: 0 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

.z-toolbar span.z-button:not(.form-button)[disabled],
.z-toolbar span.z-button:not(.form-button).z-button-disd * {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
}

/* ==========================================================================
   COMBOBOX HEIGHT
   The stock rule pins the wrapper span to 20px while the input inside it is
   26px, so the input hangs 6px below its own wrapper. In a browse parameter
   panel the row is 28px with overflow:hidden and the field's bottom edge was
   cut off. Matching the wrapper to the input lets the row centre the whole
   control instead of clipping it.
   ========================================================================== */
span.z-combobox:not(.login-box-body *):not(.login-window *):not(.z-west *):not(.z-west-body *) {
    height: 26px !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   RESULT TABLE (ZK listbox - browse results and window grids share it)
   ========================================================================== */
.z-listbox {
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
}

.z-listbox-body {
    background: #FFFFFF !important;
}

/* heading row: the stock one is a pale blue band with 11px ink */
.z-list-head {
    background: #F1F5F9 !important;
    background-image: none !important;
}

.z-list-header {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-right: 1px solid #EDF1F6 !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
}

.z-list-header:hover {
    background: #E8EEF5 !important;
}

/* rows */
.z-list-item {
    background: transparent !important;
}

.z-list-cell {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    color: #1E293B !important;
    -webkit-text-fill-color: #1E293B !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 4px 8px !important;
    background: transparent !important;
}

/* every other row, so a long row of figures stays trackable across */
.z-listbox-odd .z-list-cell,
.z-list-item.z-listbox-odd .z-list-cell {
    background: #FAFBFC !important;
}

.z-list-item:hover .z-list-cell {
    background: #EFF8FD !important;
}

.z-list-item-seld .z-list-cell,
.z-list-item-focus .z-list-cell {
    background: #DBEAFE !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
}

/* ==========================================================================
   INNER TABS (Search records / Result)
   The outer tabbox is the desktop's window strip, which already reads well;
   these are the tabs of a window's own tabbox, one level deeper.
   ========================================================================== */
.z-tabbox .z-tabbox .z-tabs {
    background: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.z-tabbox .z-tabbox .z-tabs-cnt,
.z-tabbox .z-tabbox .z-tabs-header {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

.z-tabbox .z-tabbox li.z-tab {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 2px !important;
    padding: 0 !important;
    height: auto !important;
}

.z-tabbox .z-tabbox li.z-tab * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 26px !important;
}

.z-tabbox .z-tabbox li.z-tab {
    padding: 0 12px !important;
}

.z-tabbox .z-tabbox li.z-tab:hover * {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}

/* the tab you are on: an underline rather than a filled chip, so it does not
   compete with the window tabs above it */
.z-tabbox .z-tabbox li.z-tab-seld {
    border-bottom-color: #008FD3 !important;
}

.z-tabbox .z-tabbox li.z-tab-seld * {
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   BUTTON LABELS OUTSIDE A TOOLBAR
   A broad rule paints every descendant of a .z-button white so the blue
   primary buttons read; on a light panel that leaves the label invisible.
   The buttons that really sit on a colour - .form-button, the selected side
   tab, the dialog file picker - keep their white through their own rules.
   ========================================================================== */
span.z-button:not(.form-button) td.z-button-cm,
span.z-button:not(.form-button) td.z-button-cm * {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    font-size: 12px !important;
}

/* ==========================================================================
   START SEARCH
   The main action of a browse was a bare arrows icon with an invisible
   label beside it. It reads as the primary action now.
   ========================================================================== */
span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 30px !important;
    padding: 0 16px !important;
    background: #008FD3 !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 143, 211, .3) !important;
    cursor: pointer !important;
    transition: background-color .12s ease !important;
}

span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *):hover {
    background: #0079B3 !important;
}

span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *) > table {
    width: auto !important;
    background: transparent !important;
}

span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *) td.z-button-cm,
span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *) td.z-button-cm * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: transparent !important;
    white-space: nowrap !important;
}

/* the icon is a dark outline glyph, redrawn in white for the blue ground */
span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *) img[src$="/Refresh16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

/* ==========================================================================
   WINDOW GRID VIEW
   The grid view of a window is a ZK grid, not the listbox the browse result
   uses, so it kept the stock look while the browse table was restyled. Same
   treatment here. The scope is the data-grid-data attribute desktop-ui.js
   sets, because a window's form is also a ZK grid and must not be touched.
   ========================================================================== */
.z-grid[data-grid-data="true"] {
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
}

.z-grid[data-grid-data="true"] .z-grid-body {
    background: #FFFFFF !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-color: #94A3B8 #F1F5F9 !important;
    scrollbar-width: auto !important;
}

/* The window panels must not clip the grid's scrollbars. */
.adtab-body:has(.z-grid[data-grid-data="true"]),
.adtab-content:has(.z-grid[data-grid-data="true"]),
.adtab-grid-panel:has(.z-grid[data-grid-data="true"]) {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.z-grid[data-grid-data="true"] {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* Keep the column tables wider than the viewport when a list has many
   fields, so the horizontal scrollbar exposes the remaining columns. */
.z-grid[data-grid-data="true"] .z-columns,
.z-grid[data-grid-data="true"] .z-rows {
    width: max-content !important;
    min-width: 100% !important;
}

/* The heading row and the data are two separate tables, and ZK gives them
   the same width so the columns line up. Sizing only the body one to its
   content took that away: a column whose data is wider than its heading -
   Table in the migration steps, 223 against 199 - stretched the body table
   24px past the header, so from that column on the data no longer sat
   under its heading and the two scrolled different distances. The body
   follows the header again, and min-width keeps it filling the panel when
   the columns do not reach across it. */
.z-grid[data-grid-data="true"] .z-grid-body > table {
    width: 100% !important;
    min-width: 100% !important;
}

.z-grid[data-grid-data="true"] .z-columns > table,
.z-grid[data-grid-data="true"] .z-rows > table {
    width: max-content !important;
    min-width: 100% !important;
}

#reportFrame,
#reportFrame > iframe,
.z-iframe {
    overflow: auto !important;
}

/* heading cells - the stock ones are a flat #EBEBEB block */
.z-grid[data-grid-data="true"] .z-column {
    background: #F1F5F9 !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-right: 1px solid #EDF1F6 !important;
}

.z-grid[data-grid-data="true"] .z-column .z-column-cnt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
}

.z-grid[data-grid-data="true"] .z-column:hover {
    background: #E8EEF5 !important;
}

/* rows */
.z-grid[data-grid-data="true"] .z-row .z-row-cnt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    color: #1E293B !important;
    -webkit-text-fill-color: #1E293B !important;
    padding: 4px 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    box-sizing: border-box !important;
}

.z-grid[data-grid-data="true"] .z-row:hover .z-row-cnt {
    background: #EFF8FD !important;
}

.z-grid[data-grid-data="true"] .z-row-seld .z-row-cnt,
.z-grid[data-grid-data="true"] .z-row-over-seld .z-row-cnt {
    background: #DBEAFE !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
}

/* One line per row, as in the browse result: the stock grid wraps every cell,
   which turned a name like "E.R.P. Consultores y Asociados, C.A." into two
   lines and rows into 50px bands. Cells that hold an editor are left alone,
   so clicking into a field still behaves. */
.z-grid[data-grid-data="true"] .z-row .z-row-cnt {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ZK wraps the text in a div of its own, and the ellipsis has to be asked
   for there too or the text simply stops mid-word */
.z-grid[data-grid-data="true"] .z-row .z-row-cnt > div:not(:has(input)):not(:has(textarea)):not(:has(select)):not(:has(table)) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Smart Browse criteria grid: ZK keeps the editor's intrinsic width when a
   combobox or a date range sits in a percentage column. That pushes the last
   criteria fields outside the viewport. Let the grid and its editors shrink
   to their cells while keeping dropdowns free to open over the form.
   Scope strictly to criteria / parameter panels so window form mode is not affected. */
.z-grid:has(.z-combobox):not(.process-parameter-grid):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *):not(.z-window-modal *):not(.z-window-highlighted *):not(.z-window-overlapped *) {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    overflow: visible !important;
}

/* Info forms identify their search editors with Lookup_Criteria_. Keep the
   first label column compact instead of distributing spare width into it.
   Do not move the Reset region or change process / result grids. */
.desktop-tabpanel .z-grid:has([id^="Lookup_Criteria_"]) > .z-grid-body > table > tbody.z-rows > tr > td:first-child {
    width: 90px !important;
}

/* Preserve the process grid width and its innerWidth (70% in a tab, 100% in
   a modal). ZK renders that width on the inner tables. Center those tables
   without replacing their width with 100%. */
.z-grid.process-parameter-grid {
    margin: 12px auto 0 !important;
}
.z-grid.process-parameter-grid > .z-grid-header,
.z-grid.process-parameter-grid > .z-grid-body {
    max-width: 100% !important;
}
.z-grid.process-parameter-grid > .z-grid-header > table,
.z-grid.process-parameter-grid > .z-grid-body > table {
    margin-left: auto !important;
    margin-right: auto !important;
    table-layout: fixed !important;
}
/* Shift tab process parameters slightly left of centre; modal tables keep
   their full width. Clamp the margin for narrow viewports. */
.z-grid.process-parameter-grid > .z-grid-header > table[width="70%"],
.z-grid.process-parameter-grid > .z-grid-body > table[width="70%"] {
    margin-left: max(0px, calc(15% - 56px)) !important;
}

.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-grid-body,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-rows,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-row,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-row-inner,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-row-cnt {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    vertical-align: top !important;
}

.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-row-cnt > div,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-row-cnt > table,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) span.z-combobox,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) span.z-datebox {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) span.z-combobox > table {
    width: 100% !important;
    table-layout: fixed !important;
}

.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-combobox-inp,
.z-grid:has(.z-combobox):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-datebox-inp {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.z-grid:has(.z-combobox):not(.process-parameter-grid):not([data-grid-data="true"]):not(.adtab-content *):not(.adwindow-content *):not(.adwindow-form *) .z-label {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* ==========================================================================
   WINDOW FORM MODE ("MODO VENTANA") SCROLLBARS & CONTAINER OVERFLOW
   ========================================================================== */
.adtab-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94A3B8 #F1F5F9 !important;
}

.adtab-content:has(.z-grid[data-grid-data="true"]) {
    overflow: visible !important;
}

.adtab-content > .z-grid:not([data-grid-data="true"]),
.adtab-content .z-grid:not([data-grid-data="true"]) {
    overflow: hidden !important;
}

.adtab-content > .z-grid:not([data-grid-data="true"]) > .z-grid-body,
.adtab-content .z-grid:not([data-grid-data="true"]) > .z-grid-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 100% !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94A3B8 #F1F5F9 !important;
}

.adtab-content .z-grid:not([data-grid-data="true"]) > .z-grid-body::-webkit-scrollbar,
.adtab-content::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.adtab-content .z-grid:not([data-grid-data="true"]) > .z-grid-body::-webkit-scrollbar-track,
.adtab-content::-webkit-scrollbar-track {
    background: #F1F5F9 !important;
}

.adtab-content .z-grid:not([data-grid-data="true"]) > .z-grid-body::-webkit-scrollbar-thumb,
.adtab-content::-webkit-scrollbar-thumb {
    background: #94A3B8 !important;
    border-radius: 4px !important;
}

.adtab-content .z-grid:not([data-grid-data="true"]) > .z-grid-body::-webkit-scrollbar-thumb:hover,
.adtab-content::-webkit-scrollbar-thumb:hover {
    background: #64748B !important;
}

/* A cell showing a real editor is left to lay out the way ZK intended.
   The test has to skip the parked input above, or it matches every cell in
   the grid - which is what let long names wrap to two lines and made the
   rows uneven. */
.z-grid[data-grid-data="true"] .z-row .z-row-cnt:has(input:not([style*="opacity:0"]):not([style*="opacity: 0"]):not([type="checkbox"])),
.z-grid[data-grid-data="true"] .z-row .z-row-cnt:has(textarea),
.z-grid[data-grid-data="true"] .z-row .z-row-cnt:has(select),
.z-grid[data-grid-data="true"] .z-row .z-row-cnt:has(.z-combobox:not([style*="display:none"])),
.z-grid[data-grid-data="true"] .z-row .z-row-cnt:has(.z-datebox),
.z-grid[data-grid-data="true"] .z-row .z-row-cnt:has(.z-bandbox) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* The label ZK shows when the cell is only being read stays on one line.
   Checkbox wrappers are excluded: they are spans too, and a blanket
   `display: block` here put back the second checkbox that ZK had hidden. */
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt > div > label:not(.z-checkbox-cnt):not([style*="display:none"]):not([style*="display: none"]),
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt > div > span:not(.z-checkbox):not([style*="display:none"]):not([style*="display: none"]) {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================================
   OPEN WINDOW TABS
   ZK draws each tab as three sprite slices - z-tab-hl, -hm, -hr - which is
   where the pale blue pill came from. Those images are dropped and the tab
   itself carries the shape. The scope is the depth desktop-ui.js writes:
   level 0 is this strip, the tabs inside a window are deeper and keep their
   own underlined styling.
   ========================================================================== */
.z-tabbox[data-tabbox-level="0"] > .z-tabs {
    background: #F1F5F9 !important;
    background-image: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 5px 6px 0 6px !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.z-tabbox[data-tabbox-level="0"] > .z-tabs .z-tabs-header,
.z-tabbox[data-tabbox-level="0"] > .z-tabs .z-tabs-cnt {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

/* ZK adds these controls when the open-window strip is wider than the screen.
   Keep them as quiet extensions of the tab bar instead of exposing the stock
   sprite arrows. */
.z-tabs.z-tabs-scroll > .z-tabs-left-scroll,
.z-tabs.z-tabs-scroll > .z-tabs-right-scroll {
    top: 5px !important;
    bottom: 0 !important;
    width: 28px !important;
    height: 27px !important;
    background: #F1F5F9 !important;
    background-image: none !important;
    border: 1px solid #D7E0EA !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

.z-tabs.z-tabs-scroll > .z-tabs-left-scroll {
    left: 0 !important;
    border-radius: 6px 0 0 0 !important;
}

.z-tabs.z-tabs-scroll > .z-tabs-right-scroll {
    right: 0 !important;
    border-radius: 0 6px 0 0 !important;
}

.z-tabs.z-tabs-scroll > .z-tabs-left-scroll {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354718B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 15px 15px !important;
}

.z-tabs.z-tabs-scroll > .z-tabs-right-scroll {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354718B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 15px 15px !important;
}

.z-tabs.z-tabs-scroll > .z-tabs-left-scroll:hover,
.z-tabs.z-tabs-scroll > .z-tabs-right-scroll:hover {
    background: #E4EBF3 !important;
}

.z-tabs.z-tabs-scroll > .z-tabs-left-scroll:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174A70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}

.z-tabs.z-tabs-scroll > .z-tabs-right-scroll:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174A70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    border-radius: 7px 7px 0 0 !important;
    height: 27px !important;
    margin: 0 2px 0 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background-color .12s ease !important;
}

/* the three sprite slices that used to draw the pill */
.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab .z-tab-hl,
.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab .z-tab-hr,
.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab .z-tab-hm {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab .z-tab-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    line-height: 25px !important;
    padding: 0 !important;
}

.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab:hover {
    background: #E4EBF3 !important;
}

/* the window you are looking at: a white tab that joins the content below */
.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab-seld {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: inset 0 2px 0 0 #008FD3 !important;
}

.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab-seld .z-tab-text {
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    font-weight: 600 !important;
}

/* ZK positions the close control absolutely, so it sat on top of the last
   letters of the title; the tab keeps room for it on the right instead */
.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab:has(.z-tab-close) {
    padding-right: 26px !important;
}

/* close control: the stock one is a sprite */
.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab .z-tab-close {
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    background: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 9px 9px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
    opacity: .8 !important;
}

.z-tabbox[data-tabbox-level="0"] > .z-tabs li.z-tab .z-tab-close:hover {
    background-color: #E2E8F0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.8' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}

/* ==========================================================================
   PLAIN LABELLED BUTTONS
   A ZK button that is not one of the coloured .form-button ones - Simulate
   Match and OK at the foot of the bank reconciliation window, for instance -
   drew its shape from the stock theme's sprite. With that gone it was left
   as bare dark text floating in the bar: still clickable, but nothing said
   it was a button. It gets the frame of a secondary button.

   Only buttons that carry a text label qualify. desktop-ui.js marks them,
   because a selector cannot ask whether an element has text, and an icon
   button styled this way would grow a box around every small glyph.
   ========================================================================== */
span.z-button[data-button-label="true"]:not(.form-button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 28px !important;
    padding: 0 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background-color .12s ease, border-color .12s ease !important;
}

span.z-button[data-button-label="true"]:not(.form-button):hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

span.z-button[data-button-label="true"]:not(.form-button) > table {
    width: auto !important;
    height: 100% !important;
    background: transparent !important;
}

span.z-button[data-button-label="true"]:not(.form-button) td.z-button-cm {
    background: transparent !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   POP-UP MENUS
   The menu behind a window's gear, and the context menu on a field, are the
   same component: a #E8E3E3 block with 11px black type, square corners, no
   shadow and no feedback under the pointer. Same markup, restyled.
   ========================================================================== */
.z-menu-popup {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .16) !important;
    padding: 6px !important;
}

.z-menu-popup .z-menu-popup-cnt {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.z-menu-popup li.z-menu-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 1px 0 !important;
}

.z-menu-popup .z-menu-item-cnt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 7px 14px 7px 10px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color .1s ease, color .1s ease !important;
}

.z-menu-popup li.z-menu-item:hover > .z-menu-item-cnt,
.z-menu-popup .z-menu-item-cnt:hover,
.z-menu-popup .z-menu-item-cnt.z-menu-item-cnt-over {
    background: #EFF8FD !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
}

/* the icon slot: keep its width so the labels stay in one column */
.z-menu-popup .z-menu-item-img {
    margin-right: 8px !important;
    opacity: .85 !important;
}

/* a disabled entry says so instead of looking available */
.z-menu-popup .z-menu-item-disd .z-menu-item-cnt,
.z-menu-popup .z-menu-item-cnt-disd {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    cursor: default !important;
}

.z-menu-popup .z-menu-separator,
.z-menu-popup .z-menu-popup-sep {
    border-top: 1px solid #EDF1F6 !important;
    margin: 5px 4px !important;
    height: 0 !important;
    background: none !important;
}

/* ==========================================================================
   CHECKBOX THAT ZK HAS HIDDEN
   A grid cell holds two checkboxes: the one it displays and the editor that
   appears when the row is being edited. ZK hides whichever is not in play
   with an inline display:none - and the blanket `display: inline-flex
   !important` on .z-checkbox overrode it, so a checkbox column showed both
   at once the moment a row went into edit mode.

   This does not undo that rule, it excludes the case ZK has already settled.
   ========================================================================== */
.z-checkbox[style*="display:none"],
.z-checkbox[style*="display: none"],
span.z-checkbox[style*="display:none"],
span.z-checkbox[style*="display: none"] {
    display: none !important;
}

/* ==========================================================================
   GRID CELLS ON ONE LINE
   Cell contents sat at whatever height each one happened to have - text at
   26px, a checkbox at 31, a wrapped name at 52 - and each started at a
   different point, so nothing in a row lined up and the rows themselves
   came out 41, 58 and 77px tall. Every cell centres its content on a common
   line now, and the row takes its height from that.
   ========================================================================== */
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt {
    display: flex !important;
    align-items: center !important;
    min-height: 28px !important;
}

/* the text itself still has to be able to shrink and show an ellipsis */
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Every cell carries an input that ZK parks out of sight with
   opacity:0 and zero width and height. Giving inputs in a cell a height
   inflated that one too, which added a second line box to the cell: the
   rows around an edited one grew to 56px while the rest stayed at 37.
   It is left at the size ZK gave it. */
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt input[style*="opacity:0"],
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt input[style*="opacity: 0"] {
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ZK marks the cell being edited with an inline 2px border plus 5px of
   padding, which made that one row 14px taller than the rest and broke the
   line the other rows sit on. The border stays - it is how you see where you
   are - and the padding comes off, so the row keeps its height. */
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt > div[style*="border:2px"],
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt > div[style*="border: 2px"] {
    padding: 0 2px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   ANYTHING ZK HAS HIDDEN INSIDE A GRID CELL STAYS HIDDEN
   A cell holds the read-only display and the editor, and ZK shows one by
   hiding the other with an inline display:none. Rules that set `display`
   on a cell's contents kept overriding that, so the two appeared stacked -
   a payment's Client cell showed its text with the combobox underneath,
   and a checkbox column showed one greyed box beside one editable box.
   This is the general form of that fix, so a rule added later cannot bring
   the pair back.
   ========================================================================== */
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt [style*="display:none"],
.z-grid[data-grid-data="true"] .z-row > td > .z-row-cnt [style*="display: none"] {
    display: none !important;
}

/* ==========================================================================
   PAGING BAR AND STATUS BAR
   The paging bar was a pale blue band whose four controls were slices of a
   sprite sheet, and it ran 2px into the status line under it - the paging
   bar ended at 960 while the status bar started at 958.
   ========================================================================== */
.z-paging {
    background: var(--surface, #FFFFFF) !important;
    background-image: none !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    /* ZK anchors this bar's region 8px into the status line below it. The
       region is sized to the space that is actually free instead, so the two
       stop overlapping. */
    height: 20px !important;
    min-height: 0 !important;
}

.adtab-grid-panel > .z-south,
.adtab-grid-panel > .z-south > .z-south-body {
    height: 20px !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* the four controls: outlined chevrons and bars instead of sprite slices */
.z-paging .z-paging-btn {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 5px !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    transition: background-color .12s ease !important;
}

.z-paging .z-paging-first,
.z-paging .z-paging-prev,
.z-paging .z-paging-next,
.z-paging .z-paging-last {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 14px 14px !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 5px !important;
    width: 22px !important;
    height: 18px !important;
    cursor: pointer !important;
    transition: background-color .12s ease !important;
}

.z-paging .z-paging-first {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 5 9 12 16 19'/%3E%3Cline x1='6' y1='5' x2='6' y2='19'/%3E%3C/svg%3E") !important;
}
.z-paging .z-paging-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 5 8 12 15 19'/%3E%3C/svg%3E") !important;
}
.z-paging .z-paging-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") !important;
}
.z-paging .z-paging-last {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 5 15 12 8 19'/%3E%3Cline x1='18' y1='5' x2='18' y2='19'/%3E%3C/svg%3E") !important;
}

.z-paging .z-paging-first:hover,
.z-paging .z-paging-prev:hover,
.z-paging .z-paging-next:hover,
.z-paging .z-paging-last:hover {
    background-color: #EFF8FD !important;
}

/* a control that leads nowhere says so rather than looking available */
.z-paging .z-paging-btn-disd,
.z-paging .z-paging-btn-disd:hover {
    opacity: .32 !important;
    background-color: transparent !important;
    cursor: default !important;
}

/* the page number reads as a field */
.z-paging .z-paging-inp {
    border: 1px solid #CBD5E1 !important;
    border-radius: 5px !important;
    height: 18px !important;
    padding: 0 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums !important;
    color: #1E293B !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.z-paging .z-paging-inp:focus {
    border-color: #008FD3 !important;
    box-shadow: 0 0 0 3px rgba(0, 143, 211, .15) !important;
    outline: none !important;
}

.z-paging .z-paging-text,
.z-paging .z-paging-info {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    font-variant-numeric: tabular-nums !important;
}

.z-paging .z-paging-sep {
    background: none !important;
    border-left: 1px solid #E2E8F0 !important;
    width: 1px !important;
    margin: 0 8px !important;
}

/* ---------- status line ---------- */
.message-info-text,
.status-db,
.status-line {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    font-variant-numeric: tabular-nums !important;
}

/* ==========================================================================
   THE GRID PANEL STOPS ABOVE THE STATUS LINE
   The rule above that separates window content from the toolbar gives
   .adtab-body a 6px top margin - but ADempiere measures the region and sets
   that element's height to fill it, so the margin pushed it 6px down and it
   overran its container by exactly that much at the foot. That is what put
   the paging bar on top of the status line.

   The same applies to .adtab-content, which is positioned to fill that
   body: a margin on it shifts it down and it overruns by the same 6px.

   The separation stays on the elements around them, which are laid out in
   flow; the two whose size is computed are left where the measurement
   expects them. This also closes the gap that showed between the toolbar
   and the panel holding the table.
   ========================================================================== */
.adtab-body,
.adtab-body > .adtab-content {
    margin-top: 0 !important;
}

/* The bar already says which page you are on; how many records there are is
   what the status line at the foot of the window is for, and it was saying
   the same thing twice. */
.z-paging .z-paging-info {
    display: none !important;
}

/* ==========================================================================
   FIELD BUTTONS - the magnifier, the person, the calculator, the calendar
   These sat 30px tall beside a 26px field, 2px above its top edge, and some
   left a 5px gap while others were flush: the little box on the right of a
   field never matched the field. They are welded to it now - same height,
   same top, no gap, square on the side that meets the field and rounded on
   the outside - so a field and its control read as one object.

   The search action of a form is excluded by name: it carries a Refresh16
   icon like any other, but it runs the window's query and belongs with the
   primary buttons. Excluding it here rather than restating it afterwards is
   what makes it stick - this selector carries one more element than the
   restatement, so it was winning on specificity and the button went pale a
   moment after the page settled.

   Only icon-only buttons qualify: a button carrying a label - Payment Rule,
   Create Invoice from Purchase Order - is a different thing and a fixed
   28px cut its text off. desktop-ui.js marks which is which, since a
   selector cannot ask whether an element has text.

   The icons were 10px sprites scaled up to 14, which is why they looked
   soft. They are redrawn as vectors at 15px: nothing else about the button
   changes, so every click still does what it did.
   ========================================================================== */
.z-row-cnt span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]),
.z-row-cnt span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])),
.field-input span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]),
.field-input span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])),
td > span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]),
td > span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 26px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0 6px 6px 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease !important;
}

.z-row-cnt span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]):hover,
.z-row-cnt span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])):hover,
.field-input span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]):hover,
.field-input span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])):hover,
td > span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]):hover,
td > span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])):hover {
    background: #EFF8FD !important;
    border-color: #94A3B8 !important;
}

/* the field it belongs to keeps its own corners square on that side */
.z-row-cnt input.z-textbox:has(+ span.z-button),
.z-row-cnt input.z-decimalbox:has(+ span.z-button) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ZK renders the label inside a 3x3 table; it must not add height here */
.z-row-cnt span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]) > table,
.z-row-cnt span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])) > table,
.field-input span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]) > table,
.field-input span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])) > table,
td > span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="10.png"]) > table,
td > span.z-button:not(.form-button)[data-button-label="false"]:has(img[src*="16.png"]):not(:has(img[src$="/Refresh16.png"])) > table {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}

/* ---------- the icons themselves ---------- */
span.z-button img[src$="/PickOpen10.png"],
span.z-button img[src$="/PickOpen16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

span.z-button img[src$="/BPartner10.png"],
span.z-button img[src$="/BPartner16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

span.z-button img[src$="/Calculator10.png"],
span.z-button img[src$="/Calculator16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='11' x2='8' y2='11'/%3E%3Cline x1='12' y1='11' x2='12' y2='11'/%3E%3Cline x1='16' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='8' y2='15'/%3E%3Cline x1='12' y1='15' x2='12' y2='15'/%3E%3Cline x1='16' y1='15' x2='16' y2='19'/%3E%3Cline x1='8' y1='19' x2='12' y2='19'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

span.z-button img[src$="/InfoAccount16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='21' x2='21' y2='21'/%3E%3Cline x1='5' y1='21' x2='5' y2='10'/%3E%3Cline x1='12' y1='21' x2='12' y2='10'/%3E%3Cline x1='19' y1='21' x2='19' y2='10'/%3E%3Cpolyline points='3 8 12 3 21 8'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

span.z-button img[src$="/Process16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

/* the calendar, so the four match. The old sprite is painted as a
   background on the image itself, so it has to come off as well as the
   content being replaced. */
.z-datebox-btn .z-datebox-img,
span.z-datebox .z-datebox-img {
    background-image: none !important;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

/* ZK sets these fields to width:99%, leaving about 4px of their cell empty -
   which is the gap that showed between a field and the control welded to it.
   Only fields that actually have one of those controls beside them are
   widened, so nothing else in the form shifts. */
td:has(+ td span.z-button) > input[style*="99%"],
td:has(+ td > span.z-button) > input[style*="99%"] {
    width: 100% !important;
}

/* ==========================================================================
   ACTION BUTTONS
   They were a blue gradient with an 11px label in regular weight and a dark
   sprite icon sitting on the blue - the label read as a caption rather than
   as the action it fires, and the icon fought its own ground. Flat colour,
   a label with the weight of a button, and the icon painted white.
   ========================================================================== */
span.z-button.form-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 30px !important;
    padding: 0 14px !important;
    background: #008FD3 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background-color .12s ease, box-shadow .12s ease, transform .06s ease !important;
}

span.z-button.form-button:hover {
    background: #0079B3 !important;
    box-shadow: 0 2px 6px rgba(0, 143, 211, .3) !important;
}

/* a press you can feel */
span.z-button.form-button:active {
    background: #006796 !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .16) !important;
    transform: translateY(1px) !important;
}

span.z-button.form-button:focus-visible,
span.z-button.form-button button:focus-visible {
    outline: 2px solid #0F172A !important;
    outline-offset: 2px !important;
}

/* the label carries the weight of an action, not of a caption */
span.z-button.form-button td.z-button-cm,
span.z-button.form-button td.z-button-cm * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .005em !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: transparent !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

span.z-button.form-button > table,
span.z-button.form-button > table td {
    background: transparent !important;
    border: 0 !important;
    height: auto !important;
}

/* The icons are dark sprites drawn for a light background. Rather than
   replace each one, they are painted flat white so they read on the blue
   and every button carries the same weight of mark. */
span.z-button.form-button img {
    width: 15px !important;
    height: 15px !important;
    filter: brightness(0) invert(1) !important;
    opacity: .95 !important;
}

/* an action that cannot be fired says so */
span.z-button.form-button[disabled],
span.z-button.form-button.z-button-disd,
span.z-button.form-button:has(button[disabled]) {
    background: #CBD5E1 !important;
    box-shadow: none !important;
    cursor: default !important;
    transform: none !important;
}

span.z-button.form-button[disabled] img,
span.z-button.form-button.z-button-disd img,
span.z-button.form-button:has(button[disabled]) img {
    opacity: .7 !important;
}

/* ==========================================================================
   MODAL WINDOWS
   ZK builds one out of nine pieces - four corners, four edges and a middle -
   and the stock theme paints every one of them #1F9BDE, which is the thick
   blue frame around a dialog. The title sat in an 11px line on that blue and
   the two controls were slices of a sprite sheet.

   The pieces are repurposed rather than fought: the top row becomes the
   header band, the sides and middle become the surface.
   ========================================================================== */
.z-window-modal,
.z-window-highlighted,
.z-window-overlapped {
    border-radius: 12px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .1) !important;
    background: #FFFFFF !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
}

/* All dialog types remain usable when their content is larger than the
   initial ZK size. ZK still owns the drag/resize behavior; these rules keep
   the body from expanding outside the viewport. */
.z-window-modal .z-window-modal-cnt,
.z-window-highlighted .z-window-highlighted-cnt,
.z-window-overlapped .z-window-overlapped-cnt {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: calc(100vh - 100px) !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94A3B8 #F1F5F9 !important;
}

.z-window-modal .z-window-modal-header,
.z-window-highlighted .z-window-highlighted-header,
.z-window-overlapped .z-window-overlapped-header {
    cursor: move !important;
    user-select: none !important;
}

/*  A floor and a ceiling, not one width for all of them.

    Forcing every dialog that holds a combobox, a listbox or a grid to 1100px
    stopped long field labels collapsing into vertical text, which is a real
    fault, but it also stretched dialogs that ask for far less: the document
    action window carries a 400px grid and a single combobox, declares itself
    410px wide, and was blown out to 1100 to show it.

    A minimum does the job the width was doing - nothing is left narrow enough
    to break its labels - while the maximum keeps any of them from running
    past the viewport. Between the two, every dialog keeps the width it
    declares for itself: this rule sets no width at all, deliberately.
    Setting one to `auto` is not the same thing and does not work here,
    because `auto` discards the declared width and shrinks the window to its
    content - Product Info asks for 1536px and collapses to the 520px floor,
    with thirteen of its labels broken into vertical text.  */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):is(
    :has(.z-combobox),
    :has(.z-listbox):not(:has(img[src$="/AD10030HB.png"])),
    :has(.z-grid)
) {
    min-width: min(520px, calc(100vw - 32px)) !important;
    max-width: min(1100px, calc(100vw - 32px)) !important;
}

/* ProcessModalDialog sets its width before ZK measures its internal center.
   Expanding it afterwards to 1100px leaves a 489px center with a 1100px grid
   body; keep the process dialog at the width ZK used for that measurement. */
.z-window-modal:has(.process-parameter-grid),
.z-window-highlighted:has(.process-parameter-grid),
.z-window-overlapped:has(.process-parameter-grid) {
    width: 55% !important;
    /* Restated so the generic 1100px ceiling cannot clip this one: 55% is
       already relative to the viewport, and clipping it would recreate the
       centre/grid mismatch above on a display wider than 2000px. */
    max-width: calc(100vw - 32px) !important;
}

/*  FindWindow and several legacy dialogs embed their real content in a
    z-window-embedded, and ZK measures the panels inside them once, against
    the width the window asks for, at the moment it renders them. FindWindow
    asks for 750x350 (FindWindow.java), and at that width a window with many
    criteria has nowhere to put its labels.

    These rules were removed once, on the reading that the nowrap rule alone
    kept the labels on one line and the width was only stretching the frame.
    That was measured on a search window with 20 labels, which fits 750px,
    and it is wrong for the ones that do not: Encontrar registro: Contabilidad
    has 35 labels and collapsed 28 of them into vertical text, one letter per
    line - "Esquema Contable" came out 10px wide and 216px tall.

    Both halves are needed, and they were measured separately: nowrap alone
    leaves the labels on one line but needs a 1016px table inside a 708px
    body, so the criteria scroll sideways; the width alone does not stop the
    collapse. CSS cannot size the window to its content instead - ZK fixes
    the inner widths in pixels when it renders, so width: max-content leaves
    the frame at 738px while the table still wants 1016.  */
/* FindWindow and several legacy dialogs embed their real content in a
   z-window-embedded. Their grid is not under .adtab-content, so the generic
   scrollbar rule never reached it. Keep the grid wide enough for its pairs
   of label/value columns and let the embedded body scroll in both axes. */
.z-window-modal:has(.z-window-embedded .z-grid:not(.process-parameter-grid)),
.z-window-highlighted:has(.z-window-embedded .z-grid:not(.process-parameter-grid)),
.z-window-overlapped:has(.z-window-embedded .z-grid:not(.process-parameter-grid)) {
    width: min(1180px, calc(100vw - 24px)) !important;
    /* The ceiling has to be restated: the generic dialog rule above caps
       dialogs at 1100px and a max-width beats a width, so without this the
       frame is clipped to 1100 while the grid keeps its own 1100px minimum,
       leaving the body 41px short of its table and putting a horizontal
       scrollbar under every search window. */
    max-width: min(1180px, calc(100vw - 24px)) !important;
}

/* FindWindow embeds its forms inside tab panels. Do not apply these rules
   to InfoProduct/InfoBPartner: even their tiny Reset grid would become 1100px. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-tabpanel .z-window-embedded .z-grid:not(.process-parameter-grid))
:is(.z-window-modal-cnt, .z-window-highlighted-cnt, .z-window-overlapped-cnt,
    .z-tabpanel-cnt, .z-window-embedded-cnt-noborder) {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped)
.z-tabpanel .z-window-embedded .z-grid:not([data-grid-data="true"]):not(.process-parameter-grid) {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped)
.z-tabpanel .z-window-embedded .z-grid:not([data-grid-data="true"]):not(.process-parameter-grid) > .z-grid-body {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94A3B8 #F1F5F9 !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped)
.z-tabpanel .z-window-embedded .z-grid:not([data-grid-data="true"]):not(.process-parameter-grid) > .z-grid-body > table {
    min-width: 1100px !important;
    width: 100% !important;
    table-layout: auto !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped)
.z-tabpanel .z-window-embedded .z-grid:not([data-grid-data="true"]):not(.process-parameter-grid) .z-row-cnt .z-label {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* AboutWindow starts at 500x490 and updates its tabbox on resize. Preserve
   those inline dimensions instead of pinning a resized window to 500px. */
.z-window-modal:has(img[src$="/AD10030HB.png"]),
.z-window-highlighted:has(img[src$="/AD10030HB.png"]),
.z-window-overlapped:has(img[src$="/AD10030HB.png"]) {
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
}
/* ZK's outer Vbox is an auto-layout table. A long pre inside the 100%-wide
   tabbox otherwise expands that table to its intrinsic text width, placing
   the scrollbars thousands of pixels beyond the window's clipped edge. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) :is(.z-window-modal-cnt, .z-window-highlighted-cnt, .z-window-overlapped-cnt) > table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}
.z-window-modal:has(img[src$="/AD10030HB.png"]) .z-tabbox,
.z-window-highlighted:has(img[src$="/AD10030HB.png"]) .z-tabbox,
.z-window-overlapped:has(img[src$="/AD10030HB.png"]) .z-tabbox,
.z-window-modal:has(img[src$="/AD10030HB.png"]) .z-tabpanels,
.z-window-highlighted:has(img[src$="/AD10030HB.png"]) .z-tabpanels,
.z-window-overlapped:has(img[src$="/AD10030HB.png"]) .z-tabpanels {
    max-width: 100% !important;
}
/* AboutWindow gets one automatic scroll surface per selected tab. The outer
   window remains fixed, while each tab shows horizontal and/or vertical
   bars only when its own content actually exceeds the available area. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) :is(.z-window-modal-cnt, .z-window-highlighted-cnt, .z-window-overlapped-cnt, .z-tabbox, .z-tabpanels, .z-tabpanel) {
    min-height: 0 !important;
    overflow: hidden !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabbox,
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanels {
    box-sizing: border-box !important;
    width: 100% !important;
}
/* ZK 3.6 sets the selected panel's pixel height in _fixPanelHgh. Its
   scroll surface is the direct !real child; the -cnt class is added later
   by onVisi. Do not replace the measured panel height with a percentage. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel > div[id$="!real"] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94A3B8 #F1F5F9 !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel:has(pre) > div[id$="!real"] > div {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel:has(pre) pre {
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
}
/* Let the Errors content grow inside the tab's single scroll surface. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel:has(.z-listbox) > div[id$="!real"] > table {
    height: auto !important;
    table-layout: fixed !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel:has(.z-listbox) .z-listbox {
    box-sizing: border-box !important;
    width: max(100%, 600px) !important;
    min-width: 600px !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel:has(.z-listbox) .z-listbox-header {
    width: 100% !important;
    overflow: visible !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel:has(.z-listbox) .z-listbox-body {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) .z-tabpanel:has(.z-listbox) :is(.z-listbox-header, .z-listbox-body) > table {
    min-width: 600px !important;
}

.z-window-modal:has(.z-combobox) .z-window-modal-cnt,
.z-window-highlighted:has(.z-combobox) .z-window-highlighted-cnt,
.z-window-overlapped:has(.z-combobox) .z-window-overlapped-cnt,
.z-window-modal:has(.z-listbox) .z-window-modal-cnt,
.z-window-highlighted:has(.z-listbox) .z-window-highlighted-cnt,
.z-window-overlapped:has(.z-listbox) .z-window-overlapped-cnt {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Generic resize affordance for multiline fields. The parent cell shrinks,
   while the user can drag the bottom edge downward without widening the
   window. */
.z-window-modal textarea.z-textbox,
.z-window-highlighted textarea.z-textbox,
.z-window-overlapped textarea.z-textbox,
.z-window-modal textarea,
.z-window-highlighted textarea,
.z-window-overlapped textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Advanced FindWindow: the content area, not the page behind it, owns the
   vertical scroll when the accounting fields exceed the dialog height. */
.z-window-modal:has(.z-listbox) .z-window-modal-cnt,
.z-window-highlighted:has(.z-listbox) .z-window-highlighted-cnt,
.z-window-overlapped:has(.z-listbox) .z-window-overlapped-cnt {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}
.z-window-modal:has(.z-listbox) .z-listbox,
.z-window-highlighted:has(.z-listbox) .z-listbox,
.z-window-overlapped:has(.z-listbox) .z-listbox {
    min-width: 0 !important;
    max-width: 100% !important;
}
.z-window-modal:has(.z-listbox) .z-listbox-body,
.z-window-highlighted:has(.z-listbox) .z-listbox-body,
.z-window-overlapped:has(.z-listbox) .z-listbox-body {
    max-height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}
/* AboutWindow's Errors listbox matches the generic dialog rule above.
   Its own Info and Errors panes own scrolling, not the outer window. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(img[src$="/AD10030HB.png"]) :is(.z-window-modal-cnt, .z-window-highlighted-cnt, .z-window-overlapped-cnt) {
    overflow: hidden !important;
}

/* top corners: the rounded head of the dialog */
.z-window-modal-tl, .z-window-highlighted-tl, .z-window-overlapped-tl,
.z-window-modal-tr, .z-window-highlighted-tr, .z-window-overlapped-tr {
    background: #FFFFFF !important;
    background-image: none !important;
    border-radius: 12px 12px 0 0 !important;
}

/* the header band */
/* Nothing here changes a height, a width or a padding: ZK positions the
   contents of a dialog with pixel offsets it computed from the original
   geometry, so moving the header by even a few pixels pushes the body out
   of the area it clips to and the dialog comes up blank. Only colour,
   type and the icons change. */
.z-window-modal-hl, .z-window-highlighted-hl, .z-window-overlapped-hl,
.z-window-modal-hr, .z-window-highlighted-hr, .z-window-overlapped-hr,
.z-window-modal-hm, .z-window-highlighted-hm, .z-window-overlapped-hm {
    background: #FFFFFF !important;
    background-image: none !important;
}

.z-window-modal-hm, .z-window-highlighted-hm, .z-window-overlapped-hm {
    border-bottom: 1px solid #EDF1F6 !important;
}

.z-window-modal-header, .z-window-highlighted-header, .z-window-overlapped-header {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
}

/* sides and body: the surface of the dialog, not a blue border */
.z-window-modal-cl, .z-window-highlighted-cl, .z-window-overlapped-cl,
.z-window-modal-cr, .z-window-highlighted-cr, .z-window-overlapped-cr,
.z-window-modal-cm, .z-window-highlighted-cm, .z-window-overlapped-cm,
.z-window-modal-cnt, .z-window-highlighted-cnt, .z-window-overlapped-cnt {
    background: #FFFFFF !important;
    background-image: none !important;
}


/* bottom corners close the card */
.z-window-modal-bl, .z-window-highlighted-bl, .z-window-overlapped-bl,
.z-window-modal-br, .z-window-highlighted-br, .z-window-overlapped-br,
.z-window-modal-bm, .z-window-highlighted-bm, .z-window-overlapped-bm {
    background: #FFFFFF !important;
    background-image: none !important;
    border-radius: 0 0 12px 12px !important;
}

/* ---------- the two controls in the header ---------- */
.z-window-modal-icon,
.z-window-highlighted-icon,
.z-window-overlapped-icon {
    background-image: url("/webui/images/dark/Info.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 17px 17px !important;
    border-radius: 4px !important;
    opacity: 1 !important;
    transition: background-color .12s ease !important;
}

.z-window-modal-close,
.z-window-highlighted-close,
.z-window-overlapped-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}

.z-window-modal-close:hover,
.z-window-highlighted-close:hover,
.z-window-overlapped-close:hover {
    background-color: #FEE2E2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.8' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}

.z-window-modal-max,
.z-window-highlighted-max,
.z-window-overlapped-max {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E") !important;
}

.z-window-modal-min,
.z-window-highlighted-min,
.z-window-overlapped-min {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important;
}

.z-window-modal-max:hover, .z-window-modal-min:hover,
.z-window-highlighted-max:hover, .z-window-highlighted-min:hover,
.z-window-overlapped-max:hover, .z-window-overlapped-min:hover {
    background-color: #EDF1F6 !important;
}

/* what sits behind a modal: a dim, not a grey sheet */
.z-modal-mask {
    background: rgba(15, 23, 42, .38) !important;
    opacity: 1 !important;
}

/* Role information is returned as one line per permission/context value.
   Keep the stock Messagebox contract, but give this dialog a readable data
   surface without changing other system messages. */
.z-window-modal:has(.role-info-dialog) .z-window-modal-cnt,
.z-window-highlighted:has(.role-info-dialog) .z-window-highlighted-cnt,
.z-window-overlapped:has(.role-info-dialog) .z-window-overlapped-cnt {
    background: #F8FAFC !important;
}

.role-info-dialog {
    box-sizing: border-box !important;
    min-width: 420px !important;
    padding: 8px 12px 4px !important;
    color: #334155 !important;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    white-space: normal !important;
}

.role-info-dialog br {
    display: block !important;
    content: '' !important;
    margin-bottom: 7px !important;
}

/* Colour on the dialog, without going back to the blue frame: a brand line
   across the top of the card and a tinted header band, so the head reads as
   the head and the surface below it stays calm. Geometry is untouched -
   only the paint. */
.z-window-modal-tl, .z-window-highlighted-tl, .z-window-overlapped-tl {
    background: linear-gradient(#008FD3 0 3px, #F2F8FC 3px) !important;
}

.z-window-modal-tr, .z-window-highlighted-tr, .z-window-overlapped-tr {
    background: linear-gradient(#008FD3 0 3px, #F2F8FC 3px) !important;
}

.z-window-modal-hl, .z-window-highlighted-hl, .z-window-overlapped-hl,
.z-window-modal-hr, .z-window-highlighted-hr, .z-window-overlapped-hr,
.z-window-modal-hm, .z-window-highlighted-hm, .z-window-overlapped-hm {
    background: #F2F8FC !important;
}

.z-window-modal-hm, .z-window-highlighted-hm, .z-window-overlapped-hm {
    border-bottom: 1px solid #D8E8F2 !important;
}

/* the title takes the brand ink, which is what makes the head feel owned */
.z-window-modal-header, .z-window-highlighted-header, .z-window-overlapped-header {
    color: #00567F !important;
    -webkit-text-fill-color: #00567F !important;
}

/* the controls sit on the tint, so they take its hover */
.z-window-modal-max:hover, .z-window-modal-min:hover,
.z-window-highlighted-max:hover, .z-window-highlighted-min:hover,
.z-window-overlapped-max:hover, .z-window-overlapped-min:hover {
    background-color: #DDECF6 !important;
}

/* The search action of a form - the one that runs the query - carries a
   Refresh16 icon, so the rule that turns an icon-only button into a small
   control beside a field caught it too and left it looking like a pale
   fitting rather than the action of the window. It is restated here, after
   that rule, as the primary action it is. */
span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *):not(.adwindow-toolbar *) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 34px !important;
    height: 30px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: #008FD3 !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
    cursor: pointer !important;
    transition: background-color .12s ease !important;
}

span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *):not(.adwindow-toolbar *):hover {
    background: #0079B3 !important;
    border-color: transparent !important;
}

span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *):not(.adwindow-toolbar *) img {
    filter: brightness(0) invert(1) !important;
    width: 15px !important;
    height: 15px !important;
}

span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *):not(.adwindow-toolbar *) td.z-button-cm,
span.z-button:has(img[src$="/Refresh16.png"]):not(.z-toolbar *):not(.adwindow-toolbar *) td.z-button-cm * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   SECONDARY BUTTONS, AND WHAT A DISABLED ONE LOOKS LIKE
   ADempiere marks a button that comes from a field with .form-button, and
   those are the blue ones. A button built by a ConfirmPanel - Simulate
   Match, OK, Cancel - carries no such class, so it takes the secondary
   treatment. That difference is the framework's, not an inconsistency in
   the styling, but on a white bar the secondary ones read as washed out
   rather than as buttons, and a disabled one looked no different from an
   available one - OK sits disabled here until a match is picked.
   ========================================================================== */
span.z-button[data-button-label="true"]:not(.form-button) {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
}

span.z-button[data-button-label="true"]:not(.form-button):hover {
    background: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}

span.z-button[data-button-label="true"]:not(.form-button) td.z-button-cm,
span.z-button[data-button-label="true"]:not(.form-button) td.z-button-cm * {
    font-weight: 600 !important;
}

/* an action that cannot be taken yet */
span.z-button[data-button-label="true"]:not(.form-button):has(button[disabled]),
span.z-button[data-button-label="true"]:not(.form-button):has(button[disabled]):hover {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    box-shadow: none !important;
    cursor: default !important;
}

span.z-button[data-button-label="true"]:not(.form-button):has(button[disabled]) td.z-button-cm,
span.z-button[data-button-label="true"]:not(.form-button):has(button[disabled]) td.z-button-cm * {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
}

/* ==========================================================================
   MANDATORY FIELDS
   A required field was marked with an asterisk in the same slate as the
   label beside it, so it disappeared into the text. Worse, ADempiere
   already tracks something more useful than "required": it writes
   color:red on the label of a field that is required, editable AND still
   empty - the ones actually blocking the save - and the blanket
   -webkit-text-fill-color on .z-label was painting over that signal.

   Two levels now. The asterisk says "this one is required". A field that
   is required and still empty carries the warning on the field itself, so
   you can scan a form and see what is missing without reading every label.
   ========================================================================== */

/* level one: required. The selector is doubled up because the decorator
   also carries .z-label, and the global label rule - two classes - was
   winning over a single-class selector and painting it slate. */
.field-label span.mandatory-decorator-text,
span.mandatory-decorator-text.z-label,
.mandatory-decorator-text {
    color: #D97706 !important;
    -webkit-text-fill-color: #D97706 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    vertical-align: 1px !important;
    margin-left: 3px !important;
}

/* level two: required and still empty - ADempiere's own colour:red mark */
.z-label[style*="color: red"],
.z-label[style*="color:red"] {
    color: #B42318 !important;
    -webkit-text-fill-color: #B42318 !important;
    font-weight: 600 !important;
}

.field-label:has(.z-label[style*="color: red"]) .mandatory-decorator-text,
.field-label:has(.z-label[style*="color:red"]) .mandatory-decorator-text {
    color: #B42318 !important;
    -webkit-text-fill-color: #B42318 !important;
}

/* the field beside that label: the cell right after the label's cell */
td:has(> .z-row-cnt > .field-label .z-label[style*="color: red"]) + td input:not([type="checkbox"]),
td:has(> .z-row-cnt > .field-label .z-label[style*="color:red"]) + td input:not([type="checkbox"]),
td:has(.field-label .z-label[style*="color: red"]) + td input:not([type="checkbox"]),
td:has(.field-label .z-label[style*="color:red"]) + td input:not([type="checkbox"]) {
    border-color: #F0B37E !important;
    background-color: #FFFBF5 !important;
    box-shadow: inset 2px 0 0 #E8912D !important;
}

td:has(.field-label .z-label[style*="color: red"]) + td input:not([type="checkbox"]):focus,
td:has(.field-label .z-label[style*="color:red"]) + td input:not([type="checkbox"]):focus {
    border-color: #008FD3 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 143, 211, .15) !important;
}

/* A tab used to run all the way to the edge of the strip, so a tab with a
   background - the one you are on, or one on the route - looked like it was
   sitting on top of the form rather than docked against it. It stops one
   pixel short, on the seam, and the first tab is no longer glued to the top
   edge. */
.adwindow-nav .adwindow-nav-content button {
    /* No width here: these are block buttons whose left margin carries the
       tab's depth, so they already fill the strip. Setting a width made the
       margin add to it and the tab ran past the seam. */
    margin-right: 2px !important;
    box-sizing: border-box !important;
}

/* the tab you are on docks into the seam and reads as the open one */
.adwindow-nav .adwindow-nav-content button[class*="navbtn-sel"] {
    margin-right: 0 !important;
    border-radius: 6px 0 0 6px !important;
}

/* ==========================================================================
   THE LOGO IN THE ABOUT DIALOG
   ThemeManager.getSmallLogo() hands the same file the header uses, and that
   artwork is drawn light - measured at an average #7EC6E8, luminance .73 -
   because the header it was made for is dark blue. On the white ground of
   the About dialog the wordmark all but disappeared.

   It is given the ground it was drawn for: a dark plate with the brand's
   own blue, so the mark reads as intended instead of being recoloured.
   ========================================================================== */
.z-window-modal img[src$="/AD10030HB.png"],
.z-window-highlighted img[src$="/AD10030HB.png"],
.z-window-overlapped img[src$="/AD10030HB.png"] {
    background: #003764 !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    box-sizing: content-box !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .12) !important;
}

/* the header mark: rendered from a 302x72 source, so it is held to that
   ratio and allowed to scale smoothly rather than being resampled twice */
.desktop-header-left img {
    image-rendering: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   SELECTING A MENU ENTRY
   The selected row was painted in two colours: the cell took our light blue
   while the icon and its image kept the stock theme's strong #1F9BDE, so
   the first 34px of the band came out darker than the rest. Measured on a
   selected favourite: cell rgb(228,236,247), icon rgb(31,155,222).

   The same is true of the spacers that carry the indentation: on a tab two
   levels in, two of them kept that blue and read as a loose block floating
   to the left of the entry.

   None of these pieces carries a ground of its own now, so the row is one
   band. The same applies on hover, where the stock theme tints them too.
   ========================================================================== */
.z-tree-row .z-tree-line,
.z-tree-row .z-tree-spacer,
.z-tree-row-seld .z-tree-line,
.z-tree-row-seld .z-tree-spacer,
.z-tree-row-over .z-tree-line,
.z-tree-row-over .z-tree-spacer,
.z-tree-row-over-seld .z-tree-line,
.z-tree-row-over-seld .z-tree-spacer,
.z-tree-row .z-tree-ico,
.z-tree-row .z-tree-ico img,
.z-tree-row .z-tree-cell img,
.z-tree-row-seld .z-tree-ico,
.z-tree-row-seld .z-tree-ico img,
.z-tree-row-seld .z-tree-cell img,
.z-tree-row-over .z-tree-ico,
.z-tree-row-over .z-tree-ico img,
.z-tree-row-over-seld .z-tree-ico,
.z-tree-row-over-seld .z-tree-ico img {
    background-color: transparent !important;
}

/* the band itself: one colour, and it stops short of the edge so it reads
   as a selected entry rather than a stripe running off the panel */
.z-west .z-tree-row-seld .z-tree-cell,
.z-portal-children .z-tree-row-seld .z-tree-cell {
    background: #DBEAFE !important;
    background-image: none !important;
    border-radius: 6px !important;
    box-shadow: inset 3px 0 0 #008FD3 !important;
}

.z-west .z-tree-row-over .z-tree-cell,
.z-portal-children .z-tree-row-over .z-tree-cell {
    background: #EFF5FB !important;
    background-image: none !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   EMBEDDED WINDOW HEADER (report and print views)
   A report opens in an embedded window, which is the same nine-piece frame
   as a dialog but a variant the dialog rules did not name - so it kept the
   stock #1F9BDE band across the top, with the caption in 16px black on it.
   It gets the same treatment: a quiet band, a readable title, a hairline
   under it. No height, width or padding is touched, because ZK positions
   the content of these windows from the original geometry.
   ========================================================================== */
.z-window-embedded-tl,
.z-window-embedded-tr,
.z-window-embedded-hl,
.z-window-embedded-hr,
.z-window-embedded-hm {
    background: #F2F8FC !important;
    background-image: none !important;
}

.z-window-embedded-hm {
    border-bottom: 1px solid #D8E8F2 !important;
}

.z-window-embedded-header,
.z-window-embedded-hm,
.z-window-embedded-hl,
.z-window-embedded-hr {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #00567F !important;
    -webkit-text-fill-color: #00567F !important;
}

/* the caption is a long technical string - user, role, tenant, host and
   schema - so it is kept to one line and cut rather than wrapped */
.z-window-embedded-hm {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.z-window-embedded-cl,
.z-window-embedded-cr,
.z-window-embedded-cm,
.z-window-embedded-cnt {
    background: #FFFFFF !important;
    background-image: none !important;
}

.z-window-embedded-icon {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 13px 13px !important;
    border-radius: 4px !important;
}

.z-window-embedded-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}

.z-window-embedded-close:hover {
    background-color: #FEE2E2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.8' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}

.z-window-embedded-max,
.z-window-embedded-min {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E") !important;
}

.z-window-embedded-max:hover,
.z-window-embedded-min:hover {
    background-color: #DDECF6 !important;
}

/* ==========================================================================
   THE MENU COLUMN AND ITS BRAND
   The menu is now the first region of the window, so it runs from the very
   top: the header no longer stretches over it. The mark stands at the head
   of that column, and the button beside it narrows the column to a rail,
   where only the square mark still fits.
   ========================================================================== */
.desktop-brand-area,
.desktop-brand-area .z-north-body {
    background: #003764 !important;
    background-image: none !important;
    border: 0 !important;
    overflow: visible !important;
}

.desktop-brand-area {
    border-bottom: 0 !important;
}

.desktop-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 10px 0 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.desktop-brand-mark {
    height: 30px !important;
    width: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
}

/* the button that hides the menu: positioned beside the search field with fluid micro-animation */
.desktop-menu-toggle {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 16px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFE3F5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    cursor: pointer !important;
    transition: background-color .12s ease !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
}

.desktop-menu-toggle:hover {
    background-color: rgba(255, 255, 255, .16) !important;
}

.desktop-menu-column {
    border-right: 1px solid #D7E3EC !important;
}

/* the header now starts where the windows start, so it no longer needs the
   cell that used to hold the mark */
.desktop-header-left {
    display: none !important;
}

/* --- corrections after measuring the corner in the browser ---------------
   The brand strip came out 56px tall against the header's 54, so the blue
   accent line broke at the seam; the two tones were identical, which read
   as one band across the top and undid the corner; and the rail showed
   plain white below the mark instead of the column's own ground.
   -------------------------------------------------------------------- */
/* a shade deeper than the header, so the eye reads a column and an arm
   rather than one strip painted across the whole top */
.desktop-brand-area {
    background: #002B4E !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .16) !important;
}

.desktop-brand {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

/*  30, not 32: the collapsed mark is 30 and the two have to agree, or the
    logo visibly shrinks on the way in - which is the whole point of keeping
    the same artwork on both sides of the toggle.  */
.desktop-brand .desktop-brand-mark {
    height: 30px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

.desktop-brand .desktop-brand-mark:hover {
    opacity: 0.9 !important;
}


/* --- the mark while the menu column is hidden ----------------------------
   Hiding the menu now hides the whole column, so the mark and the button
   that brings it back stand at the left of the header instead - side by
   side, since the header is wide and shallow, and at the same size the
   mark has beside the wordmark so nothing appears to grow or shrink.
   -------------------------------------------------------------------- */
.desktop-header-brand,
.desktop-header-brand .z-west-body {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    overflow: visible !important;
}

.desktop-brand-compact {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: visible !important;
}

/* icon.png is the first 72x72 of the wide logo, so at 30px the mark keeps
   exactly the size it has in the column */
.desktop-brand-compact .desktop-brand-mark {
    height: 30px !important;
    width: 30px !important;
    flex: 0 0 30px !important;
}

.desktop-menu-show {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFE3F5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* Keep the restore-sidebar chevron visible after ZK swaps the compact
   header region back in. The old theme left the toolbar button transparent
   with a low-contrast image, so it disappeared exactly on hover. */
.desktop-brand-compact .desktop-menu-show,
.desktop-header .z-toolbar-button.desktop-menu-show {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    box-sizing: border-box !important;
    flex: 0 0 28px !important;
    position: relative !important;
    background-color: #003764 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 16px 16px !important;
    border: 1px solid rgba(207,227,245,.45) !important;
    border-radius: 6px !important;
    z-index: 10001 !important;
}
.desktop-brand-compact .desktop-menu-show:hover,
.desktop-header .z-toolbar-button.desktop-menu-show:hover {
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #00567F !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* the compact block sits inside the header, whose toolbar buttons carry
   their own padding - it outranks the button's own size and stretched it
   to 44x36, which is why the mark and the arrow drifted */
.desktop-header .z-toolbar-button.desktop-menu-toggle {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
}

/* --- one soft divider down the left of the window ------------------------
   Three things were drawing that line at once: the column's own border, the
   inset highlight on the brand strip, and ZK's splitter in a pale blue. The
   border stays - ZK places the splitter from the column's outer width, so
   taking it away opens a gap - but the splitter is what paints the line,
   because it sits on top of the border and a transparent one lets the
   layout's own navy ground show between two light panels: a dark rule where
   a seam belongs. It warms on hover, being the handle the column is dragged
   by.
   -------------------------------------------------------------------- */
/*	Two elements sit at this edge and both were painting, which is why the
	divider read as two lines with a gap: the column's own right border, and
	ZK's splitter beside it. Neither can be taken away - ZK measures the
	layout from the column's outer width and places the splitter from it -
	so the border keeps its width and gives up its colour entirely, and the
	splitter alone draws the seam, flat, with no gradient to come apart at
	fractional zoom.

	The band across the top is covered rather than worked around. That takes
	two blocks, not one, because the column is stacked above the splitter
	(z-index 12 against 11) and paints over anything the splitter puts in
	the overlap - which is what defeated every earlier attempt to keep the
	seam clear of the band.	*/
.z-west.desktop-menu-column {
    background-color: #F7F9FC !important;
    /*	the tone of this line: #FFFFFF was the white one, #E8EEF5 a neutral
    	grey, #B9D2E8 a marked blue	*/
    border-right: 1px solid #E8EEF5 !important;
    border-image: none !important;
}

.z-west.desktop-menu-column::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 54px;
    background: #003764;
    pointer-events: none;
}

.desktop-menu-column + .z-west-splt {
    width: 1px !important;
    border: 0 !important;
    background: #E4EAF0 !important;
}

.desktop-menu-column + .z-west-splt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    background: #003764;
}

/*	it is still the handle the column is dragged by	*/
.desktop-menu-column + .z-west-splt:hover {
    background: #F1F5FA !important;
}

/* Header and brand must share the same top edge. Keep the splitter as a
   usable drag target, but replace the old bright separator with a compact
   grip so it reads as an intentional resize handle. */
/*  The height of the top band, in one place.

    It used to be stated five times over - 50, 50, 68, 55, 55 - every one of
    them !important, and only the last actually decided anything. Reading the
    file told you 68; the browser said 55. The losing copies are gone, so this
    is now the only place the band's height is set in CSS. Two others still
    have to agree with it: the Borderlayout region height in DefaultDesktop,
    which ZK needs in pixels, and the splitter in desktop-ui.js - and that one
    now measures the header rather than repeating the figure.  */
.desktop-header,
.desktop-header.z-border-layout,
.desktop-header-right,
.z-north:has(.desktop-header),
.z-north-body:has(.desktop-header) {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
}
.desktop-brand,
.desktop-brand-compact {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
}
.desktop-header {
    border-bottom: 0 !important;
}
.desktop-menu-column {
    border-right: 0 !important;
}
.desktop-menu-column::after,
.desktop-menu-column + .z-west-splt::before {
    display: none !important;
    content: none !important;
}
.desktop-menu-column + .z-west-splt {
    position: relative !important;
    width: 9px !important;
    min-width: 9px !important;
    max-width: 9px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: col-resize !important;
}
.desktop-menu-column + .z-west-splt::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background-color: rgba(100, 116, 139, .42);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='2' cy='3' r='1.1'/%3E%3Ccircle cx='6' cy='3' r='1.1'/%3E%3Ccircle cx='2' cy='9' r='1.1'/%3E%3Ccircle cx='6' cy='9' r='1.1'/%3E%3Ccircle cx='2' cy='15' r='1.1'/%3E%3Ccircle cx='6' cy='15' r='1.1'/%3E%3Ccircle cx='2' cy='21' r='1.1'/%3E%3Ccircle cx='6' cy='21' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: .72;
    pointer-events: none;
    transition: background-color .12s ease, opacity .12s ease;
}
.desktop-menu-column + .z-west-splt:hover::after,
.desktop-menu-column + .z-west-splt:focus::after {
    background-color: #008FD3;
    opacity: 1;
}


.desktop-brand-area {
    box-shadow: none !important;
}

/* --- the edge of the header ----------------------------------------------
   The accent was a 2px rule of full-strength cyan across the whole width,
   which read as a bar rather than an edge. It cannot simply be made 1px:
   ZK reserves the region at its original height and a bare strip opens
   underneath. So the border turns transparent and keeps its two pixels,
   and no line is drawn at all. A lighter accent read as thick however thin
   it was, caught between the navy above it and the near-white below; a
   darker one read as a black rule once the page was magnified. The change
   of colour from the band to the content is the edge, and it needs no help.
   -------------------------------------------------------------------- */
.desktop-header,
.desktop-header.z-border-layout {
    border-bottom: 2px solid transparent !important;
    background-color: #003764 !important;
    background-image: none !important;
}

.desktop-brand-area {
    border-bottom: 0 !important;
    background-color: #002B4E !important;
    background-image: none !important;
}

/* --- the menu tree keeps a thin scrollbar --------------------------------
   The tree scrolls in a native 15px scrollbar that lands right against the
   edge of the panel, so what reads as the divider is really that bar - a
   wide grey slab beside a one pixel seam. It gets the same thin treatment
   the window tab strip already has.
   -------------------------------------------------------------------- */
.desktop-menu-body .z-tree-body {
    scrollbar-width: thin !important;
    /*	The track cannot be left transparent: the tree body has no ground of
    	its own and the border layout's navy shows through it, which is the
    	black bar that turned up along the bottom of the menu.	*/
    background-color: #F7F9FC !important;
    scrollbar-color: #DFE6ED #F7F9FC !important;
}

.desktop-menu-body .z-tree-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #F7F9FC;
}

.desktop-menu-body .z-tree-body::-webkit-scrollbar-track,
.desktop-menu-body .z-tree-body::-webkit-scrollbar-corner {
    background: #F7F9FC;
}

.desktop-menu-body .z-tree-body::-webkit-scrollbar-thumb {
    background: #DFE6ED;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.desktop-menu-body .z-tree-body::-webkit-scrollbar-thumb:hover {
    background: #BCC8D6;
    background-clip: content-box;
}

/* ==========================================================================
   THE DARK LINES AT THE ROOT
   The stock theme paints every border layout, and every horizontal splitter
   in one, in the header's navy:

       .z-north-splt, .z-south-splt { background: #003764; height: 1px }
       .z-border-layout             { background: #003764 }

   So a panel split horizontally shows a black rule across it, and anywhere
   a child leaves a gap - a scrollbar track, a splitter, a body with no
   ground of its own - that navy shows through. Both are fixed here rather
   than patched one gap at a time: the layout takes whatever is behind it,
   and the splitters take the same soft seam as the one down the left.
   ========================================================================== */
.z-border-layout {
    background: transparent !important;
}

.z-north-splt,
.z-south-splt {
    background: #ECF0F5 !important;
}

/* the header keeps its own colour, being a layout as well */
.desktop-header.z-border-layout {
    background-color: #003764 !important;
}

/* ==========================================================================
   TWO GROUNDS INSTEAD OF ONE
   The menu column and the window area were all but the same near-white, so
   nothing but the seam told them apart and that one line had to carry the
   whole separation. The column takes plain white, the way a sidebar does,
   and the window area a quiet blue-grey, so the panels and cards standing
   on it read as raised. The seam then has far less to do.
   ========================================================================== */
.z-west.desktop-menu-column,
.desktop-menu-column .z-west-body,
.desktop-menu-column .z-tree-body,
.desktop-menu-column .z-toolbar,
.desktop-menu-column .z-toolbar-body,
.desktop-menu-column .z-panel,
.desktop-menu-column .z-panel-children {
    background-color: #FFFFFF !important;
}

.desktop-menu-column .z-tree-body {
    scrollbar-color: #DFE6ED #FFFFFF !important;
}

.desktop-menu-column .z-tree-body::-webkit-scrollbar,
.desktop-menu-column .z-tree-body::-webkit-scrollbar-track,
.desktop-menu-column .z-tree-body::-webkit-scrollbar-corner {
    background: #FFFFFF;
}

/*	Only the ground the windows stand on - forms and grids keep their own
	colour, so this does not tint the inside of every window.	*/
.desktop-tabpanel,
.desktop-tabpanel .z-tabpanel,
.desktop-tabpanel .z-tabpanels {
    background: #F1F5FA !important;
    background-color: #F1F5FA !important;
}

.desktop-menu-column + .z-west-splt {
    background: #E8EEF5 !important;
}

/* --- a date box with no button closes itself ----------------------------
   The input is styled as though a button were always welded to its right:
   square corners on that side and no border, because the button supplies
   the edge. The time half of a DatetimeBox is given setButtonVisible(false),
   so there is nothing there to close it and the box was left open on the
   right. Where ZK hid the button, the input gets its own edge back.
   -------------------------------------------------------------------- */
span.z-datebox:has(> .z-datebox-btn[style*="display:none"]) .z-datebox-inp,
span.z-datebox:has(> .z-datebox-btn[style*="display: none"]) .z-datebox-inp,
span.z-datebox:has(> .z-datebox-button[style*="display:none"]) .z-datebox-inp,
span.z-datebox:has(> .z-datebox-button[style*="display: none"]) .z-datebox-inp,
span.z-timebox:has(> .z-timebox-btn[style*="display:none"]) .z-timebox-inp,
span.z-timebox:has(> .z-timebox-btn[style*="display: none"]) .z-timebox-inp {
    border-right: 1px solid #CBD5E1 !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

span.z-datebox:has(> .z-datebox-btn[style*="display:none"]) .z-datebox-inp:focus,
span.z-datebox:has(> .z-datebox-btn[style*="display: none"]) .z-datebox-inp:focus,
span.z-datebox:has(> .z-datebox-button[style*="display:none"]) .z-datebox-inp:focus,
span.z-datebox:has(> .z-datebox-button[style*="display: none"]) .z-datebox-inp:focus {
    border-right-color: #008FD3 !important;
}

/* --- a number editor opened in a grid cell ------------------------------
   The renderer asks for a fixed 100px (WListItemRenderer, and the browse
   renderer beside it), but the content box of a cell is narrower than the
   column - 84px against 100 here - and it clips, so the last stretch of the
   editor was cut off: first the value, and once the field was sized
   properly, the calculator button. A fixed width cannot be right anyway,
   since the column can be dragged to any size. In a cell the editor takes
   the cell, and the field takes what the button leaves.
   -------------------------------------------------------------------- */
.z-list-cell-cnt > div:has(> table) {
    width: 100% !important;
}

.z-list-cell-cnt > div > table {
    width: 100% !important;
}

.z-list-cell-cnt input.z-decimalbox:not([style*="opacity:0"]),
.z-list-cell-cnt input.z-intbox:not([style*="opacity:0"]) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* --- one scrollbar at the foot of a list, and the useful one -------------
   The grid and its body were both scrolling. The body is the one with
   something to scroll - 3166px of columns across 1492 of panel - but it
   was 17px wider and 12px taller than the grid that holds it, so its
   scrollbar fell outside the frame and what stayed in view was the grid's
   own, with 17px of travel: a thumb that filled the track and moved
   nothing, which is why the columns beyond the fold could not be reached.
   The same held the other way round: 28px of vertical travel on the grid
   beside 2417 on the body, so a list showed two scrollbars down its right
   edge and only the inner one moved anything.

   The body is kept inside the grid and is the only thing that scrolls.

   It has to be given the room rather than told a size: ZK writes the
   body's height inline, worked out against the heading row as it stands
   before this theme, so with a taller heading the body came out 12px
   longer than the space left for it and its scrollbar was cut off by the
   frame. The grid shares its height out instead - heading takes what it
   needs, body takes the rest - and the numbers stop mattering.
   -------------------------------------------------------------------- */
.z-grid[data-grid-data="true"] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.z-grid[data-grid-data="true"] > .z-grid-header {
    flex: 0 0 auto !important;
}

.z-grid[data-grid-data="true"] > .z-grid-body {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* --- the row you are standing on ----------------------------------------
   ADempiere already marks it: GridTabRowRenderer writes
   "border-top: 2px solid #1f9bde; border-bottom: 2px solid #1f9bde" inline
   on every cell of the current row. Two hairlines are easy to lose on a
   pale table, so the same signal is read back and given a ground and a
   marker down the left. Nothing new is invented - if the core stops
   marking the row, this stops with it.
   -------------------------------------------------------------------- */
.z-grid[data-grid-data="true"] .z-rows td[style*="#1f9bde"],
.z-grid[data-grid-data="true"] .z-rows td[style*="#1F9BDE"] {
    background-color: #EAF4FC !important;
}

.z-grid[data-grid-data="true"] .z-rows td[style*="#1f9bde"]:first-child,
.z-grid[data-grid-data="true"] .z-rows td[style*="#1F9BDE"]:first-child {
    box-shadow: inset 3px 0 0 #008FD3 !important;
}

/* the cell content sits on its own ground, which would cover the tint */
.z-grid[data-grid-data="true"] .z-rows td[style*="#1f9bde"] > .z-row-cnt,
.z-grid[data-grid-data="true"] .z-rows td[style*="#1F9BDE"] > .z-row-cnt {
    background-color: transparent !important;
}

/* Final header geometry override: keep the menu brand and application band
   on one baseline, remove the pale splitter line, and leave only the grip
   as the visual affordance for horizontal drag resizing. */
.desktop-header,
.desktop-header.z-border-layout,
.desktop-header-right,
.z-north:has(.desktop-header),
.z-north-body:has(.desktop-header),
.desktop-brand,
.desktop-brand-compact {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
}
.desktop-header,
.desktop-header.z-border-layout,
.desktop-menu-column,
.desktop-menu-column + .z-west-splt {
    border-bottom: 0 !important;
    border-right: 0 !important;
    background-image: none !important;
}
.desktop-header {
    position: relative !important;
    z-index: 10000 !important;
}
.desktop-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -3px !important;
    width: 3px !important;
    height: 55px !important;
    background: #003764 !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 10001 !important;
}
.desktop-brand-area {
    position: relative !important;
    z-index: 10002 !important;
    overflow: visible !important;
}

.desktop-menu-column + .z-west-splt {
    position: absolute !important;
    top: 55px !important;
    height: calc(100% - 55px) !important;
    width: 3px !important;
    min-width: 3px !important;
    max-width: 3px !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    cursor: col-resize !important;
}
.desktop-menu-column::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: -3px !important;
    width: 3px !important;
    height: 55px !important;
    background: #002B4E !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 10001 !important;
}
.desktop-menu-column::after,
.desktop-menu-column + .z-west-splt::before {
    display: none !important;
    content: none !important;
}
.desktop-menu-column + .z-west-splt::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 12px !important;
    height: 28px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='%2394A3B8'%3E%3Ccircle cx='2' cy='3' r='1'/%3E%3Ccircle cx='6' cy='3' r='1'/%3E%3Ccircle cx='2' cy='9' r='1'/%3E%3Ccircle cx='6' cy='9' r='1'/%3E%3Ccircle cx='2' cy='15' r='1'/%3E%3Ccircle cx='6' cy='15' r='1'/%3E%3Ccircle cx='2' cy='21' r='1'/%3E%3Ccircle cx='6' cy='21' r='1'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: .72 !important;
    pointer-events: none !important;
}
.desktop-menu-column + .z-west-splt:hover::after,
.desktop-menu-column + .z-west-splt:focus::after {
    width: 14px !important;
    height: 32px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='%23008FD3'%3E%3Ccircle cx='2' cy='3' r='1.45'/%3E%3Ccircle cx='6' cy='3' r='1.45'/%3E%3Ccircle cx='2' cy='9' r='1.45'/%3E%3Ccircle cx='6' cy='9' r='1.45'/%3E%3Ccircle cx='2' cy='15' r='1.45'/%3E%3Ccircle cx='6' cy='15' r='1.45'/%3E%3Ccircle cx='2' cy='21' r='1.45'/%3E%3Ccircle cx='6' cy='21' r='1.45'/%3E%3C/g%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}

/* ZK puts the west splitter beside the west region inside its LayoutRegion
   wrapper. Keep its hit area and grip below the blue header band. */
.desktop-shell-layout > div > .z-west-splt,
.desktop-shell-layout > div > .z-west-splt:hover,
.desktop-shell-layout > div > .z-west-splt:active,
.desktop-shell-layout > div > .z-west-splt:focus {
    position: absolute !important;
    /* Keep the drag handle above the desktop, but below ZK's modal mask
       and windows. The old near-maximum z-index drew through dialogs. */
    z-index: 11 !important;
    top: 55px !important;
    height: calc(100% - 55px) !important;
    width: 9px !important;
    min-width: 9px !important;
    max-width: 9px !important;
    border: 0 !important;
    /* Blend the 9px drag target into the content; the west border remains
       the only visible 1px seam. Keep every pointer state identical. */
    background: #F1F5FA !important;
    background-color: #F1F5FA !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    cursor: col-resize !important;
}
.desktop-shell-layout > div > .z-west-splt::before {
    content: none !important;
    display: none !important;
}
.desktop-shell-layout > div > .z-west-splt.erpya-menu-splitter-obscured {
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Preserve the 9px gutter during a modal. Removing the absolute splitter
   exposed a bright full-height gap in the shell. Put its paint below the
   modal mask instead and hide only the grip. */
body.erpya-floating-window-open .desktop-menu-column + .z-west-splt,
body.erpya-floating-window-open .desktop-shell-layout > div > .z-west-splt {
    z-index: 0 !important;
    background: #F7F9FC !important;
    visibility: visible !important;
    pointer-events: none !important;
}
body.erpya-floating-window-open .desktop-menu-column + .z-west-splt::after,
body.erpya-floating-window-open .desktop-shell-layout > div > .z-west-splt::after {
    display: none !important;
    content: none !important;
}
body.erpya-floating-window-open .desktop-shell-layout > div > .z-west-splt.erpya-menu-splitter-obscured {
    visibility: hidden !important;
}
/* The west border is a second, separate stripe beside the splitter. Its
   stacking context can sit above a dialog even after the splitter is hidden. */
body.erpya-floating-window-open .z-west.desktop-menu-column {
    border-right-color: transparent !important;
}
.desktop-shell-layout > div > .z-west-splt::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 12px !important;
    height: 28px !important;
    transform: translate(-50%, -50%) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='%2394A3B8'%3E%3Ccircle cx='2' cy='3' r='1'/%3E%3Ccircle cx='6' cy='3' r='1'/%3E%3Ccircle cx='2' cy='9' r='1'/%3E%3Ccircle cx='6' cy='9' r='1'/%3E%3Ccircle cx='2' cy='15' r='1'/%3E%3Ccircle cx='6' cy='15' r='1'/%3E%3Ccircle cx='2' cy='21' r='1'/%3E%3Ccircle cx='6' cy='21' r='1'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: .72 !important;
    pointer-events: none !important;
}
.desktop-shell-layout > div > .z-west-splt:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='%23008FD3'%3E%3Ccircle cx='2' cy='3' r='1.45'/%3E%3Ccircle cx='6' cy='3' r='1.45'/%3E%3Ccircle cx='2' cy='9' r='1.45'/%3E%3Ccircle cx='6' cy='9' r='1.45'/%3E%3Ccircle cx='2' cy='15' r='1.45'/%3E%3Ccircle cx='6' cy='15' r='1.45'/%3E%3Ccircle cx='2' cy='21' r='1.45'/%3E%3Ccircle cx='6' cy='21' r='1.45'/%3E%3C/g%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}
.erpya-menu-splitter {
    background: #F1F5FA !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.erpya-menu-splitter::before {
    content: none !important;
    display: none !important;
}
.erpya-menu-splitter::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 12px !important;
    height: 28px !important;
    transform: translate(-50%, -50%) !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='%2394A3B8'%3E%3Ccircle cx='2' cy='3' r='1'/%3E%3Ccircle cx='6' cy='3' r='1'/%3E%3Ccircle cx='2' cy='9' r='1'/%3E%3Ccircle cx='6' cy='9' r='1'/%3E%3Ccircle cx='2' cy='15' r='1'/%3E%3Ccircle cx='6' cy='15' r='1'/%3E%3Ccircle cx='2' cy='21' r='1'/%3E%3Ccircle cx='6' cy='21' r='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center !important;
    opacity: .72 !important;
    pointer-events: none !important;
}
.erpya-menu-splitter:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='%23008FD3'%3E%3Ccircle cx='2' cy='3' r='1.45'/%3E%3Ccircle cx='6' cy='3' r='1.45'/%3E%3Ccircle cx='2' cy='9' r='1.45'/%3E%3Ccircle cx='6' cy='9' r='1.45'/%3E%3Ccircle cx='2' cy='15' r='1.45'/%3E%3Ccircle cx='6' cy='15' r='1.45'/%3E%3Ccircle cx='2' cy='21' r='1.45'/%3E%3Ccircle cx='6' cy='21' r='1.45'/%3E%3C/g%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}

/* Optional deployment environment label, kept beside the identity block. */
.desktop-environment-badge {
    position: relative !important;
    z-index: 10004 !important;
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 180px !important;
    margin-right: 8px !important;
    padding: 5px 11px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(210, 235, 250, .32) !important;
    border-radius: 999px !important;
    background: rgba(7, 46, 76, .62) !important;
    color: #eef8ff !important;
    font: 600 11px/1.2 'Segoe UI', Roboto, Arial, sans-serif !important;
    letter-spacing: .045em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}
.desktop-environment-badge::before {
    content: '' !important;
    display: inline-block !important;
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23DDF3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 11 3.83A2 2 0 0 0 9.59 3H4v5.59A2 2 0 0 0 4.59 10l9.58 9.59a2 2 0 0 0 2.83 0l3.59-3.59a2 2 0 0 0 0-2.59Z'/%3E%3Ccircle cx='7.5' cy='6.5' r='.75'/%3E%3C/svg%3E") no-repeat center/15px 15px !important;
}
.desktop-environment-badge-label {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    text-overflow: ellipsis !important;
}
/* The generic header rule adds a person glyph to every ZK label. This label
   already has the tag icon supplied by the badge itself. */
.desktop-header .desktop-environment-badge-label::before {
    content: none !important;
    display: none !important;
}

/* Paint the header seam as a background, never as an overlay above dialogs.
   Scope to the desktop shell so login and other border layouts are unchanged. */
.desktop-shell-layout.z-border-layout {
    /*  56, not 55, and the extra pixel is deliberate.

        The band ends where the panels below begin, both at 55. At a zoom that
        is not a whole number they do not round together: at 110% that edge is
        60.5 device pixels, the gradient takes it one way and the panels the
        other, and row 60 is left half navy and half panel - the hairline that
        shows under the band at 110% and not at 100%.

        Running the navy a pixel past the join removes the contest: whatever
        way the panels round, they paint over it. The extra pixel is never
        seen, because everything below the band - the search bar, the splitter
        and the tab strip - covers that row.  */
    background: linear-gradient(to bottom, #003764 0, #003764 56px,
        #F1F5FA 56px, #F1F5FA 100%) !important;
}
.desktop-shell-layout .desktop-header::before,
.desktop-shell-layout .desktop-brand-area::after,
.desktop-shell-layout .desktop-menu-column::before {
    content: none !important;
    display: none !important;
}
.desktop-shell-layout .z-west.desktop-menu-column {
    border-right: 0 !important;
}
/* Header containers must not outrank ZK floating windows. The user dropdown
   retains its own stacking order without elevating the entire blue band. */
.desktop-shell-layout .desktop-header,
.desktop-shell-layout .desktop-brand-area,
.desktop-shell-layout .desktop-header-right,
.desktop-shell-layout .desktop-header-right .z-center-body,
.desktop-shell-layout .z-north:has(.desktop-header),
.desktop-shell-layout .z-north-body:has(.desktop-header) {
    z-index: auto !important;
}
.desktop-shell-layout .desktop-brand-area,
.desktop-shell-layout .desktop-brand-area > .z-north-body,
.desktop-shell-layout .z-north:has(.desktop-header),
.desktop-shell-layout .z-north-body:has(.desktop-header),
.desktop-shell-layout .desktop-header {
    box-sizing: border-box !important;
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
    border: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #003764 !important;
}

/* Scale reading form: keep the live value and scale selectors in one compact,
   deliberate panel instead of leaving the unused center region as a void. */
.weight-scale-form {
    width: min(600px, calc(100vw - 24px)) !important;
    min-width: min(420px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: 210px !important;
    max-height: calc(100vh - 24px) !important;
    margin: 12px auto !important;
    border: 1px solid #D8E2EE !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12) !important;
}
.weight-scale-form .weight-scale-layout {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background: #F7F9FC !important;
}
.weight-scale-form .weight-scale-display-region,
.weight-scale-form .weight-scale-actions-region {
    border: 0 !important;
    background: transparent !important;
}
.weight-scale-form .weight-scale-display-panel {
    height: 100% !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    border: 1px solid #DFE7F0 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.weight-scale-form .weight-scale-display-panel > .z-panel-body {
    height: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: transparent !important;
}
.weight-scale-form .weight-scale-display-grid,
.weight-scale-form .weight-scale-display-grid > .z-grid-body {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
}
.weight-scale-form .weight-scale-display-grid > .z-grid-body > table {
    width: 100% !important;
    height: 100% !important;
    table-layout: fixed !important;
}
.weight-scale-form .weight-scale-display-grid .z-row,
.weight-scale-form .weight-scale-display-grid .z-row-inner,
.weight-scale-form .weight-scale-display-grid .z-row-cnt {
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
}
.weight-scale-form .weight-scale-display-grid .z-row-inner:first-child {
    width: 90px !important;
}
.weight-scale-form .weight-scale-label {
    color: #52647A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-align: left !important;
    text-transform: uppercase !important;
}
.weight-scale-value.weight-scale-value.z-textbox.z-textbox-readonly {
    width: 100% !important;
    height: 88px !important;
    padding: 4px 20px !important;
    box-sizing: border-box !important;
    border: 1px solid #B8D2E5 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #F8FCFF 0%, #EDF6FC 100%) !important;
    color: #0F5878 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 64px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: .025em !important;
    text-align: right !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .9) !important;
    box-shadow: inset 0 2px 5px rgba(15, 55, 85, .07), 0 1px 2px rgba(255, 255, 255, .85) !important;
}
.weight-scale-form .weight-scale-actions {
    width: 100% !important;
    padding: 4px 2px 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}
.weight-scale-actions span.z-button:has(> table.weight-scale-source-button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 116px !important;
    height: 36px !important;
    margin-right: 8px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    border: 1px solid #BCD0E3 !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    color: #174A70 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .1s ease !important;
}
.weight-scale-actions table.weight-scale-source-button {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #174A70 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    clip-path: none !important;
}
.weight-scale-actions span.z-button:has(> table.weight-scale-source-button):hover {
    border-color: #1688C7 !important;
    background: #EFF8FD !important;
    color: #075985 !important;
    box-shadow: 0 2px 5px rgba(14, 116, 171, .16) !important;
}
.weight-scale-actions span.z-button:has(> table.weight-scale-source-selected),
.weight-scale-actions span.z-button:has(> table.weight-scale-source-selected):hover {
    border-color: #1688C7 !important;
    background: #DFF2FC !important;
    color: #075985 !important;
    box-shadow: inset 0 0 0 1px rgba(22, 136, 199, .24), 0 2px 5px rgba(14, 116, 171, .14) !important;
}
.weight-scale-actions span.z-button:has(> table.weight-scale-source-button):active {
    background: #E0F2FE !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12) !important;
    transform: translateY(1px) !important;
}
.weight-scale-form .weight-scale-actions div:has(> span.z-button > table.action-button) > span.z-button:has(> table.action-button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin-left: 5px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .1s ease !important;
}
.weight-scale-form .weight-scale-actions div:has(> span.z-button > table.action-button) > span.z-button:has(> table.action-button) > table.action-button,
.weight-scale-form .weight-scale-actions div:has(> span.z-button > table.action-button) > span.z-button:has(> table.action-button):hover > table.action-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.weight-scale-form .weight-scale-actions div:has(> span.z-button > table.action-button) > span.z-button:has(> table.action-button):hover {
    border-color: #C9DDED !important;
    background: #EAF5FC !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .12) !important;
}
.weight-scale-form .weight-scale-actions div:has(> span.z-button > table.action-button) > span.z-button:has(> table.action-button):active {
    background: #DCEFFA !important;
    transform: scale(.96) !important;
}
@media (max-width: 520px) {
    .weight-scale-form {
        min-width: 0 !important;
    }
    .weight-scale-form .weight-scale-display-panel {
        padding: 8px !important;
    }
    .weight-scale-form .weight-scale-display-grid .z-row-inner:first-child {
        width: 64px !important;
    }
    .weight-scale-value.weight-scale-value.z-textbox.z-textbox-readonly {
        height: 68px !important;
        font-size: 40px !important;
    }
/* Document action prompt (Complete / Prepare / Void): keep the action and its
   explanation aligned, and anchor its confirmation controls to the right.
   The selected action varies by document, so identify the prompt by its
   400px grid and native action listbox, not by an option value. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) .z-grid[style*="width:400px"] {
    width: min(400px, calc(100vw - 48px)) !important;
    margin: 0 auto !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) .z-grid[style*="width:400px"] .z-rows > tr:first-child .z-row-cnt > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) .z-grid[style*="width:400px"] .z-rows > tr:first-child .z-label {
    white-space: nowrap !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) .z-grid[style*="width:400px"] select.z-listbox {
    flex: 0 0 150px !important;
    width: 150px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    border: 1px solid #C7D6E5 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #173B5A !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) .z-grid[style*="width:400px"] .z-rows > tr:nth-child(2) .z-row-inner {
    padding: 8px 10px !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) .z-grid[style*="width:400px"] .z-rows > tr:nth-child(2) .z-label {
    display: block !important;
    color: #64748B !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) div:has(> span.z-button[id^="Cancel"]):has(> span.z-button[id^="Ok"]) {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 100% !important;
    gap: 8px !important;
    padding: 4px 10px 2px !important;
    box-sizing: border-box !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) table.z-hbox:has(> tbody > tr > td > table.z-hbox span[id^="Cancel"]) {
    width: 100% !important;
    table-layout: fixed !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) table.z-hbox:has(> tbody > tr > td > table.z-hbox span[id^="Cancel"]) > tbody > tr > td:first-child,
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) table.z-hbox:has(> tbody > tr > td > table.z-hbox span[id^="Cancel"]) > tbody > tr > td:nth-child(3),
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(
    .z-grid[style*="width:400px"] select.z-listbox
) table.z-hbox:has(> tbody > tr > td > table.z-hbox span[id^="Cancel"]) > tbody > tr > td.z-hbox-sep {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Invoice payment dialog (including "A crédito"): keep the declared dialog
   width and align each payment method's label and editor in stable columns. */
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) {
    min-width: 0 !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-center,
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-center-body,
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-grid,
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-grid-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-grid-body > table {
    width: 100% !important;
    table-layout: fixed !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-grid-body > table > tbody.z-rows > tr > td:first-child {
    width: 38% !important;
    box-sizing: border-box !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-grid-body > table > tbody.z-rows > tr > td:nth-child(2) {
    width: 62% !important;
    box-sizing: border-box !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-grid-body > table > tbody.z-rows > tr > td:has(> .z-row-cnt > span.z-separator-ver) {
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}
:is(.z-window-modal, .z-window-highlighted, .z-window-overlapped):has(.z-decimalbox):has(.z-popup):has(select.z-listbox) .z-row-cnt > div[style*="text-align: right"] {
    width: 100% !important;
    box-sizing: border-box !important;
}