/* ============================================================================
   theme-modern.css  —  Modern UI/UX refresh (CSS-only override layer)
   ----------------------------------------------------------------------------
   Loaded LAST in the ~/sitemaster/css bundle so it wins the cascade over
   Site.css / erp.css / jQuery-UI without any markup changes.
   Scope (MVP first cut): design tokens, typography, buttons, form controls
   and the shared data-entry utility classes. Brand cyan preserved.
   To revert: remove the include from BundleConfig (~/sitemaster/css).
   NOTE: only cosmetic properties are touched on the float-based form cells
   (.grayleftro/.whiteleftro/.detailedViewTextBox) — never width/float/height.
   ============================================================================ */

:root {
    /* ===== BRAND scale (cyan kept; --brand/-dark/-light/-accent preserved) ===== */
    --brand-50:  #e6f7ff;
    --brand-100: #c2ebff;
    --brand-200: #8fdcff;
    --brand-300: #57c9ff;
    --brand-400: #1fc2ff;
    --brand-500: #00aeff;
    --brand-600: #0095db;
    --brand-700: #007bb5;
    --brand:        #00aeff;
    --brand-dark:   #0095db;
    --brand-light:  #e6f7ff;
    --accent:       #1fc2ff;

    /* ===== semantic + tints ===== */
    --danger:  #e02424;  --danger-bg:  #fdecec;
    --success: #00aa5a;  --success-bg: #e6f7ee;
    --warn:    #d69e2e;  --warn-bg:    #fdf6e3;
    --info:    #8b5cf6;  --info-bg:    #f1ecfe;   /* violet accent (added Phase 6 - dashboard KPI) */

    /* ===== neutral scale ===== */
    --gray-50:  #f7f9fb;
    --gray-100: #eef1f5;
    --gray-200: #e7eaef;
    --gray-300: #d9dee3;
    --gray-400: #aab2bd;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #344054;
    --gray-800: #2d3748;
    --gray-900: #1a2230;

    /* ===== surfaces / lines / text (canonical; legacy aliases kept below) ===== */
    --app-bg:     #eef1f6;
    --surface:    #ffffff;
    --surface-2:  #f7f9fb;   /* raised / subtle panel */
    --hdr:        #f3f5f9;
    --hdr-text:   #3a4250;
    --line:       #e7eaef;
    --line-soft:  #eef1f5;
    --text:       #2d3748;   /* darker than legacy #696969 for readability */
    --text-muted: #6b7280;
    --text-faint: #98a2b3;

    /* legacy aliases — kept at their original values; prefer the names above */
    --bg:          #ffffff;
    --bg-subtle:   #f7f9fb;
    --border:      #d9dee3;
    --border-soft: #e6e9ee;

    /* ===== type scale (base stays body's legacy 0.72em — do NOT reapply to body) ===== */
    --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
    --lh-tight: 1.25; --lh: 1.5;

    /* ===== spacing scale ===== */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;

    /* ===== shape (--radius/-sm preserved) ===== */
    --radius-sm: 4px; --radius: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;

    /* ===== elevation (--shadow-sm/--shadow preserved; xs/md/lg added) ===== */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow:    0 4px 12px rgba(16, 24, 40, .10);
    --shadow-md: 0 8px 20px rgba(16, 24, 40, .12);
    --shadow-lg: 0 18px 40px rgba(16, 24, 40, .16);

    /* ===== motion + focus ===== */
    --t-fast: .1s ease; --t-base: .18s ease; --t-slow: .3s ease;
    --focus-ring: 0 0 0 3px rgba(0, 174, 255, .30);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Code", Consolas, "SF Mono", "Roboto Mono", monospace;
}

/* ===========================================================================
   DARK THEME TOKENS — override the design tokens ONCE so every component built
   on var(--surface)/--line/--text/etc. adapts automatically (kills the "light
   leak" on pages without an explicit dark rule). The per-component
   body.theme-dark rules further below still win where they set literals; both
   resolve to the same palette. --brand-dark is intentionally NOT flipped (it is
   used as a fill in btnPrimary:hover / .trtot / avatar gradients).
   =========================================================================== */
body.theme-dark {
    --app-bg:     #0f141a;
    --surface:    #161c24;
    --surface-2:  #1e2630;
    --hdr:        #1a212b;
    --hdr-text:   #c7ced8;
    --line:       #2a323d;
    --line-soft:  #232b35;
    --text:       #e8edf3;
    --text-muted: #8b95a3;
    --text-faint: #6b7280;
    --info:        #a78bfa;   /* violet accent in dark (Phase 6) */
    --bg:          #161c24;
    --bg-subtle:   #1a212b;
    --border:      #2a323d;
    --border-soft: #232b35;
    --brand-light: #123347;   /* solid cyan-tinted highlight — no show-through */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .55);
    --shadow:    0 4px 14px rgba(0, 0, 0, .5);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, .55);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------------------
   Phase 1 — base & typography
   --------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: 0.72em;            /* nudged up from .65em (~+10%) for readability */
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* apply the modern stack to the spots that re-declare Arial explicitly */
body, input, select, textarea, button, table, th, td,
h1, h2, h3, h4, h5, h6,
.detailedViewHeader, .detailedViewHeader_rgt, .detailedViewTextBox {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 { color: var(--text); }

a { color: var(--brand-dark); }
a:hover { color: var(--brand); }

::placeholder { color: var(--text-muted); opacity: 1; }

/* ---------------------------------------------------------------------------
   Phase 2 — buttons
   --------------------------------------------------------------------------- */
.loginbutton {
    background-color: var(--brand) !important;
    border: 1px solid var(--brand) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
    height: auto !important;
    padding: 8px 18px !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.loginbutton:hover {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}

/* jQuery-UI buttons: dialog OK/Cancel, jqGrid nav, etc. */
.ui-button,
.ui-widget-content .ui-button,
.ui-widget-header .ui-button {
    border-radius: var(--radius-sm);
    transition: background-color .15s ease, border-color .15s ease;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    color: var(--text);
}

.ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-content .ui-state-focus {
    border: 1px solid var(--brand);
    background: var(--brand-light);
    color: var(--brand-dark);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-button:active {
    background: var(--brand) !important;
    border: 1px solid var(--brand) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Phase 2 — form controls
   (width/float/height are intentionally NOT touched; box-sizing keeps the
    existing % widths from overflowing once padding/border are added)
   --------------------------------------------------------------------------- */
input[type="text"],
input[type="url"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    /* match the grid: browsers DON'T inherit font-size into form controls, so plain inputs
       were rendering at the UA default (~13px) - bigger than grid cells. 1.1em over the
       body base resolves to the same px as jqGrid's .ui-widget { font-size: 1.1em }. */
    font-size: 1.1em;
    color: var(--text);
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.detailedViewTextBox:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    outline: none;
}

input[type="text"][readonly='readonly'],
textarea[readonly='readonly'],
input[readonly] {
    background-color: var(--bg-subtle);
    color: var(--text-muted);
}

/* shared data-entry input class (keeps its width:90% from erp.css) */
.detailedViewTextBox {
    /*border: 1px solid var(--border) !important;*/
    border-radius: var(--radius-sm) !important;
    padding: 3px 8px !important;
    font-size: 1.1em;   /* align with grid; NON-important so the .ui-widget input{1em} guard still caps it inside tabs (avoids em compounding) */
    color: var(--text) !important;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   select2 searchable dropdown -- align with the modern input styling above.
   This app bundles select2 v3.4.x (DOM: .select2-choice / .select2-chosen /
   .select2-arrow / .select2-drop), NOT v4 -- target the v3 classes or nothing
   matches. theme-modern.css loads AFTER select2.css in ~/sitemaster/css, so
   these win by source order. Token-driven => auto light/dark.
   --------------------------------------------------------------------------- */
.select2-container { box-sizing: border-box; vertical-align: middle; }

/* select2 hides the real <select> off-screen (.select2-offscreen). It keeps its
   .detailedViewTextBox class, whose `border:1px !important` loads after select2.css and
   would re-show a stray border around the select2 box -- force it back off so only the
   styled .select2-choice border shows. */
select.select2-offscreen,
select.select2-offscreen.detailedViewTextBox { border: 0 !important; padding: 0 !important; }

/* the closed control -- flatten to match modern inputs (drop gradient/rounding) */
.select2-container .select2-choice {
    height: 28px;
    line-height: 26px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface);
    background-image: none;
    filter: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container .select2-choice > .select2-chosen { color: var(--text); }

/* the arrow: kill the v3 border-left divider + gray gradient (the "extra border") */
.select2-container .select2-choice .select2-arrow {
    border-left: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    filter: none;
}

/* focus / open -- brand ring like the inputs (overrides v3 #5897fb) */
.select2-container-active .select2-choice,
.select2-dropdown-open .select2-choice {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    outline: none;
}
.select2-dropdown-open .select2-choice {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--surface);
    background-image: none;
}

/* dropdown panel */
.select2-drop {
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
}
.select2-drop.select2-drop-above {
    border-top: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.select2-drop-active { border-color: var(--brand); }

/* search box inside the dropdown -- flat, no sprite magnifier */
.select2-search input {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}
.select2-search input:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }

/* results list */
.select2-results .select2-result-label { color: var(--text); }
.select2-results .select2-highlighted,
.select2-results .select2-highlighted .select2-result-label { background: var(--brand); color: #fff; }

/* dark mode -- match the inputs' dark surface */
body.theme-dark .select2-container .select2-choice { background: #0f141a; border-color: #2a323d; color: #e8edf3; }
body.theme-dark .select2-container .select2-choice > .select2-chosen { color: #e8edf3; }
body.theme-dark .select2-drop { background: #161c24; border-color: #2a323d; color: #e8edf3; }
body.theme-dark .select2-search input { background: #0f141a; border-color: #2a323d; color: #e8edf3; }
body.theme-dark .select2-results .select2-result-label { color: #e8edf3; }
body.theme-dark .select2-results .select2-highlighted,
body.theme-dark .select2-results .select2-highlighted .select2-result-label { background: var(--brand); color: #fff; }

/* required-field marker */
.mandatorystar {
    color: var(--danger);
    font-family: var(--font-sans);
    font-weight: 700;
}

/* section header bar on data-entry forms (kept in the brand-blue family).
   .header is the older legacy section-header class (e.g. the Billing/Shipping address bars);
   harmonize it with .detailedViewHeader so a page's section headers match (layout stays from erp.css). */
.detailedViewHeader,
.detailedViewHeader_rgt,
.detailedViewHeaders,
.header {
    border: 1px solid #bfe3ff;
    background: linear-gradient(180deg, #f3fbff 0%, #e6f5ff 100%);
    color: var(--brand-dark);
    font-weight: 600;
}

/* float-based label/value cells: harmonize border colour only (no geometry) */
.grayleftbo,
.whiteleftbo,
.grayleftro,
.whiteleftro {
    border-color: var(--border-soft);
}

/* ---------------------------------------------------------------------------
   Phase 3 — data tables (table.tbl) and jqGrid  (cosmetic only, no geometry)
   --------------------------------------------------------------------------- */

/* ---- plain HTML tables (.tbl) ---- */
table.tbl { border-collapse: collapse; }

table.tbl th {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
    padding: 7px 8px;
}

table.tbl td {
    border: 1px solid var(--border-soft);
    color: var(--text);
    padding: 7px 8px;
}

table.tbl tr { border: 1px solid var(--border-soft); }

table.tbl > tbody > tr:nth-child(even) { background: var(--bg-subtle); }

table.tbl > tbody tr:hover {
    background: var(--brand-light) !important;
    color: var(--text) !important;
}

.trhighlight { background: var(--brand); color: #fff; }
.trtot { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }

/* ---- jqGrid ---- */
.ui-jqgrid { border-radius: var(--radius-sm); }
.ui-jqgrid .ui-jqgrid-view { font-family: var(--font-sans); }

/* caption / title bar */
.ui-jqgrid .ui-jqgrid-titlebar {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
}

/* column header (LABEL) row only — re-brand over the generic Phase-2 .ui-state-default.
   Scoped to .ui-jqgrid-labels so it does NOT hit the .ui-search-toolbar (filter) row,
   whose cells are also th.ui-th-column inside the htable. */
.ui-jqgrid .ui-jqgrid-labels th,
.ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
    background: var(--brand);
    border-color: var(--brand-dark);
    color: #fff;
    font-weight: 600;
}

.ui-jqgrid .ui-jqgrid-sortable { color: #fff; }
.ui-jqgrid .ui-jqgrid-htable th .ui-grid-ico-sort { opacity: .85; }

/* data rows: softer borders, zebra and hover (jqGrid hides a jqgfirstrow first) */
.ui-jqgrid tr.jqgrow td {
    border-color: var(--border-soft);
    color: var(--text);
    padding-top: 5px;
    padding-bottom: 5px;
}

.ui-jqgrid tr.jqgrow:nth-of-type(even) td { background: var(--bg-subtle); }

.ui-jqgrid tr.ui-state-hover td,
.ui-jqgrid tr.jqgrow:hover td { background: var(--brand-light); }

/* pager + search/filter toolbar */
.ui-jqgrid .ui-jqgrid-pager,
.ui-jqgrid .ui-pg-table {
    background: var(--bg-subtle);
    border-color: var(--border-soft);
}

.ui-jqgrid tr.ui-search-toolbar th {
    background: var(--bg-subtle);
    border-color: var(--border-soft);
}

/* ---------------------------------------------------------------------------
   Phase 4 — header bar, top menu, footer  (cosmetic only; no geometry)
   --------------------------------------------------------------------------- */

/* header backdrop — FOLLOWS THE THEME: light surface in light, dark in dark.
   Sticky so the brand bar + module nav stay visible on scroll; cyan accent line
   at the very top mirrors the footer. */
/* #mainwrapper holds the sticky #HeaderMenu (in-flow) + the `.content` wrapper (float:left).
   The float collapsed #mainwrapper to just the header height, so the sticky header/#infaTopNav
   had no room to stick and scrolled away. Clearfix contains the float → #mainwrapper spans the
   full page → the header stays pinned. Drop the legacy header_bg/#fff so the app canvas shows
   behind the content (not a white block) now that #mainwrapper covers the whole page. */
#mainwrapper::after { content: ""; display: block; clear: both; }
#mainwrapper { background: transparent !important; background-image: none !important; }

#HeaderMenu {
    position: sticky;
    top: 0;
    z-index: 900;                          /* under jQuery-UI dialogs (~1001) and nav fly-outs (1500) */
    border-top: 3px solid var(--brand);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
}
body:not(.theme-dark) #HeaderMenu { background: var(--surface); }
body.theme-dark #HeaderMenu { background: #161c24; }

/* separate the brand row from the module nav, and recolour the brand bar per theme */
body:not(.theme-dark) #header { border-bottom: 1px solid var(--line); }
body.theme-dark #header { border-bottom: 1px solid #2a323d; }
/* the logo PNG is white, so darken it to stay visible on the light brand bar */
body:not(.theme-dark) .brandLogo img { filter: brightness(0); }

/* header controls follow the theme (dark-on-light in light mode; the navy-style
   base rules below stay in force for dark mode) */
body:not(.theme-dark) .headerWeather { color: var(--text-muted); }
body:not(.theme-dark) .hdrIconBtn { background: rgba(0, 0, 0, .04); border-color: var(--line); color: var(--hdr-text); }
body:not(.theme-dark) .hdrIconBtn:hover { background: var(--brand-light); color: var(--brand-dark); }
body:not(.theme-dark) .userChip { background: rgba(0, 0, 0, .04); border-color: var(--line); color: var(--text); }
body:not(.theme-dark) .userChip:hover { background: var(--brand-light); }
body:not(.theme-dark) .userName { color: var(--text); }
body:not(.theme-dark) .userCaret { color: var(--text-muted); }

/* top-right action links (Logoff / Measurement) */
.toplink a { color: #cfd8e3 !important; }
.toplink:hover {
    background: var(--brand) !important;
    border-radius: var(--radius-sm);
}
.toplink:hover a { color: #fff !important; }

/* footer — FOLLOWS THE THEME, keeps the cyan accent line tying it to the brand.
   position:sticky + bottom:0 docks it to the viewport bottom so it stays visible while the
   content scrolls (it's the last body child, so it settles naturally at the true page end). */
/*#footer {
    position: sticky;
    bottom: 0;
    z-index: 800;*/                          /* under the header (900) + dialogs */
    /*border-top: 2px solid var(--brand);
    padding: 12px 18px;
    text-indent: 0;
    font-size: 12px;
    letter-spacing: .2px;
}*/

#footer {
    position: relative;
    margin-top: auto;
    /*position: sticky;
    bottom: 0;*/
    z-index: 800; /* under the header (900) + dialogs */
    border-top: 2px solid var(--brand);
    padding: 12px 18px;
    text-indent: 0;
    font-size: 12px;
    letter-spacing: .2px;
    width: 100%;
    box-sizing: border-box;
}



body:not(.theme-dark) #footer { background: var(--surface); color: var(--text-muted); }
body.theme-dark #footer { background: #161c24; color: #c7ced8; }
#footer a { color: var(--accent); font-weight: 600; }
#footer a:hover { color: var(--brand); }

/* ---- top menu (#infaTopNav): all styling consolidated in the "TOP MODULE NAV"
   block near the end of this file (clean rewrite). ---- */

/* ---------------------------------------------------------------------------
   Phase 4 — jQuery-UI dialogs (popups) + overlay  (override theme6 via !important)
   --------------------------------------------------------------------------- */
.ui-dialog {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    padding: 0 !important;
    background: #fff;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--brand) !important;
    border: none !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    color: #fff !important;
    padding: 10px 14px !important;
}

.ui-dialog .ui-dialog-title { color: #fff; font-weight: 600; }

.ui-dialog .ui-dialog-content { padding: 14px !important; color: var(--text); }

.ui-dialog .ui-dialog-buttonpane {
    border-top: 1px solid var(--border-soft) !important;
    background: var(--bg-subtle);
    padding: 8px 12px !important;
    border-radius: 0 0 var(--radius) var(--radius);
}

.ui-widget-overlay {
    background: #0b1220 !important;
    opacity: .45 !important;
}

/* ---------------------------------------------------------------------------
   Phase 4 — jQuery-UI datepicker (theme6)
   --------------------------------------------------------------------------- */
.ui-datepicker {
    /* Above the sticky .formActions footer (z-index 50) and jQuery-UI dialogs (~1001) so the open
       calendar is never clipped behind the Save/Cancel bar; below toasts (11000) / load bar (12000). */
    z-index: 1600 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    background: #fff !important;
    padding: 6px !important;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--brand) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
}

.ui-datepicker .ui-datepicker-title { color: #fff; font-weight: 600; }
.ui-datepicker .ui-datepicker-title select { color: var(--text); }
.ui-datepicker th { color: var(--text-muted); }

.ui-datepicker td a,
.ui-datepicker td span {
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--text) !important;
    text-align: center;
}

.ui-datepicker td a.ui-state-hover {
    background: var(--brand-light) !important;
    border-color: var(--brand) !important;
    color: var(--brand-dark) !important;
}

.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-highlight {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Phase 5 — .portlet cards (dashboards / panels)
   --------------------------------------------------------------------------- */
.portlet {
    margin: 0 1em 1em 0;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.portlet-header {
    margin: 0;
    padding: 10px 14px;
    line-height: 1.4;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-soft);
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--text);
    font-weight: 600;
}

.portlet-header .ui-icon { float: right; }

/* tame the legacy 4em content padding to a modern, denser value */
.portlet-content { padding: 14px; }

/* ---------------------------------------------------------------------------
   Icon-contrast refinement — replace jQuery-UI theme6 sprite icons with
   Font Awesome 4 glyphs so they read on the new cyan headers.
   Technique: font-size:0 collapses the hidden sprite label, ::before draws
   the glyph — works whether the icon span is block or absolutely centered.
   --------------------------------------------------------------------------- */

/* rest state: drop the sprite button background/border on the cyan headers */
.ui-dialog .ui-dialog-titlebar-close,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: transparent !important;
    border: 1px solid transparent !important;
}

/* keep glyphs readable on hover (override the Phase-2 brand-light hover) */
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close.ui-state-hover,
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
    background: rgba(255, 255, 255, .2) !important;
    border-color: transparent !important;
}

/* hide the sprite glyph + its screen-reader label */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    background: none !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    overflow: visible !important;
    line-height: 16px;
    text-align: center;
}

/* draw the Font Awesome glyph */
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before,
.ui-datepicker .ui-datepicker-prev .ui-icon::before,
.ui-datepicker .ui-datepicker-next .ui-icon::before {
    font-family: FontAwesome;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    display: inline;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon::before { content: "\f00d"; }            /* times */
.ui-datepicker .ui-datepicker-prev .ui-icon::before { content: "\f053"; font-size: 13px; } /* chevron-left */
.ui-datepicker .ui-datepicker-next .ui-icon::before { content: "\f054"; font-size: 13px; } /* chevron-right */

/* jqGrid filter-toolbar input sizing now lives in the base style.css
   (tr.ui-search-toolbar input/select) — no override needed here. */

/* ---------------------------------------------------------------------------
   Phase 6 — jQuery-UI (theme6) brand alignment
   Design language: NAVY for navigation chrome (top bar + side-menu group headers,
   accordions, tabs via generic .ui-widget-header), CYAN for content headers
   (grids/dialogs/datepicker have their own brand-cyan rules).
   --------------------------------------------------------------------------- */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--font-sans);
}
/* inputs INSIDE a .ui-widget context (grid filter row, jQuery-UI tabs) already sit on the
   1.1em-scaled .ui-widget base, so keep them at 1em - that equals the grid cell px too.
   Later in source than the plain input rule above, so it wins the equal-specificity tie. */
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
    font-size: 1em;
}

.ui-widget-header {
    background: #001c4f;            /* navy (theme6) — keeps nav/menu chrome navy */
    border: 1px solid #001c4f;
    color: #fff;
    font-weight: 600;
}
.ui-widget-header a { color: #fff; }

/* selected / current cue (e.g. side-menu active item) */
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a { color: #fff; }

/* ===========================================================================
   LIGHT & AIRY (v2) — modern re-skin.
   Supersedes the saturated cyan/navy bars above: light/neutral surfaces, more
   whitespace, larger type; CYAN is demoted to an accent (buttons/links/active).
   Loaded last, so these win. Delete this whole block to revert to v1.
   (The top bar stays dark because the logo PNG is white.)
   =========================================================================== */
:root {
    --app-bg:   #eef1f6;   /* grey app canvas */
    --surface:  #ffffff;   /* cards */
    --hdr:      #f3f5f9;   /* light header surface */
    --hdr-text: #3a4250;
    --line:     #e7eaef;   /* hairline border */
}

/* canvas + airier base type */
body {
    background: var(--app-bg);
    font-size: 0.72em;
    line-height: 1.5;
    color: #344054;
}

/* settings-style pages: content + side menu become white cards on the canvas.
   ---- LAYOUT: convert the legacy float-row into a flex row so the parent's
        height actually tracks the children. Floats collapse the container
        height to 0 with no clearfix, which left `position: sticky` on the
        sidebar with no room to stick (it scrolled away with the page).
        Flex items ignore `float`, so the existing 15% / 85% widths still
        apply via the float-era declarations in Content/style.css. ---- */
.settingscontainer {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 4px; /* Equal space between sidebar and content */
    padding: 5px; /* Equal outer space (Top Right Bottom Left) */
    box-sizing: border-box;
    /* App-shell for settings pages: bound BOTH columns to the space between the fixed header and
       footer and scroll INSIDE each column, so the page itself doesn't scroll and the side menu
       stays put (plain sticky was unreliable in this legacy float chain). --hdr-h / --ftr-h are
       the live header/footer heights set by JS in Site.Master. */
}
.settingscotent,
.settingscotents {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
    /* THE content pane — bounded to the viewport (minus header/footer) and the only thing that
       scrolls. The side menu is a sibling column, so it stays put while this scrolls. */
    max-height: calc(100vh - var(--hdr-h, 96px) - var(--ftr-h, 44px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.settingssidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px;
    box-sizing: border-box;
    /* ---- independent-scroll sidebar: stick to top while the main pane scrolls.
            top:8px gives a breathing line; max-height + overflow-y let the menu
            scroll inside its own column when it overflows the viewport. Works
            with the legacy `float:left` layout (sticky on a float is fine in
            modern browsers). Falls back to normal flow on browsers without
            sticky support (no menu loss, just legacy behaviour). ---- */
    position: sticky;
    /* dock BELOW the sticky #HeaderMenu (top:0, z-index 900) — otherwise the menu
       sticks at 8px, i.e. hidden behind the header, and looks like it scrolls away.
       --hdr-h is set to the header's live height by JS in Site.Master. */
    top: calc(var(--hdr-h, 96px) + 4px);
    align-self: flex-start;
    max-height: calc(100vh - var(--hdr-h, 96px) - var(--ftr-h, 44px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---- plain tables: light headers, airy zebra rows ---- */
table.tbl th {
    background: var(--hdr) !important;
    color: var(--hdr-text) !important;
    border-color: var(--line) !important;
    font-weight: 600;
}
table.tbl td { border-color: var(--line); color: #344054; padding: 9px 10px; }
table.tbl > tbody > tr:nth-child(even) { background: #fafbfc; }
table.tbl > tbody tr:hover { background: var(--brand-light) !important; color: var(--text) !important; }
.trtot { background: var(--hdr) !important; color: var(--hdr-text) !important; border-color: var(--line) !important; font-weight: 600; }
/* Despatch order book (#SalesOrder): total row + flatten the legacy jQuery-UI delivery bars into modern rounded brand bars */
#SalesOrder .liveTotRow td { font-weight: 700; border-top: 2px solid var(--brand); }
#SalesOrder .ui-progressbar { position: relative; height: 20px; min-width: 90px; background: var(--bg-subtle) !important; border: 1px solid var(--line) !important; border-radius: 6px; box-shadow: none !important; }
#SalesOrder .ui-progressbar .ui-progressbar-value { background: var(--brand) !important; border: 0 !important; margin: 0 !important; border-radius: 6px 0 0 6px; box-shadow: none !important; }
body.theme-dark #SalesOrder .ui-progressbar { background: #1a212b !important; border-color: #2a323d !important; }
/* Leaflet GPS mini-map (#liveMap): theme-aware popups / tooltips / controls so they aren't bright boxes in dark mode */
#liveMap { background: var(--surface); }
body.theme-dark .leaflet-popup-content-wrapper, body.theme-dark .leaflet-popup-tip { background: #1a212b; color: #e8edf3; }
body.theme-dark .leaflet-tooltip { background: #1a212b; color: #e8edf3; border-color: #2a323d; }
body.theme-dark .leaflet-tooltip-top:before { border-top-color: #1a212b; }
body.theme-dark .leaflet-bar a, body.theme-dark .leaflet-control-attribution { background: #1a212b !important; color: #c7ced8 !important; }
body.theme-dark .leaflet-bar a { border-bottom-color: #2a323d !important; }
body.theme-dark .leaflet-control-attribution a { color: #9fd8ff !important; }

/* ---- jqGrid: white card, light headers, airy rows ---- */
.ui-jqgrid {
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.ui-jqgrid .ui-jqgrid-titlebar {
    background: #fff !important;
    color: #1f2733 !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    font-weight: 600;
}
.ui-jqgrid .ui-jqgrid-labels th,
.ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
    background: var(--hdr) !important;
    color: var(--hdr-text) !important;
    border-color: var(--line) !important;
    font-weight: 600;
}
.ui-jqgrid .ui-jqgrid-sortable { color: var(--hdr-text) !important; }
.ui-jqgrid tr.jqgrow td {
    border-color: var(--line);
    color: #344054;
    padding-top: 2px;
    padding-bottom: 2px;
}
.ui-jqgrid tr.jqgrow:nth-of-type(even) td { background: #fafbfc; }
.ui-jqgrid tr.ui-state-hover td,
.ui-jqgrid tr.jqgrow:hover td { background: var(--brand-light); }
/* selected jqGrid row (e.g. the ListAccount picker) — solid brand so the chosen row is identifiable,
   distinct from the lighter hover. Beats the per-cell zebra/base backgrounds. */
.ui-jqgrid tr.jqgrow.ui-state-highlight td { background: var(--brand) !important; color: #fff !important; }

/* ---- side menu + generic widget headers: light ---- */
.ui-widget-header {
    background: var(--hdr) !important;
    border: 1px solid var(--line) !important;
    color: var(--hdr-text) !important;
}
.ui-widget-header a { color: var(--hdr-text) !important; }

/* active / current menu item -> cyan accent bar */
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: var(--brand-light) !important;
    border: 1px solid var(--brand-light) !important;
    border-left: 3px solid var(--brand) !important;
    color: var(--brand-dark) !important;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a { color: var(--brand-dark) !important; }

/* Invoice Create/Update QuantityDetails box reuses .ui-state-highlight purely as a container.
   Give it a neutral light surface with dark text (mirrors the body.theme-dark rule) so the details
   read at full contrast instead of low-contrast cyan-on-cyan. The injected markup no longer forces
   a white font, so this text color inherits down to the <p>/<span> content.
   #divRemainingRawmaterial is the same box on RawMaterialInward Create/Edit/Inward. */
#QuantityDetails .ui-state-highlight,
#divRemainingRawmaterial .ui-state-highlight,
#hdnUnitPriceDetails .ui-state-highlight {
    background: #f4f6f9 !important;
    border-left: 3px solid var(--brand) !important;
    color: #1f2733 !important;
}

/* RawMaterialInward remaining-qty box: five equal, aligned columns that fit one row (the legacy
   width20x4 + width19 = 99% floats let the wider "Name" column wrap and knock the row out of line).
   5 x 19.5% = 97.5% (slack avoids sub-pixel wrap). */
#divRemainingRawmaterial .width100 > span { width: 19.5% !important; }
/* The box's outer .ui-widget is width:100%, but the form's field grid is ~98.3% (.detailedViewHeader
   rows = 49.15% x 2; label/field cells = 24.5% x 4). At 100% the box overhangs the rest of the form
   on the right; constrain it to the grid width so its edges line up. */
#divRemainingRawmaterial > .ui-widget { width: 98.3% !important; }

/* Store PurchaseOrder unit-price box (#hdnUnitPriceDetails): the legacy width50 + width30 columns
   left a ragged right edge and uneven column widths. Four equal columns wrap into a balanced 2x2
   grid (2 x 48% per row), with a little row spacing so the two lines don't crowd. */
#hdnUnitPriceDetails .width100 > span { width: 48% !important; line-height: 1.7; vertical-align: top; }

/* ---- dialogs: light header + dark close icon ---- */
.ui-dialog .ui-dialog-titlebar {
    background: #fff !important;
    color: #1f2733 !important;
    border-bottom: 1px solid var(--line) !important;
}
.ui-dialog .ui-dialog-title { color: #1f2733; }
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before { color: #6b7280; }
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close.ui-state-hover { background: rgba(0, 0, 0, .06) !important; }

/* ---- datepicker: light header + dark arrows ---- */
.ui-datepicker .ui-datepicker-header {
    background: var(--hdr) !important;
    color: var(--hdr-text) !important;
}
.ui-datepicker .ui-datepicker-title { color: var(--hdr-text); }
.ui-datepicker .ui-datepicker-prev .ui-icon::before,
.ui-datepicker .ui-datepicker-next .ui-icon::before { color: var(--hdr-text) !important; }
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover { background: rgba(0, 0, 0, .06) !important; }

/* ---- portlet header: light ---- */
.portlet-header {
    background: var(--hdr) !important;
    color: var(--hdr-text) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* ===========================================================================
   Top brand bar — modern flex layout (logo left, actions right)
   =========================================================================== */
#header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box;
}
.brandLogo { display: inline-flex; align-items: center; transition: opacity .15s ease; }
.brandLogo:hover { opacity: .85; }
.brandLogo img { height: 32px; width: auto; display: block; border: 0; }

.headerActions { display: flex; align-items: center; gap: 8px; }
.headerWeather { color: #cfd8e3; font-size: 12px; white-space: nowrap; }

.hdrIconBtn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #e8eef6;
    width: 36px; height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.hdrIconBtn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hdrIconBtn:active { transform: scale(.92); }

/* active-company selector — matches the header icon buttons */
.hdrCompanySelect {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #e8eef6;
    height: 36px;
    border-radius: 10px;
    padding: 0 8px;
    max-width: 220px;
    cursor: pointer;
    font-size: 13px;
    outline: none;
    transition: background .15s ease, color .15s ease;
}
.hdrCompanySelect:hover { background: rgba(255, 255, 255, .18); color: #fff; }
/* native option popup follows the theme surface so it stays readable */
.hdrCompanySelect option { color: var(--text); background: var(--surface); }
body:not(.theme-dark) .hdrCompanySelect { background: rgba(0, 0, 0, .04); border-color: var(--line); color: var(--hdr-text); }

/* slim divider between the icon buttons and the user chip */
.headerActions .hdrDivider { width: 1px; height: 22px; background: rgba(255, 255, 255, .18); margin: 0 3px; }
body:not(.theme-dark) .headerActions .hdrDivider { background: var(--line); }

.userChip {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; cursor: pointer; outline: none;
    transition: background .15s ease;
}
.userChip:hover { background: rgba(255, 255, 255, .18); }
.userAvatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand-dark));
    color: #fff; font-weight: 700; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.userName { font-size: 13px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userCaret { font-size: 12px; opacity: .85; }

.userDropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    padding: 6px;
    z-index: 2000;
    /* smooth fade / scale entrance (replaces display:none/block) */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px) scale(.98); transform-origin: top right;
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* invisible bridge over the gap so moving chip -> menu keeps it open */
.userDropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.userChip:hover .userDropdown,
.userChip:focus-within .userDropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

/* profile header (who + active company/tenant) */
.userDropdownHead { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 10px; }
.userDropdownName { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userDropdownSub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userDropdownSep { height: 1px; background: var(--line); margin: 2px 4px 6px; }

.userDropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text) !important;
    text-decoration: none !important;
    font-size: 13px;
}
.userDropdown a:hover { background: var(--brand-light); color: var(--brand-dark) !important; }
.userDropdown a i { width: 16px; text-align: center; color: var(--text-muted); }
.userDropdown a:hover i { color: var(--brand-dark); }
/* logoff = danger affordance */
.userDropdown a.danger:hover { background: #fdecec; color: var(--danger) !important; }
.userDropdown a.danger:hover i { color: var(--danger); }

/* ===========================================================================
   DARK THEME — body.theme-dark (shell + main components). Cyan accent kept.
   Toggled from the header (persisted in localStorage). Shell-level: deeply
   nested legacy pages with literal colors may still show light spots.
   =========================================================================== */
body.theme-dark { background: #0f141a !important; color: #c7ced8 !important; }

body.theme-dark .settingscotent,
body.theme-dark .settingscotents,
body.theme-dark .settingssidebar,
body.theme-dark .portlet,
body.theme-dark .ui-jqgrid { background: #161c24 !important; border-color: #2a323d !important; }
/* style.css hardcodes .portlet-content { color:#333 } — dark text on the now-dark card = invisible
   data on detail/view pages (e.g. /Logistics/DriverDetails/Driver). Force a light text colour. */
body.theme-dark .portlet-content { color: #c7ced8 !important; }

body.theme-dark .ui-widget-header,
body.theme-dark .portlet-header,
body.theme-dark table.tbl th,
body.theme-dark .ui-jqgrid .ui-jqgrid-labels th,
body.theme-dark .ui-jqgrid .ui-jqgrid-labels th.ui-th-column,
body.theme-dark .ui-jqgrid tr.ui-search-toolbar th,
body.theme-dark .detailedViewHeader,
body.theme-dark .detailedViewHeader_rgt,
body.theme-dark .detailedViewHeaders,
body.theme-dark .header {
    background: #1e2630 !important;
    color: #c7ced8 !important;
    border-color: #2a323d !important;
}
body.theme-dark .ui-jqgrid .ui-jqgrid-titlebar,
body.theme-dark .ui-dialog .ui-dialog-titlebar { background: #1a212b !important; color: #e8edf3 !important; border-bottom-color: #2a323d !important; }
body.theme-dark .ui-jqgrid .ui-jqgrid-sortable,
body.theme-dark .ui-widget-header a { color: #c7ced8 !important; }

body.theme-dark table.tbl td,
body.theme-dark .ui-jqgrid tr.jqgrow td { background: #161c24 !important; color: #c7ced8 !important; border-color: #2a323d !important; }
body.theme-dark table.tbl > tbody > tr:nth-child(even),
body.theme-dark .ui-jqgrid tr.jqgrow:nth-of-type(even) td { background: #1a212b !important; }
body.theme-dark table.tbl > tbody tr:hover,
body.theme-dark .ui-jqgrid tr.jqgrow:hover td,
body.theme-dark .ui-jqgrid tr.ui-state-hover td { background: #243042 !important; color: #e8edf3 !important; }
body.theme-dark .ui-jqgrid tr.jqgrow.ui-state-highlight td { background: var(--brand) !important; color: #fff !important; }

body.theme-dark .grayleftbo,
body.theme-dark .whiteleftbo,
body.theme-dark .grayleftro,
body.theme-dark .whiteleftro,
body.theme-dark .grayleftbo_text,
body.theme-dark .grayleftro_text,
body.theme-dark .whiteleftbo_text,
body.theme-dark .whiteleftro_text,
body.theme-dark .whiteleftbo_onefd,
body.theme-dark .grayleftro_onefd,
body.theme-dark .whitefull,
body.theme-dark .whiteforup,
body.theme-dark .whitefullbo,
body.theme-dark .whitefullro,
body.theme-dark .grayfullbo,
body.theme-dark .grayfullro,
body.theme-dark .grayleftbo10,
body.theme-dark .grayleftro10,
body.theme-dark .grayleftbo40,
body.theme-dark .grayleftro40 { background: #161c24 !important; color: #c7ced8 !important; border-color: #2a323d !important; }
/* native checkboxes/radios (e.g. Tax Information "Include In Print") keep light browser chrome in
   dark mode; tint them to the brand so they read correctly on the dark cell. */
body.theme-dark input[type="checkbox"],
body.theme-dark input[type="radio"] { accent-color: var(--brand); color-scheme: dark; }
/* legacy item-grid header bars (.grid/.grid_a/.grid_b use a light gradient image in erp.css);
   darken them + light text so the Item Details header isn't a light strip in dark mode. The
   .quoteForm-scoped rule below stays more specific for card pages. */
body.theme-dark .grid,
body.theme-dark .grid_a,
body.theme-dark .grid_b { background: #1e2630 !important; color: #c7ced8 !important; border-color: #2a323d !important; }
/* legacy item-grid ROW cells + the Net Total / Grand Total totals lines: erp.css gives them
   light-gray (#e3e4e6) borders and no background, so in dark mode the grid "lines" showed light.
   Darken the cell + its border lines. */
body.theme-dark .grid_lfttax,
body.theme-dark .grid_lfttaxb,
body.theme-dark .grid_lfttaxbc,
body.theme-dark .grid_lfttax_pinv,
body.theme-dark .grid_lfttaxb_pinv,
body.theme-dark .grid_lftdiscnt,
body.theme-dark .grid_lfttaxes,
body.theme-dark .netarea,
body.theme-dark .netareargt,
body.theme-dark .netdetail,
body.theme-dark .addpro { background: #161c24 !important; color: #c7ced8 !important; border-color: #2a323d !important; }
/* .header1 is the outer box wrapper (e.g. the GST Information section in PV_StateTax) — erp.css
   gives it a light-gray (#c3c3c3) border that showed as a white outer line in dark mode. */
body.theme-dark .header1 { border-color: #2a323d !important; }
/* .labtest is the lab-test grid header row (Water Absorption / Density / Moisture / Sieve / ... Create):
   Site.css gives it a light beige (#f2f2ea) background that stayed light in dark mode. Darken the
   header, the fieldset.lab box border and the .incentvhdr cell border. */
body.theme-dark .labtest { background-color: #1e2630 !important; color: #c7ced8 !important; border-color: #2a323d !important; }
body.theme-dark fieldset.lab { border-color: #2a323d !important; }
body.theme-dark .incentvhdr { border-color: #2a323d !important; }

/* FlexiGrid (Scripts/flexigrid/) — legacy grid on HRM/settings pages (e.g. /HRM/AttendanceSettings/Index).
   flexigrid.css hardcodes light colours + light gradient GIFs, so the whole grid (title/toolbar/header/
   rows/pager/search) stayed light in dark mode. Darken every surface and drop the gradient images. */
body.theme-dark .flexigrid { background: #161c24 !important; border-color: #2a323d !important; color: #c7ced8 !important; }
body.theme-dark .flexigrid div.mDiv,
body.theme-dark .flexigrid div.tDiv,
body.theme-dark .flexigrid div.tDiv2,
body.theme-dark .flexigrid div.hDiv,
body.theme-dark .flexigrid div.hDivBox,
body.theme-dark .flexigrid div.sDiv,
body.theme-dark .flexigrid div.sDiv2,
body.theme-dark .flexigrid div.pDiv,
body.theme-dark .flexigrid div.pDiv2,
body.theme-dark .flexigrid div.vGrip {
    background-image: none !important; background-color: #1e2630 !important;
    border-color: #2a323d !important; color: #c7ced8 !important;
}
body.theme-dark .flexigrid div.vGrip span { border-top-color: #3a4250 !important; border-bottom-color: #3a4250 !important; }
/* .gBlock is the loading/reload overlay flexigrid.js drops over the grid body with an inline
   background:white — a CSS !important beats the (non-important) inline style, so darken it. */
body.theme-dark .gBlock { background: #161c24 !important; }
/* FlexiGrid column show/hide popup (.nDiv, opened by the toggle button) + its checkboxes/toggle
   button — flexigrid.css gives them light bg (#eee) + light borders + native (light) checkboxes. */
body.theme-dark .flexigrid div.nDiv { background: #1e2630 !important; border-color: #2a323d !important; }
body.theme-dark .flexigrid div.nDiv td { border-color: #2a323d !important; color: #c7ced8 !important; }
body.theme-dark .flexigrid div.nDiv tr:hover td,
body.theme-dark .flexigrid div.nDiv tr.ndcolover td { background: #22303c !important; border-color: #2a323d !important; }
body.theme-dark .flexigrid div.nBtn,
body.theme-dark .flexigrid div.nBtn.srtd { background-image: none !important; background-color: #1e2630 !important; border-color: #2a323d !important; }
body.theme-dark .flexigrid div.nDiv input[type="checkbox"] { accent-color: var(--brand); color-scheme: dark; }
/* .ptogtitle = the grid collapse/expand toggle box in the title bar (mDiv); its border (#ccc) and
   inner span borders (#fff/#eee/#ddd) showed as a white outline. */
body.theme-dark .flexigrid div.mDiv div.ptogtitle { border-color: #2a323d !important; background-image: none !important; }
body.theme-dark .flexigrid div.mDiv div.ptogtitle:hover { border-color: #3a4250 !important; }
body.theme-dark .flexigrid div.mDiv div.ptogtitle span { border-left-color: #2a323d !important; border-top-color: #2a323d !important; border-bottom-color: #2a323d !important; }
/* .btnseparator = toolbar button divider; its border-right:#fff showed as a white line. */
body.theme-dark .flexigrid div.btnseparator { border-left-color: #2a323d !important; border-right-color: #3a4250 !important; }

/* Create-popup grid (#popup title + .popleftbc header cells + .popleftbo|ro / .popgraybo|ro row cells
   & their _text variants): erp.css hardcodes light bg (#cfe7ff / #f2f2ea / #FFF) → white in dark mode
   (e.g. /RawMaterialType Certifications popup: "Certificate Name" / "Need In Inward" + checkbox cells). */
body.theme-dark #popup { background-color: #1e2630 !important; border-color: #2a323d !important; color: #c7ced8 !important; }
body.theme-dark .popleftbc { background-color: #1e2630 !important; border-color: #2a323d !important; color: #c7ced8 !important; }
body.theme-dark .popleftbo, body.theme-dark .popleftbo_text,
body.theme-dark .popleftro, body.theme-dark .popleftro_text,
body.theme-dark .popleftrc, body.theme-dark .popleftrc_text,
body.theme-dark .popgraybo, body.theme-dark .popgraybo_text,
body.theme-dark .popgrayro, body.theme-dark .popgrayro_text {
    background-color: #161c24 !important; border-color: #2a323d !important; color: #c7ced8 !important;
}
body.theme-dark #popupwrapper input[type="checkbox"] { accent-color: var(--brand); color-scheme: dark; }
/* /Invoice/Index EInvoice popup (PV_EInvoiceDetail.ascx): the Invoice Number value cell keeps an
   inline lightgreen highlight for the light theme; in dark mode that light bg under the light popup
   text is unreadable, so recolour it to the dark-green success treatment (matches .recBadge-on).
   The inline style needs !important to be overridden. */
body.theme-dark .padtw.einvInvNum { background-color: rgba(0, 170, 90, .18) !important; color: #4ade80 !important; }
body.theme-dark .flexigrid div.bDiv { background-color: #161c24 !important; border-color: #2a323d !important; }
body.theme-dark .flexigrid div.bDiv table { border-color: #2a323d !important; }
body.theme-dark .flexigrid div.hDiv th,
body.theme-dark .flexigrid div.bDiv td { border-color: #2a323d !important; color: #c7ced8 !important; }
body.theme-dark .flexigrid div.hDiv th.sorted { background-image: none !important; background-color: #232d38 !important; }
body.theme-dark .flexigrid tr.erow td { background-color: #1a212b !important; border-bottom-color: #1a212b !important; }
body.theme-dark .flexigrid tr.erow td.sorted { background-color: #1e2731 !important; }
body.theme-dark .flexigrid div.bDiv tr:hover td,
body.theme-dark .flexigrid div.bDiv tr.trOver td,
body.theme-dark .flexigrid div.bDiv tr:hover td.sorted,
body.theme-dark .flexigrid div.bDiv tr.trOver td.sorted { background-color: #22303c !important; }
body.theme-dark .flexigrid tr.trSelected td,
body.theme-dark .flexigrid div.bDiv tr.trSelected:hover td { background-image: none !important; background-color: var(--brand) !important; color: #fff !important; }
body.theme-dark .flexigrid div.fbutton,
body.theme-dark .flexigrid div.fbutton div { background-image: none !important; color: #c7ced8 !important; }
body.theme-dark .flexigrid div.fbutton:hover,
body.theme-dark .flexigrid div.fbutton.fbOver { border-color: #2a323d !important; background-color: #22303c !important; }
body.theme-dark .flexigrid div.pDiv input,
body.theme-dark .flexigrid div.sDiv input,
body.theme-dark .flexigrid div.sDiv select,
body.theme-dark .flexigrid div.sDiv2 input,
body.theme-dark .flexigrid div.sDiv2 select { background: #0f141a !important; border-color: #2a323d !important; color: #e8edf3 !important; }
/* remaining hardcoded light border lines: the header table's right edge (#fff), the inner
   cell divs (#fff), and the row hover left/right borders (#eef8ff) all showed as white lines. */
body.theme-dark .flexigrid div.hDiv table,
body.theme-dark .flexigrid div.hDiv th div,
body.theme-dark .flexigrid div.bDiv td div { border-color: #2a323d !important; }
body.theme-dark .flexigrid div.bDiv tr:hover td,
body.theme-dark .flexigrid div.bDiv tr.trOver td { border-left-color: #2a323d !important; border-right-color: #2a323d !important; }
body.theme-dark input[type="text"],
body.theme-dark input[type="url"],
body.theme-dark input[type="email"],
body.theme-dark input[type="number"],
body.theme-dark input[type="password"],
body.theme-dark input[type="search"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="date"],
body.theme-dark input:not([type]),
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .detailedViewTextBox { background: #0f141a !important; color: #e8edf3 !important; border-color: #2a323d !important; color-scheme: dark; }
body.theme-dark input[readonly],
body.theme-dark input[type="text"][readonly='readonly'],
body.theme-dark textarea[readonly] { background: #1a212b !important; color: #8b95a3 !important; }
/* dropdown option list + the grid filter-toolbar selects/inputs (left/top of grid) */
body.theme-dark select option,
body.theme-dark optgroup { background: #1a212b; color: #e8edf3; }
body.theme-dark tr.ui-search-toolbar select,
body.theme-dark tr.ui-search-toolbar input:not([type="checkbox"]):not([type="radio"]) { background: #0f141a !important; color: #e8edf3 !important; border-color: #2a323d !important; }

/* checkbox & radio: brand-coloured check/dot in both themes; dark color-scheme so
   the native box renders dark in dark mode (was a washed dark square before). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
body.theme-dark input[type="checkbox"],
body.theme-dark input[type="radio"] { color-scheme: dark; accent-color: var(--brand); }

/* buttons — legacy plain buttons get a dark button look; our themed .btnPrimary
   / .btnGhost (and jQuery-UI .ui-state-default buttons) keep their own styling. */
body.theme-dark button:not(.btnPrimary):not(.btnGhost):not(.ui-button),
body.theme-dark input[type="button"]:not(.btnPrimary):not(.btnGhost),
body.theme-dark input[type="submit"]:not(.btnPrimary):not(.btnGhost):not(.loginbutton),
body.theme-dark input[type="reset"] {
    background: #1e2630 !important; color: #e8edf3 !important; border: 1px solid #2a323d !important;
}
body.theme-dark button:not(.btnPrimary):not(.btnGhost):not(.ui-button):hover,
body.theme-dark input[type="button"]:not(.btnPrimary):not(.btnGhost):hover,
body.theme-dark input[type="submit"]:not(.btnPrimary):not(.btnGhost):not(.loginbutton):hover,
body.theme-dark input[type="reset"]:hover { background: #243042 !important; }

/* fieldset / legend (used in dialogs), placeholder, file input */
body.theme-dark fieldset { border-color: #2a323d !important; }
body.theme-dark legend { color: #e8edf3 !important; }
body.theme-dark ::placeholder { color: #6b7280 !important; }
body.theme-dark input[type="file"] { color: #c7ced8 !important; }

/* jQuery-UI autocomplete / menu dropdowns */
body.theme-dark .ui-autocomplete,
body.theme-dark .ui-menu { background: #161c24 !important; border-color: #2a323d !important; }
body.theme-dark .ui-menu .ui-menu-item a,
body.theme-dark .ui-autocomplete .ui-menu-item a { color: #c7ced8 !important; }
body.theme-dark .ui-menu .ui-menu-item a.ui-state-hover,
body.theme-dark .ui-menu .ui-menu-item a.ui-state-focus,
body.theme-dark .ui-autocomplete .ui-menu-item a.ui-state-hover,
body.theme-dark .ui-autocomplete .ui-menu-item a.ui-state-focus { background: rgba(0, 174, 255, .16) !important; color: #9fd8ff !important; border-color: transparent !important; }

body.theme-dark .ui-dialog,
body.theme-dark .ui-datepicker { background: #161c24 !important; border-color: #2a323d !important; }
body.theme-dark .ui-dialog .ui-dialog-content { background: #161c24 !important; color: #c7ced8 !important; }
body.theme-dark .ui-dialog .ui-dialog-buttonpane { background: #1a212b !important; border-top-color: #2a323d !important; }
/* dialog close (X) icon — lighter + clearer hover on the dark titlebar */
body.theme-dark .ui-dialog .ui-dialog-titlebar-close .ui-icon::before { color: #c7ced8 !important; }
body.theme-dark .ui-dialog .ui-dialog-titlebar-close:hover,
body.theme-dark .ui-dialog .ui-dialog-titlebar-close.ui-state-hover { background: rgba(255, 255, 255, .10) !important; }
/* modal backdrop — darker in dark theme */
body.theme-dark .ui-widget-overlay { background: #000 !important; opacity: .6 !important; }
/* legacy popup form cells (Site Address / Customer Group / other dialog forms) */
body.theme-dark .popupwrapper,
body.theme-dark #popup,
body.theme-dark .popleftbo,
body.theme-dark .popleftro,
body.theme-dark .popgraybo,
body.theme-dark .popgrayro,
body.theme-dark .popleftbo_text,
body.theme-dark .popleftro_text,
body.theme-dark .popgraybo_text,
body.theme-dark .popgrayro_text {
    background: #161c24 !important; color: #c7ced8 !important; border-color: #2a323d !important;
}
body.theme-dark .ui-dialog fieldset .editor-label { color: #c7ced8 !important; }
body.theme-dark .ui-datepicker .ui-datepicker-header { background: #1e2630 !important; color: #e8edf3 !important; }
body.theme-dark .ui-datepicker td a,
body.theme-dark .ui-datepicker td span { color: #c7ced8 !important; }
/* datepicker dark: day-name row, prev/next arrows (they use --hdr-text = dark-on-dark
   otherwise), day cells + hover/selected/today states */
body.theme-dark .ui-datepicker th { color: #8b95a3 !important; }
body.theme-dark .ui-datepicker .ui-datepicker-prev .ui-icon::before,
body.theme-dark .ui-datepicker .ui-datepicker-next .ui-icon::before { color: #c7ced8 !important; }
body.theme-dark .ui-datepicker .ui-datepicker-prev.ui-state-hover,
body.theme-dark .ui-datepicker .ui-datepicker-next.ui-state-hover { background: rgba(255, 255, 255, .08) !important; }
body.theme-dark .ui-datepicker td a.ui-state-default { background: #1e2630 !important; border-color: #2a323d !important; color: #c7ced8 !important; }
body.theme-dark .ui-datepicker td a.ui-state-hover { background: rgba(0, 174, 255, .18) !important; color: #9fd8ff !important; border-color: #2a323d !important; }
body.theme-dark .ui-datepicker td a.ui-state-active { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
body.theme-dark .ui-datepicker td .ui-state-highlight { background: rgba(0, 174, 255, .22) !important; color: #e8edf3 !important; border-left: none !important; }
body.theme-dark .ui-datepicker .ui-datepicker-buttonpane button { background: #1e2630 !important; color: #e8edf3 !important; border-color: #2a323d !important; }

/* header user dropdown (top-menu fly-out is styled in the TOP MODULE NAV block) */
body.theme-dark .userDropdown { background: #161c24 !important; border-color: #2a323d !important; }
body.theme-dark .userDropdown a { color: #c7ced8 !important; }
body.theme-dark .userDropdownName { color: #e8edf3; }
body.theme-dark .userDropdownSep { background: #2a323d; }
body.theme-dark .userDropdown a.danger:hover { background: rgba(224, 36, 36, .18); color: #ff6b6b !important; }
body.theme-dark .userDropdown a.danger:hover i { color: #ff6b6b; }

/* links + active cue */
body.theme-dark a { color: #4fc3f7; }
body.theme-dark .ui-state-highlight,
body.theme-dark .ui-widget-content .ui-state-highlight {
    background: rgba(0, 174, 255, .16) !important;
    border-left: 3px solid var(--brand) !important;
    color: #9fd8ff !important;
}
/* Invoice Create/Update QuantityDetails box reuses .ui-state-highlight purely as a container, so the
   cyan highlight tint read as a "sea blue" panel — give it a neutral dark surface instead.
   #divRemainingRawmaterial is the same box on RawMaterialInward Create/Edit/Inward. */
body.theme-dark #QuantityDetails .ui-state-highlight,
body.theme-dark #divRemainingRawmaterial .ui-state-highlight,
body.theme-dark #hdnUnitPriceDetails .ui-state-highlight {
    background: #1e2630 !important;
    border-left: 3px solid var(--brand) !important;
    color: #c7ced8 !important;
}

/* dark — generic jQuery-UI surfaces: tab panels (Create/Edit forms),
   grid toolbar (Add bar), pager/footer, side-menu items */
body.theme-dark .ui-widget-content {
    background: #161c24 !important;
    color: #c7ced8 !important;
    border-color: #2a323d !important;
}
body.theme-dark .ui-state-default,
body.theme-dark .ui-widget-content .ui-state-default,
body.theme-dark .ui-widget-header .ui-state-default {
    background: #1e2630 !important;
    color: #c7ced8 !important;
    border-color: #2a323d !important;
}
body.theme-dark .ui-jqgrid .ui-userdata,
body.theme-dark .ui-jqgrid .ui-jqgrid-toolbar,
body.theme-dark .ui-jqgrid .ui-jqgrid-pager,
body.theme-dark .ui-jqgrid .ui-jqgrid-toppager,
body.theme-dark .ui-jqgrid .ui-jqgrid-sdiv,
body.theme-dark .ui-jqgrid tr.footrow td {
    background: #1a212b !important;
    color: #c7ced8 !important;
    border-color: #2a323d !important;
}
body.theme-dark .ui-jqgrid .ui-pg-table td { color: #c7ced8 !important; }
body.theme-dark .ui-jqgrid .ui-pg-input,
body.theme-dark .ui-jqgrid .ui-pg-selbox {
    background: #0f141a !important;
    color: #e8edf3 !important;
    border-color: #2a323d !important;
}

/* dark pager — target it directly: jqGrid often renders the pager OUTSIDE the
   .ui-jqgrid box, so the .ui-jqgrid-scoped rules above miss it and theme6's
   .ui-state-default keeps it light. */
body.theme-dark .ui-jqgrid-pager,
body.theme-dark .ui-jqgrid-toppager,
body.theme-dark .ui-jqgrid-pager .ui-pg-table,
body.theme-dark .ui-jqgrid-pager td,
body.theme-dark .ui-jqgrid-pager .ui-paging-info {
    background: #1a212b !important;
    color: #c7ced8 !important;
    border-color: #2a323d !important;
}
body.theme-dark .ui-jqgrid-pager .ui-pg-input,
body.theme-dark .ui-jqgrid-pager .ui-pg-selbox {
    background: #0f141a !important;
    color: #e8edf3 !important;
    border-color: #2a323d !important;
}
body.theme-dark .ui-jqgrid-pager .ui-pg-button:hover,
body.theme-dark .ui-jqgrid-pager .ui-pg-button.ui-state-hover { background: #243042 !important; }
body.theme-dark .ui-jqgrid-pager .ui-icon { background-image: url(../Themes/theme6/images/ui-icons_ffffff_256x240.png) !important; }

/* ===========================================================================
   Dark-theme scrollbars (grid body + any scrollable area). WebKit targets
   descendants' scrollbars; Firefox's scrollbar-color is inherited from body.
   =========================================================================== */
body.theme-dark { scrollbar-color: #3a4250 #161c24; scrollbar-width: thin; }
body.theme-dark ::-webkit-scrollbar,
body.theme-dark::-webkit-scrollbar { width: 12px; height: 12px; }
body.theme-dark ::-webkit-scrollbar-track,
body.theme-dark::-webkit-scrollbar-track { background: #161c24; }
body.theme-dark ::-webkit-scrollbar-thumb,
body.theme-dark::-webkit-scrollbar-thumb { background: #2a323d; border-radius: 6px; border: 3px solid #161c24; }
body.theme-dark ::-webkit-scrollbar-thumb:hover,
body.theme-dark::-webkit-scrollbar-thumb:hover { background: #3a4250; }
body.theme-dark ::-webkit-scrollbar-corner,
body.theme-dark::-webkit-scrollbar-corner { background: #161c24; }

/* jQuery-UI tabs (Create / Edit form pages) */
body.theme-dark .ui-tabs,
body.theme-dark .ui-tabs .ui-tabs-panel {
    background: #161c24 !important;
    color: #c7ced8 !important;
    border-color: #2a323d !important;
}

/* keep jQuery-UI sprite icons visible on dark (pager arrows, sort, menu wrench);
   FA-replaced dialog/datepicker icons are higher-specificity so they're unaffected */
body.theme-dark .ui-icon {
    background-image: url(../Themes/theme6/images/ui-icons_ffffff_256x240.png) !important;
}

/* ===========================================================================
   Shared nav-icon base (icons are injected by the Site.Master nav enhancer).
   Per-menu styling lives in the TOP MODULE NAV and SIDE NAV blocks below.
   =========================================================================== */
.navIcon { width: 18px; text-align: center; color: var(--brand); font-size: 14px; flex: 0 0 auto; }

/* ===========================================================================
   TOP MODULE NAV (#infaTopNav) — clean, self-contained rewrite.
   No jQuery-UI classes (the Infa.js stamping block is disabled); behaviour is
   the consolidated nav enhancer in Site.Master. Theme-aware: light surface in
   light theme, dark in dark. Active module = solid cyan pill. The brand/logo
   strip (#header) stays navy independently so the white logo PNG stays visible.
   =========================================================================== */
.infa-topnav-wrap { height: auto; overflow: visible; }

#infaTopNav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 5px 10px;
    width: 100%;
    box-sizing: border-box;
    background: #fff !important;                       /* light default */
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
}
#infaTopNav > li {
    position: relative;
    float: none !important;
    margin: 0;
    background: transparent !important;
    border: none !important;
    list-style: none;
}
#infaTopNav > li > a {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 5px 2px 5px 2px;
    border-radius: 8px;
    color: var(--hdr-text) !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
#infaTopNav > li > a img { display: none; }            /* hide any legacy gif arrow */
#infaTopNav > li > a .navIcon { color: var(--brand); font-size: 14px; }
#infaTopNav > li > a .navCaret { font-size: 10px; opacity: .55; margin-left: 1px; }
#infaTopNav > li > a:hover,
#infaTopNav > li.is-open > a { background: var(--brand-light) !important; color: var(--brand-dark) !important; }
#infaTopNav > li:hover > a .navIcon,
#infaTopNav > li.is-open > a .navIcon { color: var(--brand-dark); }

/* active module pill */
#infaTopNav > li.navActive > a { background: var(--brand) !important; color: #fff !important; }
#infaTopNav > li.navActive > a .navIcon,
#infaTopNav > li.navActive > a .navCaret { color: #fff !important; }

/* ---- fly-out dropdown panel (the <span> inside each <li>) ---- */
#infaTopNav > li > span {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1500;
    display: none;
    min-width: 210px;
    max-width: 460px;
    margin-top: 6px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    white-space: normal;
    font-size: 12px;
}
#infaTopNav > li:hover > span,
#infaTopNav > li:focus-within > span,
#infaTopNav > li.is-open > span { display: block; }
#infaTopNav > li > span a {
    display: block;
    padding: 7px 11px;
    margin: 1px 0;
    border-radius: 7px;
    color: var(--text) !important;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
#infaTopNav > li > span a:hover { background: var(--brand-light) !important; color: var(--brand-dark) !important; }

/* ---- dark theme ---- */
body.theme-dark #infaTopNav { background: #161c24 !important; border-bottom-color: #2a323d !important; }
body.theme-dark #infaTopNav > li > a { color: #c7ced8 !important; }
body.theme-dark #infaTopNav > li > a .navIcon { color: #5cc8ff; }
body.theme-dark #infaTopNav > li > a:hover,
body.theme-dark #infaTopNav > li.is-open > a { background: rgba(0, 174, 255, .16) !important; color: #9fd8ff !important; }
body.theme-dark #infaTopNav > li:hover > a .navIcon,
body.theme-dark #infaTopNav > li.is-open > a .navIcon { color: #9fd8ff; }
body.theme-dark #infaTopNav > li.navActive > a { background: var(--brand) !important; color: #fff !important; }
body.theme-dark #infaTopNav > li.navActive > a .navIcon,
body.theme-dark #infaTopNav > li.navActive > a .navCaret { color: #fff !important; }
body.theme-dark #infaTopNav > li > span { background: #161c24; border-color: #2a323d; }
body.theme-dark #infaTopNav > li > span a { color: #c7ced8 !important; }
body.theme-dark #infaTopNav > li > span a:hover { background: rgba(0, 174, 255, .16) !important; color: #9fd8ff !important; }

/* ===========================================================================
   SIDE NAV (#vmenu.infa-sidenav) — clean, self-contained rewrite.
   Migrated partials carry .infa-sidenav; accordion + active item + icons are
   the Site.Master nav enhancer (custom .is-open / .is-active classes, no ui-*).
   Selector is #vmenu.infa-sidenav so it wins over the legacy #vmenu rules during
   migration; once every partial is migrated the old #vmenu rules are removed.
   =========================================================================== */
#vmenu.infa-sidenav {
    list-style: none;
    margin: 0;
    padding: 6px;
    background: transparent;
    border: none;
    font-size: 12px;
}
#vmenu.infa-sidenav > li { margin: 0 0 3px 0; list-style: none; background: none; border: none; }

/* group header */
#vmenu.infa-sidenav > li > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--hdr-text) !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    transition: background .15s ease, color .15s ease;
}
#vmenu.infa-sidenav > li > a .navIcon { color: var(--brand) !important; width: 18px; text-align: center; font-size: 14px; flex: 0 0 auto; }
#vmenu.infa-sidenav > li > a .navCaret { margin-left: auto; font-size: 12px; opacity: .5; transition: transform .15s ease; }
#vmenu.infa-sidenav > li > a:hover,
#vmenu.infa-sidenav > li > a.is-open { background: var(--brand-light); color: var(--brand-dark) !important; }
#vmenu.infa-sidenav > li > a.is-open .navCaret { transform: rotate(180deg); }
/* keep the group icon high-contrast on hover / open (matches the top menu) */
#vmenu.infa-sidenav > li > a:hover .navIcon,
#vmenu.infa-sidenav > li > a.is-open .navIcon { color: var(--brand-dark) !important; }

/* sub-items */
#vmenu.infa-sidenav ul { list-style: none; margin: 2px 0 6px 0; padding: 0; }
#vmenu.infa-sidenav ul li { margin: 0; list-style: none; background: none; border: none; }
#vmenu.infa-sidenav ul li a {
    display: flex;
    align-items: center;
    padding: 7px 11px 7px 38px !important;   /* !important: guard against any legacy :hover padding override that shifted the row left */
    border-radius: 7px;
    color: var(--text) !important;
    font-weight: 500;
    font-size: 12px !important;
    text-decoration: none;
    position: relative;
    transition: background .12s ease, color .12s ease;
}
#vmenu.infa-sidenav ul li a::before {
    content: "\f105";                       /* fa-angle-right */
    font-family: FontAwesome;
    position: absolute; left: 20px;
    font-size: 11px; color: #98a2b3;
}
#vmenu.infa-sidenav ul li a:hover { background: var(--brand-light); color: var(--brand-dark) !important; }
#vmenu.infa-sidenav ul li a:hover::before { color: var(--brand); }

/* active item = solid cyan row */
#vmenu.infa-sidenav ul li.is-active > a { background: var(--brand); color: #fff !important; font-weight: 600; }
#vmenu.infa-sidenav ul li.is-active > a::before { color: #fff; }

/* dark theme */
body.theme-dark #vmenu.infa-sidenav > li > a { color: #c7ced8 !important; }
body.theme-dark #vmenu.infa-sidenav > li > a .navIcon { color: #5cc8ff !important; }
body.theme-dark #vmenu.infa-sidenav > li > a:hover,
body.theme-dark #vmenu.infa-sidenav > li > a.is-open { background: rgba(0, 174, 255, .16); color: #9fd8ff !important; }
body.theme-dark #vmenu.infa-sidenav > li > a:hover .navIcon,
body.theme-dark #vmenu.infa-sidenav > li > a.is-open .navIcon { color: #9fd8ff !important; }
body.theme-dark #vmenu.infa-sidenav ul li a { color: #c7ced8 !important; }
body.theme-dark #vmenu.infa-sidenav ul li a::before { color: #6b7480; }
body.theme-dark #vmenu.infa-sidenav ul li a:hover { background: rgba(0, 174, 255, .16); color: #9fd8ff !important; }
body.theme-dark #vmenu.infa-sidenav ul li a:hover::before { color: #9fd8ff; }
body.theme-dark #vmenu.infa-sidenav ul li.is-active > a { background: var(--brand); color: #fff !important; }
body.theme-dark #vmenu.infa-sidenav ul li.is-active > a::before { color: #fff; }

/* ===========================================================================
   SIDE NAV — enhancements (polish layered on the SIDE NAV block above):
   neutral group-icon tiles that fill with brand on hover/open, a tactile hover
   slide, a faint tray under the open group, and a raised glow on the active row.
   =========================================================================== */
/* group icons become rounded tiles (neutral by default for contrast) */
#vmenu.infa-sidenav > li > a .navIcon {
    width: 26px !important;
    height: 26px;
    border-radius: 7px;
    background: var(--hdr);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background .15s ease, color .15s ease;
}
#vmenu.infa-sidenav > li > a:hover .navIcon,
#vmenu.infa-sidenav > li > a.is-open .navIcon { background: var(--brand); color: #fff !important; }
body.theme-dark #vmenu.infa-sidenav > li > a .navIcon { background: rgba(255, 255, 255, .06); }
body.theme-dark #vmenu.infa-sidenav > li > a:hover .navIcon,
body.theme-dark #vmenu.infa-sidenav > li > a.is-open .navIcon { background: var(--brand); color: #fff !important; }

/* tactile hover: rows nudge right a touch */
#vmenu.infa-sidenav > li > a,
#vmenu.infa-sidenav ul li a { transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease; }
#vmenu.infa-sidenav > li > a:hover,
#vmenu.infa-sidenav ul li a:hover { transform: translateX(2px); }

/* open group: items sit in a faint tray so the nesting reads clearly */
#vmenu.infa-sidenav > li > a.is-open + ul {
    background: rgba(15, 23, 42, .03);
    border-radius: 8px;
    padding: 4px;
    margin: 2px 0 8px;
}
body.theme-dark #vmenu.infa-sidenav > li > a.is-open + ul { background: rgba(255, 255, 255, .04); }

/* active item: raised cyan pill with a soft brand glow (don't nudge it) */
#vmenu.infa-sidenav ul li.is-active > a,
#vmenu.infa-sidenav ul li.is-active > a:hover {
    box-shadow: 0 3px 10px rgba(0, 174, 255, .35);
    transform: none;
}

/* ===========================================================================
   BREADCRUMB (#infaBreadcrumb) — slim trail rendered INSIDE the top brand bar
   (right of the logo), populated client-side by the nav enhancer in Site.Master.
   Hidden when empty. margin-right:auto keeps the header actions pinned right.
   =========================================================================== */
#infaBreadcrumb:empty { display: none; }
#infaBreadcrumb {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin: 0 auto 0 var(--space-4); padding: 0 0 0 var(--space-4);
    border-left: 1px solid var(--line);
    font-size: var(--fs-sm); color: var(--text-muted);
    white-space: nowrap; overflow: hidden; min-width: 0; max-width: 50vw;
}
#infaBreadcrumb .bcHome { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); text-decoration: none; }
#infaBreadcrumb .bcHome:hover { color: var(--brand-dark); }
#infaBreadcrumb .bcSep { font-size: 10px; opacity: .5; }
#infaBreadcrumb .bcItem { color: var(--text-muted); }
#infaBreadcrumb .bcLeaf { color: var(--brand-dark); font-weight: 600; }
body.theme-dark #infaBreadcrumb .bcHome:hover,
body.theme-dark #infaBreadcrumb .bcLeaf { color: #9fd8ff; }

/* ===========================================================================
   PAGE HEADER (.pageHead) + primary button (.btnPrimary) — reusable list-page
   header: icon + title + subtitle on the left, stats + primary CTA on the right.
   =========================================================================== */
.pageHead {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-3);
    box-shadow: var(--shadow-sm);
}
.pageHeadInfo { display: flex; align-items: center; gap: var(--space-3); }
.pageHeadIcon {
    width: 42px; height: 42px; border-radius: var(--radius-md); flex: 0 0 auto;
    background: linear-gradient(135deg, var(--accent), var(--brand-dark));
    color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.pageHeadTitle { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); line-height: var(--lh-tight); }
.pageHeadSub { font-size: var(--fs-sm); color: var(--text-muted); }
.pageHeadActions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pageHeadStat { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }

/* ---- Payment-unification workspace tab strip (PV_PaymentWorkspaceTabs.ascx) ---- */
.payWsTabs {
    display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
    border-bottom: 1px solid var(--line); margin: 0 0 var(--space-3);
}
.payWsTabs .payWsTitle {
    font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-right: var(--space-3);
    display: inline-flex; align-items: center; gap: 6px;
}
.payWsTabs .payWsTitle .fa { color: var(--brand); }
.payWsTab {
    padding: 9px 16px; color: var(--text-muted); text-decoration: none;
    border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
    font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.payWsTab .fa { font-size: var(--fs-sm); opacity: .8; }
.payWsTab:hover:not(.is-active) { background: var(--bg-subtle); color: var(--text); }
.payWsTab.is-active {
    background: var(--surface); color: var(--brand-dark); font-weight: 600;
    border-color: var(--line); border-bottom-color: var(--surface); margin-bottom: -1px;
}

.btnPrimary {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--brand); color: #fff !important;
    border: 1px solid var(--brand); border-radius: 8px;
    padding: var(--space-2) var(--space-4); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
    text-decoration: none;
    transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
}
.btnPrimary:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: var(--shadow-sm); color: #fff !important; }
.btnPrimary:active { transform: scale(.97); }
.btnPrimary i { font-size: var(--fs-sm); }

/* bootstrap.css forces -webkit-appearance:button on submit/button inputs (specificity 0,1,1),
   which keeps native chrome and fights our custom fills (e.g. dialog Save = input[type=submit]).
   Reset it for our button classes — element+class ties bootstrap and wins by load order. */
input.btnPrimary, input.btnGhost, input.btnDanger,
button.btnPrimary, button.btnGhost, button.btnDanger, button.lateAlert {
    -webkit-appearance: none;
    appearance: none;
}
/* <input type=submit|button> renders its value as intrinsic content, which the display:inline-flex
   on .btnPrimary/.btnGhost/.btnDanger does NOT lay out — so the value label (e.g. dialog Save/Cancel)
   vanishes. Inputs can't carry an <i> icon child anyway, so use inline-block for them. */
input.btnPrimary, input.btnGhost, input.btnDanger { display: inline-block; text-align: center; }
/* ghost button used as a toggle/filter (gets .ui-state-highlight when active, e.g. TripCancel All/Scrap/ReIssue) */
.btnGhost.ui-state-highlight { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark) !important; }

/* ---- Live Operations Cockpit (Dashboard/Live): a "live" pulse dot + an as-of clock in the page head ---- */
.liveClock { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.liveDot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; vertical-align: middle; animation: livePulse 2s infinite; }
.liveDot.paused { background: var(--text-faint); animation: none; }
/* Real-time connection status chip (cockpit page head). rgba backgrounds → works in light + dark. */
.rtChip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; line-height: 1; border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); white-space: nowrap; }
.rtChip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; }
.rtChip.rt-connected { color: var(--success); border-color: rgba(0,170,90,.35); background: rgba(0,170,90,.12); }
.rtChip.rt-connected::before { background: var(--success); animation: livePulse 2s infinite; }
.rtChip.rt-connecting, .rtChip.rt-reconnecting { color: var(--warn); border-color: rgba(214,158,46,.4); background: rgba(214,158,46,.14); }
.rtChip.rt-connecting::before, .rtChip.rt-reconnecting::before { background: var(--warn); animation: livePulse 1s infinite; }
.rtChip.rt-offline { color: var(--text-muted); border-color: var(--line); background: var(--surface); }
.rtChip.rt-offline::before { background: var(--text-faint); }
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
    70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---- Live truck board: kanban lanes (Scheduled / En Route / At Site / Returning) ---- */
.trackBoard { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.trackLane { background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; min-height: 110px; }
.trackLaneHead { padding: 8px 12px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); border-bottom: 2px solid var(--line); display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.trackLane[data-lane="scheduled"] .trackLaneHead { border-bottom-color: var(--text-faint); }
.trackLane[data-lane="enroute"] .trackLaneHead { border-bottom-color: var(--brand); }
.trackLane[data-lane="atsite"] .trackLaneHead { border-bottom-color: var(--success); }
.trackLane[data-lane="returning"] .trackLaneHead { border-bottom-color: var(--warn); }
.trackCount { background: var(--brand-light); color: var(--brand-dark); border-radius: var(--radius-pill); padding: 1px 8px; font-size: 11px; font-weight: 700; }
.trackLaneBody { padding: 8px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.trackCard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; box-shadow: var(--shadow-xs); }
.trackCard.s-scheduled { border-left-color: var(--text-faint); }
.trackCard.s-enroute { border-left-color: var(--brand); }
.trackCard.s-atsite { border-left-color: var(--success); }
.trackCard.s-returning { border-left-color: var(--warn); }
.trackCard .tcVeh { font-weight: 700; color: var(--text); font-size: var(--fs-sm); }
.trackCard .tcMeta { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trackCard .tcFoot { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; }
.trackCard .tcQty { color: var(--text); font-weight: 600; }
.trackCard .tcMins { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.trackCard.late .tcMins { color: var(--danger); font-weight: 700; }
.trackCard.late { border-left-color: var(--danger); background: rgba(224,36,36,.06); }
.tcLate { float: right; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--danger); border-radius: 4px; padding: 1px 5px; line-height: 1.45; }
.tcLate .fa { font-size: 9px; }
/* late-trip alert badge (cockpit page head) */
.lateAlert { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; color: #fff; background: var(--danger); border: 1px solid var(--danger); white-space: nowrap; animation: latePulse 1.4s infinite; }
.lateAlert:hover { filter: brightness(1.06); }
.lateAlert .fa { font-size: 12px; }
@keyframes latePulse {
    0%   { box-shadow: 0 0 0 0 rgba(224,36,36,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(224,36,36,0); }
    100% { box-shadow: 0 0 0 0 rgba(224,36,36,0); }
}
@media (max-width: 900px) { .trackBoard { grid-template-columns: 1fr 1fr; } }

/* same header rendered INSIDE a jqGrid top toolbar (#t_grid + .gridHead) */
#t_grid.gridHead {
    display: flex !important;
    align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    height: auto !important;
    box-sizing: border-box !important;   /* include padding in the width jqGrid sets, so the toolbar matches the grid width */
    padding: 12px 16px !important;
    text-align: left;
    white-space: normal !important;
    overflow: visible !important;
    background: var(--surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 8px 8px 0 0;
}

/* secondary / ghost button (pairs with .btnPrimary) */
.btnGhost {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--surface); color: var(--text) !important;
    border: 1px solid var(--line); border-radius: 8px;
    padding: var(--space-2) var(--space-4); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
    text-decoration: none;
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.btnGhost:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark) !important; }
.btnGhost:active { transform: scale(.97); }
body.theme-dark .btnGhost { background: #1e2630; border-color: #2a323d; color: #c7ced8 !important; }
body.theme-dark .btnGhost:hover { background: rgba(0, 174, 255, .16); border-color: var(--brand); color: #9fd8ff !important; }

/* ===========================================================================
   FORM ACTION BAR (.formActions) — sticky Save/Cancel footer for long forms,
   right-aligned modern buttons. Add the class to the existing action wrapper.
   =========================================================================== */
.formActions {
    position: sticky; bottom: 0; z-index: 50;
    display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2);
    background: var(--surface);
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
    padding: var(--space-3) var(--space-4) !important;
    margin-top: var(--space-3);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.formActions .button { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.formActions input[type="submit"],
.formActions input[type="button"] { margin: 0; }

/* ===========================================================================
   FORM SECTION CARDS (.formCard) — each detailedViewHeader + its rows are
   grouped into a card at runtime (cardify script on the page). The float-based
   cells (24.5% each) keep their layout inside .formCardBody.
   =========================================================================== */
.formCard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: 0 0 var(--space-4);
    overflow: hidden;
}
.formCardHead {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-base); font-weight: 700; color: var(--text);
    background: var(--hdr);
    border-bottom: 1px solid var(--line);
}
/* contain floated header controls (e.g. the allocation grid's Method/Allocate-all/Clear
   span uses float:right) so the float can't bleed into the body and squeeze the table. */
.formCardHead::after { content: ""; display: block; clear: both; }
.formCardBody { padding: 10px 8px 4px; }
.formCardBody::after { content: ""; display: table; clear: both; }
/* wide card: hold a fixed-width legacy table/grid (e.g. the shared PV_Product
   line-items partial) -- let it scroll horizontally inside the card instead of
   being clipped by .formCard{overflow:hidden} or bursting the page. */
.formCard-wide { overflow: visible; }
.formCard-wide > .formCardBody { overflow-x: auto; }
/* a responsive .tbl (e.g. the allocate-to-invoices grid) must fill the wide card even
   though the body is an overflow-x:auto scroll container -- min-width:100% stops the table
   collapsing to its content width inside the BFC. (The legacy fixed PV_Product grid is not
   a .tbl, so it still scrolls.) */
.formCard-wide > .formCardBody > table.tbl { width: 100%; min-width: 100%; }

/* group heading (former tab title) when a tabbed form is flattened to one page */
.formGroupTitle {
    font-size: 15px; font-weight: 700; color: var(--text);
    margin: var(--space-1) 0 var(--space-3); padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.formGroupTitle::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 48px; height: 3px; background: var(--brand); border-radius: 2px;
}

/* ===========================================================================
   Detailed-view form DENSITY — reclaim wasted vertical space (esp. on the
   flattened Create/Edit forms): drop the legacy 465px min-height reservation,
   tighten the inner margins and the card spacing. Scoped to content-column
   forms + the card classes, so list/grid pages are unaffected.
   =========================================================================== */
.settingscotent .content { min-height: 0 !important; }
.settingscotent .marg { margin: 10px 14px !important; }
.formCard { margin-bottom: var(--space-3); }
.formCardHead { padding: var(--space-2) var(--space-3); }
.formCardBody { padding: 6px 6px 2px; }
.formGroupTitle { margin-bottom: var(--space-2); }

/* ===========================================================================
   RECORD HERO (.recordHero) — Zoho-style details header: avatar + name +
   key-field highlights + actions. Used on detail/view pages.
   =========================================================================== */
.recordHero {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-3);
}
.recordHeroMain { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.recordAvatar {
    width: 54px; height: 54px; border-radius: var(--radius-lg); flex: 0 0 auto;
    background: linear-gradient(135deg, var(--accent), var(--brand-dark));
    color: #fff; font-weight: 700; font-size: 22px; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center;
}
.recordHeroText { min-width: 0; }
.recordName { margin: 0 0 var(--space-2); font-size: var(--fs-xl); font-weight: 700; color: var(--text); line-height: var(--lh-tight); }
.recordHighlights { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.recChip { display: inline-flex; flex-direction: column; line-height: 1.35; }
.recChipLabel { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.recChip > i { font-style: normal; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.recordHeroActions { display: flex; align-items: center; gap: var(--space-2); }
.recBadge { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; }
.recBadge-on { background: #e6f7ee; color: #00a35a; }
.recBadge-off { background: #fdecec; color: #e02424; }
body.theme-dark .recBadge-on { background: rgba(0, 170, 90, .18); color: #4ade80; }
body.theme-dark .recBadge-off { background: rgba(224, 36, 36, .18); color: #ff6b6b; }

/* ===========================================================================
   RECORD LAYOUT — Zoho-style left summary panel + main detail column.
   =========================================================================== */
.recordLayout { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.recordLayout > form { flex: 1 1 520px; min-width: 0; }
.recordSummary:empty { display: none; }
.recordSummary {
    flex: 0 0 290px; max-width: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-sm); overflow: hidden;
    position: sticky; top: 100px;
}
.recordSummaryHead { padding: var(--space-3) var(--space-4); font-weight: 700; font-size: var(--fs-base); color: var(--text); background: var(--hdr); border-bottom: 1px solid var(--line); }
.recordSummary .sumRow { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.recordSummary .sumRow:last-child { border-bottom: none; }
.recordSummary .sumLabel { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 2px; }
.recordSummary .sumVal { font-size: var(--fs-base); color: var(--text); font-weight: 500; word-break: break-word; }

/* ===========================================================================
   FORM SECTION NAV (.formNav) — SAP-Fiori / Zoho / Dynamics style sticky
   anchor rail listing the form sections, with click-to-scroll + scroll-spy.
   =========================================================================== */
.formNav {
    flex: 0 0 220px; max-width: 100%;
    align-self: flex-start;
    position: sticky; top: 100px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.formNav:empty { display: none; }
.formNavHead { padding: var(--space-3) var(--space-4); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.formNavGroup { padding: var(--space-2) var(--space-4) 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 700; }
.formNavItem {
    display: block; padding: var(--space-2) var(--space-4) var(--space-2) 17px;
    color: var(--text); text-decoration: none; font-size: var(--fs-base);
    border-left: 3px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.formNavItem:hover { background: var(--brand-light); color: var(--brand-dark) !important; }
.formNavItem.is-active { background: var(--brand-light); color: var(--brand-dark) !important; border-left-color: var(--brand); font-weight: 600; }
body.theme-dark .formNavItem { color: #c7ced8; }
body.theme-dark .formNavItem:hover,
body.theme-dark .formNavItem.is-active { background: rgba(0, 174, 255, .16); color: #9fd8ff !important; }

/* ===========================================================================
   QUOTE create/edit (.quoteForm) — line-item form: lay out the "Item Details"
   inline radios in the card head, keep the wide line-items grid UNcropped inside
   its section card, and give the legacy grid + totals + Add-Product a modern
   look. Scoped to .quoteForm so nothing else is affected. The grid's float-based
   percentage widths are left intact (the calc JS depends on them).
   =========================================================================== */
.quoteForm .formCardHead { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.quoteForm .formCardTitle { font-size: var(--fs-base); font-weight: 700; }
.quoteForm .formCardHeadCtrls { margin-left: auto; font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); display: inline-flex; align-items: center; gap: 2px; }
.quoteForm .formCardHeadCtrls input[type=radio] { margin: 0 3px 0 10px; vertical-align: middle; }
/* the line-items / general-design card must never clip its wide grid + dropdowns */
.quoteForm .formCard-wide { overflow: visible; }
.quoteForm .formCard-wide > .formCardBody { overflow-x: auto; }
/* modern line-items grid: header row + row separators + totals emphasis */
.quoteForm .formCard-wide .grid,
.quoteForm .formCard-wide .grid_a,
.quoteForm .formCard-wide .grid_b { background: var(--hdr); }
.quoteForm .formCard-wide .treeTable1 { color: var(--text); font-weight: 600; }
.quoteForm #Products > .width100 { border-bottom: 1px solid var(--line); }
.quoteForm .netarea .padtrgt { font-weight: 600; color: var(--text-muted); }
.quoteForm .netareargt .padtrgt { font-weight: 700; color: var(--text); }
.quoteForm #spnGrandTotal { color: var(--brand-dark); font-weight: 800; }
.quoteForm #AddProduct {
    background: var(--brand-light); color: var(--brand-dark);
    border: 1px solid var(--brand); border-radius: 8px;
    padding: 6px 14px; cursor: pointer; font-weight: 600;
}
.quoteForm #AddProduct:hover { background: var(--brand); color: #fff; }
body.theme-dark .quoteForm .formCard-wide .grid,
body.theme-dark .quoteForm .formCard-wide .grid_a,
body.theme-dark .quoteForm .formCard-wide .grid_b { background: #1a212b; }
body.theme-dark .quoteForm #Products > .width100 { border-bottom-color: #2a323d; }
body.theme-dark .quoteForm #AddProduct { background: rgba(0, 174, 255, .16); color: #9fd8ff; border-color: #2f6f93; }

/* ===========================================================================
   FOUNDATION v3 — elevation polish, keyboard focus, reduced motion.
   Tactical depth bump on the surfaces that actually float (dialogs, dropdowns,
   sticky header) — not everything — plus accessibility niceties. All additive,
   built on the token scales at the top.
   =========================================================================== */
.ui-dialog { box-shadow: var(--shadow-lg) !important; }
.ui-menu, .ui-autocomplete, .userDropdown { box-shadow: var(--shadow-md) !important; }
#HeaderMenu { box-shadow: var(--shadow-sm); }
.portlet { transition: box-shadow var(--t-base), transform var(--t-base); }
.portlet:hover { box-shadow: var(--shadow); }

/* keyboard focus ring — only for keyboard users (mouse focus stays clean).
   @supports-guarded so legacy engines keep their native :focus outline. */
@supports selector(:focus-visible) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible,
    .btnPrimary:focus-visible,
    .btnGhost:focus-visible,
    .userChip:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
        box-shadow: var(--focus-ring);
    }
}

/* honour reduced-motion: disable animations/transitions for users who ask */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================================================
   TOAST NOTIFICATIONS (#infaToastWrap / .infaToast) — modern non-blocking
   replacement for the old #dialog-message popup (ShowMessageDialog in Infa.js).
   Token-driven, so it auto-themes light/dark. + a slim global AJAX load bar.
   =========================================================================== */
#infaToastWrap {
    position: fixed; top: 64px; right: 20px; z-index: 11000;
    display: flex; flex-direction: column; gap: var(--space-2);
    width: 360px; max-width: calc(100vw - 40px); pointer-events: none;
}
.infaToast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: var(--space-2);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-left: 4px solid var(--brand);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-base); line-height: 1.4;
    opacity: 0; transform: translateX(24px);
    transition: opacity var(--t-base), transform var(--t-base);
}
.infaToast.is-in { opacity: 1; transform: none; }
.infaToast.is-out { opacity: 0; transform: translateX(24px); }
.infaToastIcon { font-size: var(--fs-lg); flex: 0 0 auto; margin-top: 1px; }
.infaToastMsg { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.infaToastMsg .ui-icon { display: none; }   /* drop any legacy jQuery-UI icon a caller prepended */
.infaToastClose { background: none; border: 0; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.infaToastClose:hover { color: var(--text); }
.infaToast-success { border-left-color: var(--success); }
.infaToast-success .infaToastIcon { color: var(--success); }
.infaToast-error { border-left-color: var(--danger); }
.infaToast-error .infaToastIcon { color: var(--danger); }
.infaToast-info { border-left-color: var(--brand); }
.infaToast-info .infaToastIcon { color: var(--brand); }

#infaLoadBar {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 12000;
    pointer-events: none; opacity: 0; transition: opacity .2s ease; overflow: hidden;
}
#infaLoadBar.is-on { opacity: 1; }
#infaLoadBar::before {
    content: ""; position: absolute; top: 0; height: 100%; width: 35%;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
    animation: infaLoadSlide 1s linear infinite;
}
@keyframes infaLoadSlide { from { left: -35%; } to { left: 100%; } }

/* ===========================================================================
   MODERN CONFIRM (.infaConfirmOverlay / .infaConfirm) — replaces the jQuery-UI
   #dialog-message delete confirm (infaConfirm in Infa.js). + .btnDanger for the
   destructive action. Token-driven so it auto-themes light/dark.
   =========================================================================== */
.infaConfirmOverlay {
    position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: 11500;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(16, 24, 40, .45);
    opacity: 0; transition: opacity var(--t-base);
}
.infaConfirmOverlay.is-in { opacity: 1; }
.infaConfirm {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3);
    width: 420px; max-width: 100%;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: var(--space-5);
    transform: translateY(8px) scale(.98); transition: transform var(--t-base);
}
.infaConfirmOverlay.is-in .infaConfirm { transform: none; }
.infaConfirmIcon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg); background: var(--brand-light); color: var(--brand-dark);
}
.infaConfirm-danger .infaConfirmIcon { background: var(--danger-bg); color: var(--danger); }
body.theme-dark .infaConfirm-danger .infaConfirmIcon { background: rgba(224, 36, 36, .18); }
.infaConfirmBody { flex: 1 1 220px; min-width: 0; }
.infaConfirmTitle { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--space-1); }
.infaConfirmMsg { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.45; word-break: break-word; }
.infaConfirmActions { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* destructive primary button (pairs with .btnGhost) */
.btnDanger {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--danger); color: #fff !important;
    border: 1px solid var(--danger); border-radius: 8px;
    padding: var(--space-2) var(--space-4); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
    text-decoration: none;
    transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
}
.btnDanger:hover { background: #c81e1e; border-color: #c81e1e; box-shadow: var(--shadow-sm); }
.btnDanger:active { transform: scale(.97); }

/* ===========================================================================
   GRID EMPTY-STATE (.infaGridEmpty) — overlay shown inside a jqGrid body when it
   loads 0 rows (infaGridEmptyState in Infa.js). Token-driven (auto-dark).
   =========================================================================== */
.infaGridEmpty {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-2); padding: var(--space-4);
    color: var(--text-muted); text-align: center; pointer-events: none;
}
.infaGridEmpty .fa { font-size: 34px; opacity: .45; }
.infaGridEmptyText { font-size: var(--fs-md); }

/* ===========================================================================
   DASHBOARD LANDING (GettingStarted) — the module launcher (#nav) restyled as a
   modern responsive card grid. The legacy sprite icon (.infa-icon) is swapped for
   Font Awesome glyphs via ::before (no markup change); the dated jQuery hover
   animation was removed from the page so CSS hover drives the lift.
   =========================================================================== */
#wrapper { z-index: auto !important; }
.content2 { min-height: 0 !important; }
#nav { margin: var(--space-4) !important; width: auto !important; }
#nav ul {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-4); padding: 0 !important; margin: 0;
}
#nav li {
    float: none !important; width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important; border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
#nav li:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
    border-color: var(--brand) !important;
    color: inherit !important;
}
#nav li a, #nav li a:hover { color: var(--text) !important; }
#nav li a.infa-icon {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
    width: auto !important; height: auto !important; float: none !important; margin: 0 !important;
    padding: var(--space-6) var(--space-3) !important;
    background: none !important;
    font-size: var(--fs-md) !important; font-weight: 600; line-height: 1.3 !important;
}
#nav li a.infa-icon br { display: none; }
#nav li a.infa-icon div { text-indent: 0 !important; }
#nav li a.infa-icon::before {
    font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 28px; line-height: 1;
    color: var(--brand);
    width: 58px; height: 58px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-light);
    transition: background var(--t-base), color var(--t-base);
}
#nav li:hover a.infa-icon::before { background: var(--brand); color: #fff; }
#nav li a.dashboard::before { content: "\f0e4"; }
#nav li a.sales::before { content: "\f0d6"; }
#nav li a.marketing::before { content: "\f0a1"; }
#nav li a.purchase::before { content: "\f07a"; }
#nav li a.production::before { content: "\f085"; }
#nav li a.quality::before { content: "\f0c3"; }
#nav li a.inventory::before { content: "\f187"; }
#nav li a.dispatch::before { content: "\f0d1"; }
#nav li a.gps::before { content: "\f041"; }
#nav li a.fleet::before { content: "\f018"; }
#nav li a.asset::before { content: "\f02c"; }
#nav li a.hrm::before { content: "\f0c0"; }
#nav li a.finance::before { content: "\f09d"; }
#nav li a.communication::before { content: "\f086"; }
#nav li a.reports::before { content: "\f080"; }
#nav li a.setting::before { content: "\f013"; }

/* ===========================================================================
   LOGIN (Account/LogOn) — FULL-SCREEN split: brand hero fills the left, the
   sign-in panel is fixed-width on the right. `.infaLogin` is position:fixed so it
   escapes the legacy .content wrappers and covers the whole viewport; the login
   page adds body.infaLoginPage (kills background scroll). Token-driven (auto-dark);
   the brand hero keeps a fixed gradient for contrast.
   =========================================================================== */
body.infaLoginPage { overflow: hidden; }
.infaLogin {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; background: var(--app-bg);
}
.infaLoginBrand {
    flex: 1 1 auto; min-width: 0; overflow-y: auto;
    display: flex; align-items: center; padding: 56px 6vw;
    background: linear-gradient(140deg, var(--brand-dark) 0%, #06304a 100%); color: #fff;
}
.infaLoginBrandInner { width: 100%; max-width: 520px; margin: auto 0; }
.infaLoginWordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0 0 30px; }
.infaWmText {
    font-size: 32px; font-weight: 800; letter-spacing: 3px; line-height: 1;
    background: linear-gradient(95deg, #ffffff 0%, #a9e9ff 55%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #fff;
}
.infaLoginTagline { margin: 0 0 16px; font-size: 34px; font-weight: 800; line-height: 1.15; color: #fff; }
.infaLoginLead { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .85) !important; max-width: 460px; }
.infaLoginEyebrow {
    display: inline-block; margin-bottom: 18px; padding: 5px 12px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--accent); background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-pill);
}
.infaLoginCaps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 30px; }
.infaCap {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-md); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.infaCap:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.infaCap > i { flex: 0 0 auto; width: 22px; margin-top: 2px; font-size: 18px; text-align: center; color: var(--accent); }
.infaCap strong { display: block; font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.infaCap span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .75) !important; }
@media (max-width: 980px) { .infaLoginCaps { grid-template-columns: 1fr; } }
.infaLoginContact { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; }
.infaLoginContact a, .infaLoginContact span { color: rgba(255, 255, 255, .9); text-decoration: none; }
.infaLoginContact a { cursor: pointer; }
.infaLoginContact a:hover { color: #fff; text-decoration: underline; }
.infaLoginContact i { margin-right: 7px; color: var(--accent); }

.infaLoginPanel {
    flex: 0 0 460px; max-width: 100%;
    display: flex; flex-direction: column; overflow-y: auto;
    background: var(--surface); border-left: 1px solid var(--line);
}
.infaLoginForm { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 40px 52px; }
.infaLoginForm > * { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
.infaLoginBadge {
    width: 56px !important; height: 56px; margin: 0 auto 18px !important; border-radius: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 23px; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--brand));
    box-shadow: 0 10px 24px rgba(0, 174, 255, .35);
}
.infaLoginHeading { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--text); text-align: center; }
.infaLoginSub { margin: 0 0 28px; font-size: 14px; color: var(--text-muted); text-align: center; }
.infaLoginSub em { font-style: normal; font-weight: 600; color: var(--brand-dark); }
.infaField { display: block; margin-bottom: 16px; }
.infaFieldLabel { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.infaInputWrap { position: relative; display: block; }
.infaInputWrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 15px; pointer-events: none; }
/* Target the input by POSITION (.infaInputWrap input), not by class — a global
   Infa.js handler does `this.className='detailedViewTextBoxOn'` on password focus,
   which wipes the .infaInput class; a class selector would then stop matching (the
   password reverted to the old style on click). This (0,2,1) also beats Site.css's
   input[type="text"|"password"] (0,1,1) + the page's .detailedViewTextBox(On) style. */
.infaLoginPanel .infaInputWrap input {
    width: 100% !important; box-sizing: border-box !important; height: auto !important; margin: 0 !important;
    padding: 12px 40px 12px 38px !important;
    border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
    font: 400 var(--fs-md)/1.4 var(--font-sans) !important;
    background: var(--surface) !important; color: var(--text) !important;
    box-shadow: none !important;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.infaLoginPanel .infaInputWrap input:focus { border-color: var(--brand) !important; background: var(--surface) !important; box-shadow: var(--focus-ring) !important; outline: none !important; }
body.theme-dark .infaLoginPanel .infaInputWrap input { background: #0f141a !important; color: #e8edf3 !important; border-color: #2a323d !important; }
body.theme-dark .infaLoginPanel .infaInputWrap input:focus { background: #0f141a !important; }
.infaPwToggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 8px; background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 14px; line-height: 1; }
.infaPwToggle:hover { color: var(--brand); }
.infaLoginBtn {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 8px !important; padding: 13px !important;
    font-size: var(--fs-md) !important; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--brand)) !important;
    border: none !important; border-radius: var(--radius) !important;
    box-shadow: 0 8px 20px rgba(0, 174, 255, .35);
    transition: transform var(--t-fast), box-shadow var(--t-base), filter var(--t-base);
}
.infaLoginBtn:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(0, 174, 255, .45); transform: translateY(-1px); color: #fff !important; }
.infaLoginBtn:active { transform: translateY(0); }
.infaLoginBtn i { font-size: 12px; }
.infaLoginAlert { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); font-size: 13px; }
body.theme-dark .infaLoginAlert { background: rgba(224, 36, 36, .18); }
.infaLoginValidation { margin-top: 12px; color: var(--danger); font-size: 13px; }
.infaLoginValidation ul { margin: 0; padding-left: 18px; }
.infaLoginFoot { flex: 0 0 auto; padding: 16px 52px 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-muted); text-align: center; }
.infaLoginFoot a { color: var(--brand-dark); text-decoration: none; }
.infaLoginFoot a:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .infaLoginBrand { display: none; }
    .infaLoginPanel { flex: 1 1 auto; border-left: none; }
}

/* ===========================================================================
   Phase 6 - Dashboard: filter bar, KPI strip, widget grid.
   Token-driven -> auto light/dark (no per-component dark rule needed).
   Used by Views/Dashboard/DashboardSales.aspx. Reuses the existing .portlet
   card (Phase 5) for chart widgets; this adds the KPI cards + filter + grid.
   =========================================================================== */

/* --- filter controls (live in a .pageHead actions area) --- */
.dashFilter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.dashField { display: flex; flex-direction: column; gap: 4px; }
.dashField > label {
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
/* scope by ancestor+element, NOT the input's own class (a legacy focus handler swaps text-input classNames) */
.dashFilter input[type="text"],
.dashFilter select {
    height: 32px; min-width: 132px; box-sizing: border-box; padding: 0 10px;
    font-size: var(--fs-sm); color: var(--text);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.dashFilter input[type="text"]:focus,
.dashFilter select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* --- KPI strip --- */
.kpiGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
.kpiCard {
    position: relative; display: flex; align-items: center; gap: var(--space-3); overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-base), transform var(--t-base);
}
.kpiCard:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kpiCard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.kpiIcon {
    flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--surface-2); color: var(--brand);   /* surface-2 themes cleanly in dark; status colour stays on the glyph */
}
.kpiBody { min-width: 0; }
.kpiLabel {
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.kpiVal {
    font-size: var(--fs-xl); font-weight: 700; color: var(--text); line-height: 1.15; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpiUnit { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; margin-left: 3px; }
/* per-metric accent: coloured rail + glyph; icon background stays neutral */
.kpiCard.k-vol::before { background: var(--success); } .kpiCard.k-vol .kpiIcon { color: var(--success); }
.kpiCard.k-val::before { background: var(--brand);   } .kpiCard.k-val .kpiIcon { color: var(--brand); }
.kpiCard.k-asp::before { background: var(--info);    } .kpiCard.k-asp .kpiIcon { color: var(--info); }
.kpiCard.k-ob::before  { background: var(--warn);    } .kpiCard.k-ob  .kpiIcon { color: var(--warn); }
.kpiCard.k-rec::before { background: var(--danger);  } .kpiCard.k-rec .kpiIcon { color: var(--danger); }

/* --- responsive widget grid (replaces the legacy .width50 floats) --- */
.dashGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.dashGrid > .dashCell { min-width: 0; }      /* let charts shrink instead of overflowing the cell */
.dashGrid .portlet { margin: 0; }            /* the grid owns the gap */
.dashFull { margin-bottom: var(--space-4); }
/* FA icon prefix inside the (already-themed) portlet header */
.portlet-header > .fa { margin-right: 6px; color: var(--brand); }

@media (max-width: 1100px) { .kpiGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .dashGrid { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .kpiGrid { grid-template-columns: 1fr; } }

/* --- Cockpit: KPI deltas, mini-tables, aging/funnel bars, alerts (token-driven) --- */
.kpiDelta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 700; margin-top: 3px; }
.kpiDelta .fa { font-size: 10px; }
.kpiDelta.good { color: var(--success); }   /* coloured by goodness, arrow shows direction */
.kpiDelta.bad  { color: var(--danger); }
.kpiDelta.flat { color: var(--text-faint); }
.kpiSub { font-size: 10px; color: var(--text-faint); margin-top: 3px; }

.cockTable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cockTable th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cockTable td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); color: var(--text); }
.cockTable td.num, .cockTable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cockTable tr:hover td { background: var(--surface-2); }

.agingRow { display: grid; grid-template-columns: 70px 1fr 120px; align-items: center; gap: 10px; margin: 9px 0; font-size: var(--fs-sm); color: var(--text); }
.agingTrack { height: 10px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.agingFill { height: 100%; border-radius: var(--radius-pill); }
.agingRow .num { text-align: right; font-variant-numeric: tabular-nums; }

.funnelRow { display: grid; grid-template-columns: 90px 1fr 160px; align-items: center; gap: 10px; margin: 11px 0; font-size: var(--fs-sm); color: var(--text); }
.funnelTrack { height: 22px; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.funnelFill { height: 100%; background: var(--brand); border-radius: var(--radius); }
.funnelRow .num { text-align: right; font-variant-numeric: tabular-nums; }

.alertCols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
.alertCol h4 { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text); display: flex; align-items: center; gap: 6px; }
.alertCol.warn h4 .fa { color: var(--warn); }
.alertCol.danger h4 .fa { color: var(--danger); }
.alertCol.info h4 .fa { color: var(--info); }
.alertItem { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.alertItem .an { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.alertItem .ad { color: var(--text-muted); font-size: 10px; }
.alertItem .av { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-sm); }
.cockEmpty { color: var(--text-faint); font-size: var(--fs-sm); padding: 8px 0; }
@media (max-width: 900px) { .alertCols { grid-template-columns: 1fr; } }

/* ---- jqplot HTML overlay theming (the canvas layer is themed in Infa.js via infaPlot).
   theme-modern.css loads last in the css bundle, so these beat jqplot.css by source order. ---- */
.jqplot-target { color: var(--text-muted); }
.jqplot-axis { color: var(--text-muted); }
.jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick { color: var(--text-muted); }
.jqplot-axis-label, .jqplot-xaxis-label, .jqplot-yaxis-label { color: var(--text); }
.jqplot-point-label { color: var(--text-muted); }
.jqplot-title { color: var(--text); }
table.jqplot-table-legend { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,.12)); }
table.jqplot-table-legend td { color: var(--text); border: 0; }
.jqplot-cursor-tooltip, .jqplot-highlighter-tooltip { background: var(--surface); border-color: var(--line); color: var(--text); }

/* ---- Home workspace quick-launch cards (Home/Index) — token-driven, hover-lift ---- */
.launchRow { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); }
.launchCard {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); color: var(--text) !important; text-decoration: none !important;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.launchCard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); color: var(--text) !important; }
.launchCard .lcIcon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-light); color: var(--brand); font-size: 20px;
    transition: background var(--t-base), color var(--t-base);
}
.launchCard:hover .lcIcon { background: var(--brand); color: #fff; }
.launchCard .lcBody { min-width: 0; flex: 1 1 auto; }
.launchCard .lcTitle { display: block; font-weight: 700; font-size: var(--fs-md); color: var(--text); }
.launchCard .lcSub { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.launchCard .lcGo { flex: 0 0 auto; color: var(--text-faint); font-size: 16px; }
.launchCard:hover .lcGo { color: var(--brand); }
.homeWelcome { text-align: center; padding: 44px 20px; }
.homeWelcome .hwTitle { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.homeWelcome .hwSub { font-size: var(--fs-md); color: var(--text-muted); margin: 0; }

/* ---- My Workspace (Home/Index): clickable KPI tiles + compact operational lists ---- */
a.kpiCard { text-decoration: none !important; cursor: pointer; }
a.kpiCard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.wsChip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--brand-light); color: var(--brand); }
.wsChip.good { background: rgba(34, 197, 94, .14); color: var(--success); }
.wsChip.warn { background: rgba(245, 158, 11, .16); color: var(--warn); }
.wsList { display: flex; flex-direction: column; }
.wsItem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.wsItem:last-child { border-bottom: 0; }
.wsItem .wsIco { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand); flex: 0 0 auto; font-size: 14px; }
.wsItem.t-appointment .wsIco { background: rgba(0, 174, 255, .14); color: var(--brand); }
.wsItem.t-task .wsIco { background: rgba(139, 92, 246, .16); color: var(--info); }
.wsItem.t-event .wsIco { background: rgba(245, 158, 11, .16); color: var(--warn); }
.wsItem .wsMain { flex: 1 1 auto; min-width: 0; }
.wsItem .wsTitle { color: var(--text); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsItem .wsMeta { color: var(--text-muted); font-size: 11px; }
.wsItem .wsRight { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wsItem.overdue .wsRight { color: var(--danger); font-weight: 700; }
.wsBadge { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; background: var(--brand-light); color: var(--brand); white-space: nowrap; }
.wsBalGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
.wsBal { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-2, var(--surface)); }
.wsBal .wsBalNum { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.wsBal .wsBalLbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---- Modern dialog form (compact create/edit popups inside jQuery-UI .ui-dialog):
   vertical label-over-control fields + KYC chip toggles + right-aligned actions.
   Reusable across the many list-screen create/edit dialogs (token-driven, auto dark). ---- */
.dlgForm { padding: 4px 4px 2px; }
.dlgError { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-4); padding: 9px 12px; border-radius: var(--radius-md); background: rgba(224, 36, 36, .12); color: var(--danger); border: 1px solid rgba(224, 36, 36, .35); font-size: var(--fs-sm); }
.dlgField { margin-bottom: var(--space-4); }
.dlgFieldLabel { display: block; margin-bottom: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.dlgFieldLabel .req { color: var(--danger); margin-left: 2px; }
.dlgForm .dlgField input[type="text"], .dlgForm .dlgField textarea, .dlgForm .dlgField select { width: 100%; box-sizing: border-box; }
/* read-only value shown under a .dlgFieldLabel on detail/view screens */
.dvVal { min-height: 20px; padding: 3px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.dlgSectionTitle { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--text-muted); margin: 2px 0 var(--space-3); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.dlgCheckRow { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dlgCheck { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2, var(--surface)); cursor: pointer; font-size: var(--fs-sm); color: var(--text); user-select: none; transition: border-color var(--t-base), background var(--t-base); }
.dlgCheck:hover { border-color: var(--brand); }
.dlgCheck input[type="checkbox"] { margin: 0; }
.dlgActions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* Defensive: bulletproof button text visibility inside jQuery-UI dialogs.
   Some legacy CSS + jQuery-UI .ui-state-default rules inherit a low-contrast
   text color into <input type="submit"|"button"> elements that carry our
   .btn* classes, making the button label look invisible. Force the right
   foreground for each kind, scoped to .ui-dialog so we don't affect anything
   outside dialogs. */
.ui-dialog input.btnPrimary,
.ui-dialog button.btnPrimary { color: #fff !important; background: var(--brand) !important; }
.ui-dialog input.btnPrimary:hover,
.ui-dialog button.btnPrimary:hover { background: var(--brand-dark) !important; }
.ui-dialog input.btnGhost,
.ui-dialog button.btnGhost { color: var(--text) !important; background: var(--surface) !important; }
.ui-dialog input.btnGhost:hover,
.ui-dialog button.btnGhost:hover { background: var(--brand-light) !important; color: var(--brand-dark) !important; }
.ui-dialog input.btnDanger,
.ui-dialog button.btnDanger { color: #fff !important; background: var(--danger) !important; }
body.theme-dark .ui-dialog input.btnGhost,
body.theme-dark .ui-dialog button.btnGhost { color: #c7ced8 !important; background: #1e2630 !important; }
body.theme-dark .ui-dialog input.btnGhost:hover,
body.theme-dark .ui-dialog button.btnGhost:hover { color: #9fd8ff !important; background: rgba(0,174,255,.16) !important; }
/* jQuery-UI's own button-pane (used by .dialog({buttons:{...}}), e.g. PettyCash Delete confirm) */
.ui-dialog .ui-dialog-buttonpane .ui-button .ui-button-text { color: var(--text) !important; }
body.theme-dark .ui-dialog .ui-dialog-buttonpane .ui-button .ui-button-text { color: #c7ced8 !important; }

/* ===========================================================================
   Modern UI refresh — light & airy + dark theme + redesigned top bar + nav.
   =========================================================================== */