/* ============================================================
   BMS UI Theme  (dark + light)
   Loaded after the app's own styles to re-skin the interface
   and stabilise the header/layout.
   ============================================================ */

html[data-theme="dark"] {
    --bg:        #14132a;
    --bg-2:      #1c1a38;   /* sidebar / header */
    --panel:     #211f42;   /* cards / content surface */
    --panel-2:   #262450;   /* inputs / table header */
    --row-alt:   rgba(255,255,255,.035);
    --row-hover: rgba(139,125,255,.12);
    --text:      #f4f5fb;
    --muted:     #a6abcf;
    --border:    rgba(255,255,255,.10);
    --shadow:    0 8px 30px rgba(0,0,0,.35);
}
html[data-theme="light"] {
    --bg:        #eef0f7;
    --bg-2:      #ffffff;
    --panel:     #ffffff;
    --panel-2:   #f4f5fb;
    --row-alt:   #f7f8fc;
    --row-hover: rgba(139,125,255,.08);
    --text:      #20232f;
    --muted:     #6b7185;
    --border:    #e4e7f1;
    --shadow:    0 8px 24px rgba(40,44,80,.10);
}
:root {
    --brand:      #f7941d;
    --accent:     #8b7dff;
    --accent-2:   #6a5cff;
    --accent-soft: rgba(139,125,255,.16);
    --good:       #37c98a;
    --danger:     #ff6b6b;
}

/* ---------- base ---------- */
html[data-theme] body,
html[data-theme] .app,
html[data-theme] #app {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Consistent sans-serif. Body sets it for all normal text via inheritance;
   form controls and cells are forced because they don't inherit reliably.
   Icon elements (.fa / .material-icons / .glyphicon) keep their own font
   because those carry a direct font rule, which beats an inherited one. */
html[data-theme] label, html[data-theme] th, html[data-theme] td,
html[data-theme] input, html[data-theme] select, html[data-theme] textarea,
html[data-theme] button, html[data-theme] .btn, html[data-theme] .nav-text,
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5, html[data-theme] h6 {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
html[data-theme] .app-body,
html[data-theme] #view { background: var(--bg) !important; color: var(--text) !important; }
html[data-theme] a { color: var(--accent); }

/* ---------- sidebar / main menu ---------- */
html[data-theme] #aside,
html[data-theme] .app-aside,
html[data-theme] .app-aside .left,
html[data-theme] .navside,
html[data-theme] .navside.dk,
html[data-theme] .navside .hide-scroll,
html[data-theme] .navside .scroll,
html[data-theme] .navside .nav,
html[data-theme] #aside ul.nav {
    background-color: var(--bg-2) !important;
    background-image: none !important;
    border-color: var(--border) !important;
}
html[data-theme] .app-aside { border-right: 1px solid var(--border) !important; }

html[data-theme] #aside .nav > li > a,
html[data-theme] #aside a.no-ajax,
html[data-theme] #aside .nav-text {
    color: var(--text) !important;
    border-left: 3px solid transparent;
}
html[data-theme] #aside .nav > li > a:hover,
html[data-theme] #aside .nav > li > a:hover .nav-text {
    color: var(--brand) !important;
    background: var(--accent-soft) !important;
    text-decoration: none;
}
html[data-theme] #aside .nav > li.active > a,
html[data-theme] #aside .nav > li > a.active,
html[data-theme] #aside .nav > li.active > a .nav-text {
    color: var(--brand) !important;
    background: var(--accent-soft) !important;
    border-left-color: var(--accent) !important;
}
/* each menu link is a compact single row: [icon] label, vertically centred */
html[data-theme] #aside .nav > li > a,
html[data-theme] #aside a.no-ajax {
    display: flex !important;
    align-items: center !important;
    padding: 9px 18px !important;
}
html[data-theme] #aside .nav-text {
    display: inline-block !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
/* menu icons (Font Awesome): inherit the link colour, sit in a fixed column */
html[data-theme] #aside .nav-fa-icon {
    width: 22px;
    text-align: center;
    margin-right: 12px;
    font-size: 15px;
    opacity: .85;
    flex: 0 0 auto;
    color: inherit !important;
}

/* dark-theme logo (white version); light theme keeps the original */
html[data-theme="dark"] .sam-logo {
    background-image: url('/assets/styles/logo-jistqa-dark.svg') !important;
    background-repeat: no-repeat !important;
    /* match the light logo exactly (inline style uses auto 70% @ 25%) */
    background-size: auto 70% !important;
    background-position: 25% center !important;
}

/* ---------- header (also fixes the collapsed layout) ---------- */
html[data-theme] .app-header {
    background: var(--bg-2) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}
html[data-theme] .app-header .navbar,
html[data-theme] .navbar.flex-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100%;
    padding: 8px 20px;
}
html[data-theme] .navbar-nav.ml-auto,
html[data-theme] .ml-auto { margin-left: auto !important; }
html[data-theme] .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px;
    list-style: none; margin: 0; padding: 0;
}
html[data-theme] #pageTitle { color: var(--text) !important; font-weight: 600; }
html[data-theme] .app-header .navbar-nav > div,
html[data-theme] .app-header .navbar-nav > a { color: var(--muted) !important; white-space: nowrap; }
/* hide the mobile hamburger on wide screens */
@media (min-width: 992px) {
    html[data-theme] .hidden-lg-up { display: none !important; }
}

/* ---------- search box ---------- */
html[data-theme] .search-wrapper #search-box,
html[data-theme] #search-box,
html[data-theme] input.form-control,
html[data-theme] select.form-control,
html[data-theme] textarea.form-control {
    background: var(--panel-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
}
html[data-theme] ::placeholder { color: var(--muted); opacity: 1; }

/* ---------- generic form fields ---------- */
html[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
html[data-theme] select,
html[data-theme] textarea {
    background: var(--panel-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    outline: none;
}
html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
html[data-theme] label { color: var(--muted) !important; }

/* ---------- tables (list views) ---------- */
html[data-theme] table { color: var(--text); border-color: var(--border); }
html[data-theme] th {
    background: var(--panel-2) !important;
    color: var(--muted) !important;
    border-bottom: 1px solid var(--border) !important;
}
html[data-theme] td { border-bottom: 1px solid var(--border) !important; }
html[data-theme] tbody tr:nth-child(even) { background: var(--row-alt); }
/* tone down any hard-coded highlight rows */
html[data-theme] tr[style*="background"] td { background: var(--accent-soft) !important; }

/* ---------- buttons ---------- */
html[data-theme] .btn,
html[data-theme] input[type=submit],
html[data-theme] input[type=button] {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600;
}
html[data-theme] .btn:hover,
html[data-theme] input[type=submit]:hover,
html[data-theme] input[type=button]:hover { filter: brightness(1.08); }
html[data-theme] .btn-outline,
html[data-theme] .b-warn.text-warn {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
}

/* ---------- surfaces / panels that were plain white ---------- */
html[data-theme] .box-shadow,
html[data-theme] .box-shadow-z1,
html[data-theme] .box-shadow-z2 { box-shadow: var(--shadow) !important; }
html[data-theme] .white,
html[data-theme] .box,
html[data-theme] .panel,
html[data-theme] .card { background: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ---------- theme toggle control in the header ---------- */
#bmsThemeToggle {
    position: fixed; bottom: 20px; right: 20px; top: auto; z-index: 1000;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--panel); border: 1px solid var(--accent);
    color: var(--accent); border-radius: 999px; padding: 9px 16px;
    cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow);
}
#bmsThemeToggle:hover { color: var(--text); border-color: var(--accent); }

/* ---------- stray light areas / borders ---------- */
html[data-theme] .app-content,
html[data-theme] .app-content.box-shadow-z2,
html[data-theme] .app-footer,
html[data-theme] .app-body { background: var(--bg) !important; }
html[data-theme] .app-content.box-shadow-z2 { box-shadow: none !important; }
html[data-theme] .nav-border,
html[data-theme] .b-primary,
html[data-theme] .b-a, html[data-theme] .b-b, html[data-theme] .b-t,
html[data-theme] .b-r, html[data-theme] .b-l,
html[data-theme] .box, html[data-theme] .box-shadow { border-color: var(--border) !important; }

/* search box in the header */
html[data-theme] .search-wrapper,
html[data-theme] .form-inline,
html[data-theme] #search-form { background: transparent !important; }
html[data-theme] .app-header #search-box,
html[data-theme] input#search-box,
html[data-theme] input#search-box.form-control,
html[data-theme] .search-wrapper input {
    background: var(--panel-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px 0 0 6px;
}
html[data-theme] .search-options-button-wrapper {
    background: var(--panel-2) !important;
    border: 1px solid var(--border) !important;
    border-left: none !important;
    color: var(--muted) !important;
}
html[data-theme] .search-options-button-wrapper .search-options,
html[data-theme] .search-options { color: var(--muted) !important; }
/* search dropdown panel (opened by the caret) */
html[data-theme] #search-div,
html[data-theme] #search-options-div,
html[data-theme] .search-options-div {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
/* search caret button (stronger, covers inner elements) */
html[data-theme] .search-options-button-wrapper,
html[data-theme] .search-wrapper .search-options-button-wrapper,
html[data-theme] .search-options-button-wrapper * {
    background: var(--panel-2) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
}

/* ---------- native controls + scrollbars follow the theme ---------- */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3b3866; border: 3px solid var(--bg-2); border-radius: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4c4785; }

/* header keeps normal right padding (toggle now floats bottom-right) */
html[data-theme] .app-header .navbar,
html[data-theme] .navbar.flex-row { padding-right: 24px !important; }

/* ---------- kill stray white edges around the app / sidebar / logo ---------- */
html[data-theme] html, html[data-theme] body,
html[data-theme] #app, html[data-theme] .app { background: var(--bg) !important; }
html[data-theme] .app-aside, html[data-theme] .navside,
html[data-theme] .navside.dk, html[data-theme] .app-aside .left {
    border-top: 0 !important; border-left: 0 !important;
}
html[data-theme] .sam-logo { border: 0 !important; }
html[data-theme] .app-content { border-left: 1px solid var(--border) !important; border-top: 0 !important; }

/* ================= refinements v2 ================= */

/* all buttons -> outline style */
html[data-theme] .btn,
html[data-theme] input[type=submit],
html[data-theme] input[type=button],
html[data-theme] .btn-outline,
html[data-theme] .b-warn.text-warn,
html[data-theme] .b-warn,
html[data-theme] .text-warn {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    box-shadow: none !important;
    cursor: pointer;
}
html[data-theme] .btn:hover,
html[data-theme] input[type=submit]:hover,
html[data-theme] input[type=button]:hover,
html[data-theme] .btn-outline:hover {
    background: var(--accent-soft) !important;
    color: var(--text) !important;
    filter: none !important;
}

/* table rows -> dark zebra (kills the white rows) */
html[data-theme] tbody tr td { background: var(--panel) !important; }
html[data-theme] tbody tr:nth-child(even) td { background: var(--panel-2) !important; }
html[data-theme] thead th { background: var(--bg-2) !important; }

/* outer edges -> no white borders around the app */
html[data-theme] html, html[data-theme] body,
html[data-theme] #app, html[data-theme] .app {
    background: var(--bg) !important; margin: 0 !important;
    border: 0 !important; outline: 0 !important; box-shadow: none !important;
}
html[data-theme] .app-content {
    background: var(--bg) !important; box-shadow: none !important;
    border: 0 !important; border-left: 1px solid var(--border) !important; border-radius: 0 !important;
}
html[data-theme] .app-aside, html[data-theme] .navside, html[data-theme] .navside.dk {
    border: 0 !important; box-shadow: none !important;
}

/* date selector */
html[data-theme] input[type=date],
html[data-theme] input.datepicker,
html[data-theme] input.hasDatepicker,
html[data-theme] input[name*=Date],
html[data-theme] input[name*=date],
html[data-theme] input[id*=Date],
html[data-theme] input[id*=date] {
    padding: 8px 10px !important;
    min-height: 36px;
    background: var(--panel-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    vertical-align: middle;
}
html[data-theme] i[class*=calendar],
html[data-theme] .fa-calendar, html[data-theme] .glyphicon-calendar,
html[data-theme] .ui-datepicker-trigger {
    color: var(--accent) !important;
    vertical-align: middle;
}

/* table data text -> white; links keep the accent colour */
html[data-theme] td,
html[data-theme] td span,
html[data-theme] td div,
html[data-theme] td label { color: var(--text) !important; }
html[data-theme] td a,
html[data-theme] td a span { color: var(--accent) !important; }

/* enquiry item grid: it's a form, not a data list -> no zebra, no ghost lines */
html[data-theme] .items,
html[data-theme] .items tr,
html[data-theme] .items td,
html[data-theme] .items th { border: 0 !important; }
html[data-theme] .items td { background: transparent !important; }

/* Bootstrap input-group fallback: keep the input + calendar addon inline */
html[data-theme] .input-group,
html[data-theme] .input-group.date {
    display: inline-flex !important;
    align-items: stretch;
    vertical-align: middle;
    width: auto !important;
}
html[data-theme] .input-group .form-control {
    border-radius: 6px 0 0 6px !important;
    border-right: 0 !important;
    margin: 0 !important;
    height: 38px;
}
html[data-theme] .input-group-addon {
    display: inline-flex !important;
    align-items: center;
    padding: 0 12px;
    background: var(--panel-2) !important;
    border: 1px solid var(--border) !important;
    border-left: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    color: var(--accent) !important;
    cursor: pointer;
}
html[data-theme] .input-group-addon .fa,
html[data-theme] .input-group-addon .fa-calendar { color: var(--accent) !important; }

/* remove the white resize grips on textarea cells */
html[data-theme] textarea { resize: none !important; }

/* keep the header on-screen: wide tables scroll inside the body, not the whole page */
/* clip (not hidden) so wide tables can't scroll the page sideways, yet pop-ups
   like the date picker can still overflow downward without being cut off. */
html[data-theme] .app-content { overflow-x: clip !important; min-width: 0; }
html[data-theme] .app-body { overflow-x: clip !important; }
html[data-theme] .scrollable-container,
html[data-theme] .customer-tbl { overflow-x: hidden !important; max-width: 100%; }

/* ---- refinements v3 ---- */
/* every textarea grows to fit its content (no scrollbars) */
html[data-theme] textarea {
    overflow: hidden !important;
    resize: none !important;
    field-sizing: content;
    min-height: 34px;
}
/* keep the header fully on-screen */
html[data-theme] body { overflow-x: hidden !important; }
html[data-theme] .app-header .navbar,
html[data-theme] .navbar.flex-row { padding-right: 50px !important; }
html[data-theme] #search-box { max-width: 180px; }
/* button text centred, no underline, no odd height */
html[data-theme] .btn,
html[data-theme] input[type=submit],
html[data-theme] input[type=button],
html[data-theme] .btn-outline,
html[data-theme] a.btn {
    text-align: center !important;
    text-decoration: none !important;
    height: auto !important;
    line-height: normal !important;
}

/* ================= header + table system v4 ================= */

/* Header is fixed but inherits the sidebar margin -> pin it to the content area
   so it spans from the sidebar edge to the screen edge and Logout stays visible. */
html[data-theme] .app-header {
    margin: 0 !important;
    left: 13.75rem !important;
    right: 0 !important;
    width: auto !important;
}

/* DEFAULT: table cells are transparent (so form-layout tables show just the
   inputs/labels, with no background boxes or ghost border lines). */
html[data-theme] td {
    background: transparent !important;
    border: 0 !important;
    color: var(--text) !important;
}
html[data-theme] td a { color: var(--accent) !important; }
html[data-theme] th {
    background: var(--bg-2) !important;
    color: var(--muted) !important;
    border: 0 !important;
}

/* DATA LISTS ONLY (.dataTable / .table / .table-striped / .sortable):
   dark surface, zebra rows and row separators. */
html[data-theme] table.dataTable tbody td,
html[data-theme] table.table tbody td,
html[data-theme] table.table-striped tbody td,
html[data-theme] table.sortable tbody td {
    background: var(--panel) !important;
    border-bottom: 1px solid var(--border) !important;
}
html[data-theme] table.dataTable tbody tr:nth-child(even) td,
html[data-theme] table.table tbody tr:nth-child(even) td,
html[data-theme] table.table-striped tbody tr:nth-child(even) td,
html[data-theme] table.sortable tbody tr:nth-child(even) td {
    background: var(--panel-2) !important;
}
html[data-theme] table.dataTable thead th,
html[data-theme] table.table thead th,
html[data-theme] table.table-striped thead th,
html[data-theme] table.sortable thead th {
    background: var(--bg-2) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ================= refinements v6 (header, definitive) ================= */

/* The fixed header inherits .app-content's sidebar margin, which shoves it off
   the right edge. Pin it explicitly to the content column instead. */
html[data-theme] .app-header {
    margin: 0 !important;
    left: 13.75rem !important;
    right: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 13.75rem) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
/* Navbar is one no-wrap flex row; children may shrink so nothing spills out.
   The app's own CSS gives it content-box + an explicit width + 16px padding,
   which makes it 32px wider than the header and pushes Logout off screen.
   Force border-box and width:100% so it fits its parent exactly. */
html[data-theme] .app-header .navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px 16px !important;
}
/* The page title takes up the slack and truncates rather than pushing the
   right-hand items off screen. */
html[data-theme] .app-header #pageTitle {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* The right-hand group (search / Hello / Logout) is pinned right and never
   shrinks away, so Logout is always fully visible. */
html[data-theme] .app-header .navbar-nav.ml-auto,
html[data-theme] .app-header .navbar-nav {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
}
/* Only the search box may shrink inside that group. */
html[data-theme] .app-header #search-form { flex: 0 1 auto !important; min-width: 0 !important; }
html[data-theme] .app-header #search-box { max-width: 160px !important; min-width: 60px !important; }
/* Hello + Logout never shrink or wrap. */
html[data-theme] .app-header .navbar-nav > div,
html[data-theme] .app-header .navbar-nav > a { flex: 0 0 auto !important; white-space: nowrap !important; }

/* Content sits clear of the fixed header; drop the left divider bar */
html[data-theme] .app-content { border-left: 0 !important; }
/* Clear the fixed header, and add a small left/right gutter so table content
   (and everything else) doesn't hug the sidebar or clip the first column. */
html[data-theme] .app-body {
    padding-top: 3.5rem !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
}

/* Editable list grids (Customer / Supplier) sit on ONE background panel
   that grows with the content, instead of loose floating cells. */
html[data-theme] .customer-tbl {
    background: var(--panel) !important;
    border-radius: 8px;
    padding: 6px !important;
}
/* Every cell in a row stretches to the row height (driven by the tallest
   field, usually the address), so all field boxes line up instead of leaving
   ragged empty space under the shorter ones. */
html[data-theme] .customer-tbl > div > div { display: flex !important; padding: 4px !important; box-sizing: border-box !important; }
html[data-theme] .customer-tbl textarea { flex: 1 1 auto !important; height: auto !important; padding: 6px 8px !important; box-sizing: border-box !important; }

/* Sidebar menu: the scroll container uses a fixed width + a -17px right margin
   (a trick to push the native scrollbar out of view) which makes it 17px wider
   than the sidebar panel and stick out to the right. Constrain it to fit. */
html[data-theme] .hide-scroll {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    /* menu is short and fits; only scroll if a very short viewport needs it,
       so no permanent scrollbar shows */
    overflow-y: auto !important;
}

/* ============ Enquiry / Contract / Purchase form tidy-up ============ */
/* Collapse the empty "Special Instructions" / "Notes" / "Comments" rows that
   are hidden on a new record (they leave thin stray bars under the totals).
   Scoped to the outer form's OWN rows (> tbody > tr) so nested line-item rows,
   which legitimately contain hidden column cells, are never affected. The rows
   only match while their content is display:none, so they reappear normally
   once relevant. */
html[data-theme] table.enquiry > tbody > tr:has(> td > textarea[style*="none"]),
html[data-theme] table.enquiry > tbody > tr:has(> td[style*="none"]),
html[data-theme] table.enquiry > tbody > tr:has(> td > span[style*="none"]),
html[data-theme] table.purchase > tbody > tr:has(> td > textarea[style*="none"]),
html[data-theme] table.purchase > tbody > tr:has(> td[style*="none"]),
html[data-theme] table.purchase > tbody > tr:has(> td > span[style*="none"]) {
    display: none !important;
}
/* Labels stay compact and right-aligned; fields fill the rest of their cell so
   widths line up instead of being ragged. */
html[data-theme] table.enquiry td.text-right,
html[data-theme] table.purchase td.text-right {
    white-space: nowrap !important;
    text-align: right !important;
    padding-right: 12px !important;
    width: 1px !important;
    color: var(--muted) !important;
}
html[data-theme] table.enquiry input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=checkbox]),
html[data-theme] table.enquiry select,
html[data-theme] table.purchase input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=checkbox]),
html[data-theme] table.purchase select {
    width: 100% !important;
    box-sizing: border-box !important;
}
html[data-theme] table.enquiry .input-group.date,
html[data-theme] table.purchase .input-group.date { width: 100% !important; }
/* One unified panel behind the whole form (like the customer table) instead of
   a separate background box per cell. Cells are transparent; only the input
   fields keep their own boxes. Centred on the page. */
html[data-theme] table.enquiry,
html[data-theme] table.purchase {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: var(--shadow) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 24px auto !important;
}
html[data-theme] table.enquiry td,
html[data-theme] table.enquiry th,
html[data-theme] table.purchase td,
html[data-theme] table.purchase th { background: transparent !important; }

/* ================= table pagination ================= */
html[data-theme] .bms-pager {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 16px; flex-wrap: wrap; margin: 12px 4px 4px; font-size: 13px;
    color: var(--muted);
}
html[data-theme] .bms-pager-size,
html[data-theme] .bms-pager-nav { display: flex; align-items: center; gap: 8px; }
html[data-theme] .bms-pager select {
    background: var(--panel-2) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important; border-radius: 6px !important;
    padding: 4px 8px !important; min-height: 30px;
}
html[data-theme] .bms-pager-info { color: var(--muted); min-width: 96px; text-align: center; }
html[data-theme] .bms-pager-btn {
    background: transparent; color: var(--accent);
    border: 1px solid var(--accent); border-radius: 8px;
    padding: 5px 14px; cursor: pointer; font-size: 13px;
}
html[data-theme] .bms-pager-btn:disabled { opacity: .4; cursor: default; }

/* ================= login page ================= */
html[data-theme] body.pace-done,
html[data-theme] .app#app { background: var(--bg) !important; color: var(--text) !important; }
html[data-theme] .login-wrap { margin-top: 6vh; }
/* logo above the card */
html[data-theme] .login-logo {
    width: 240px; height: 74px; margin: 0 auto 20px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    background-image: url('/images/jistlogo.webp');
}
html[data-theme="dark"] .login-logo { background-image: url('/assets/styles/logo-jistqa-dark.svg'); }
/* the sign-in card -> themed panel, like the forms inside */
html[data-theme] .login-card {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow) !important;
    max-width: 380px;
    margin: 0 auto !important;
}
html[data-theme] .login-card .text-sm { color: var(--muted) !important; }
html[data-theme] .login-card label { color: var(--muted) !important; }
html[data-theme] .login-card .md-input { color: var(--text) !important; }
html[data-theme] .login-error {
    background: rgba(255,107,107,.12);
    color: var(--danger);
    border: 1px solid rgba(255,107,107,.4);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.4;
}
html[data-theme] .login-wrap .p-v-lg a { color: var(--accent) !important; }

/* html element itself gets the theme bg, so short pages (e.g. login) don't
   show a white strip behind the body. */
html[data-theme] { background: var(--bg) !important; }

/* ===== light theme only: pill text + calendar icons use the dark theme's
   deep background colour (#14132a) instead of the washed-out accent ===== */
html[data-theme="light"] .btn,
html[data-theme="light"] input[type=submit],
html[data-theme="light"] input[type=button],
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .b-warn.text-warn,
html[data-theme="light"] .b-warn,
html[data-theme="light"] .text-warn {
    color: #14132a !important;
    border-color: #14132a !important;
}
html[data-theme="light"] i[class*=calendar],
html[data-theme="light"] .fa-calendar,
html[data-theme="light"] .glyphicon-calendar,
html[data-theme="light"] .ui-datepicker-trigger,
html[data-theme="light"] .input-group-addon .fa-calendar {
    color: #14132a !important;
}

/* ---------- date picker (eonasdan bootstrap-datetimepicker) ---------- */
html[data-theme] .bootstrap-datetimepicker-widget.dropdown-menu {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow) !important;
    padding: 10px !important;
    width: auto !important;
    min-width: 260px !important;
}
html[data-theme] .bootstrap-datetimepicker-widget:after,
html[data-theme] .bootstrap-datetimepicker-widget:before { display: none !important; }

html[data-theme] .bootstrap-datetimepicker-widget ul.list-unstyled { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html[data-theme] .bootstrap-datetimepicker-widget table { background: transparent !important; margin: 0 !important; }
/* colours only on cells — do NOT force width/height here: that collapsed the day grid
   because the header's month cell spans 5 columns (colspan) and fought the fixed widths. */
html[data-theme] .bootstrap-datetimepicker-widget table td,
html[data-theme] .bootstrap-datetimepicker-widget table th {
    background: transparent !important;
    color: var(--text) !important;
    border: 0 !important;
    text-shadow: none !important;
}
/* day cells: rounded with comfortable padding, sized by content not a fixed width */
html[data-theme] .bootstrap-datetimepicker-widget table td.day {
    border-radius: 8px !important;
    padding: 7px !important;
    font-weight: 500 !important;
}
/* the app's zebra striping must not paint the calendar rows */
html[data-theme] .bootstrap-datetimepicker-widget table tbody tr td,
html[data-theme] .bootstrap-datetimepicker-widget table tbody tr:nth-child(even) td,
html[data-theme] .bootstrap-datetimepicker-widget table tbody tr:nth-child(even) { background: transparent !important; }

/* header: month/year + prev/next arrows */
html[data-theme] .bootstrap-datetimepicker-widget table th.picker-switch { font-weight: 600 !important; color: var(--text) !important; }
html[data-theme] .bootstrap-datetimepicker-widget table th.prev,
html[data-theme] .bootstrap-datetimepicker-widget table th.next { color: var(--muted) !important; }

/* weekday labels */
html[data-theme] .bootstrap-datetimepicker-widget table th.dow {
    color: var(--muted) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
}

/* hover on clickable cells */
html[data-theme] .bootstrap-datetimepicker-widget table td.day:hover,
html[data-theme] .bootstrap-datetimepicker-widget table td.hour:hover,
html[data-theme] .bootstrap-datetimepicker-widget table td.minute:hover,
html[data-theme] .bootstrap-datetimepicker-widget table td.second:hover,
html[data-theme] .bootstrap-datetimepicker-widget table th.picker-switch:hover,
html[data-theme] .bootstrap-datetimepicker-widget table th.prev:hover,
html[data-theme] .bootstrap-datetimepicker-widget table th.next:hover {
    background: var(--accent-soft) !important;
    color: var(--text) !important;
    cursor: pointer !important;
}

/* days from the previous/next month */
html[data-theme] .bootstrap-datetimepicker-widget table td.day.old,
html[data-theme] .bootstrap-datetimepicker-widget table td.day.new {
    color: var(--muted) !important;
    opacity: .4 !important;
}

/* today (subtle orange ring, no default marker) */
html[data-theme] .bootstrap-datetimepicker-widget table td.day.today {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px var(--brand) !important;
    color: var(--text) !important;
}
html[data-theme] .bootstrap-datetimepicker-widget table td.day.today:before { display: none !important; }

/* selected day */
html[data-theme] .bootstrap-datetimepicker-widget table td.day.active,
html[data-theme] .bootstrap-datetimepicker-widget table td.day.active:hover,
html[data-theme] .bootstrap-datetimepicker-widget table td.active,
html[data-theme] .bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* disabled */
html[data-theme] .bootstrap-datetimepicker-widget table td.disabled,
html[data-theme] .bootstrap-datetimepicker-widget table td.day.disabled { color: var(--muted) !important; opacity: .3 !important; }

/* month / year / decade grids share the same treatment */
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-months td.month,
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-years td.year,
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-decades td.decade {
    border-radius: 8px !important;
    height: 42px !important;
    line-height: 42px !important;
}
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-months td.month:hover,
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-years td.year:hover,
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-decades td.decade:hover { background: var(--accent-soft) !important; }
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-months td .month.active,
html[data-theme] .bootstrap-datetimepicker-widget .datepicker-years td .year.active,
html[data-theme] .bootstrap-datetimepicker-widget td span.active { background: var(--accent) !important; color: #fff !important; }

/* ---------- admin config pop-up windows ---------- */
/* addWindow() builds the frame as `new Window({id: name + 'Window'})`, so the
   frame's id ends in "Window" (e.g. supplierProductsWindow) and the content
   sits in #add_… inside it. Theme the frame dark; make the content transparent
   and centred so labels read correctly against the dark frame. */
html[data-theme] [id$="Window"] {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow) !important;
    /* let the dialog grow to fit its content instead of scrolling, and keep it
       pinned to the centre of the viewport so it never runs off-screen */
    height: auto !important;
    max-height: 92vh !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding-bottom: 24px !important; /* keep the OK/Close buttons off the bottom edge */
}
/* above the 992px breakpoint the sidebar is docked (216px), so shift the dialog
   right so it sits under the centred Global/Users menu rather than the whole viewport */
@media (min-width: 992px) {
    html[data-theme] [id$="Window"] { left: calc(50% + 70px) !important; }
}
html[data-theme] [id$="Window"] .inspectButtonsDiv { margin-top: 6px !important; }
html[data-theme] [id$="Window"] [id^="add_"],
html[data-theme] [id$="Window"] .inspectDataDiv,
html[data-theme] [id$="Window"] .editProcControlTbl,
html[data-theme] [id$="Window"] table,
html[data-theme] [id$="Window"] tbody tr td,
html[data-theme] [id$="Window"] th,
html[data-theme] [id$="Window"] label,
html[data-theme] [id$="Window"] div,
html[data-theme] [id$="Window"] .inspectButtonsDiv { background: transparent !important; color: var(--text) !important; }
html[data-theme] [id$="Window"] a { color: var(--accent) !important; }
/* centre the content within the window and match the big form-card spacing;
   auto height (with a sensible cap) so short lists show in full with no scrollbar */
html[data-theme] [id$="Window"] .inspectDataDiv { text-align: center !important; padding: 24px 30px !important; height: auto !important; max-height: 66vh !important; overflow-y: auto !important; }
/* kill the global zebra striping inside the config dialogs (it sits on the row) */
html[data-theme] [id$="Window"] .inspectDataDiv table tr,
html[data-theme] [id$="Window"] .inspectDataDiv table tr:nth-child(even),
html[data-theme] [id$="Window"] .inspectDataDiv table tr:nth-child(even) td { background: transparent !important; }
/* no zebra row striping anywhere - every row stays the panel colour.
   Covers the generic even-row rules and the higher-specificity list-table rules
   (dataTable / table / table-striped / sortable) so nothing slips through. */
html[data-theme] tbody tr:nth-child(even),
html[data-theme] tbody tr:nth-child(even) td,
html[data-theme] table.dataTable tbody tr:nth-child(even) td,
html[data-theme] table.table tbody tr:nth-child(even) td,
html[data-theme] table.table-striped tbody tr:nth-child(even) td,
html[data-theme] table.sortable tbody tr:nth-child(even) td { background: transparent !important; }
/* the row "background" was the input fill; make the field a recessed darker colour
   so rows no longer read as light bands, just the field itself is distinct */
html[data-theme] [id$="Window"] .inspectDataDiv input[type="text"],
html[data-theme] [id$="Window"] .inspectDataDiv input:not([type="button"]):not([type="submit"]) {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    height: auto !important;
    line-height: 1.4 !important;
}
html[data-theme] [id$="Window"] .inspectDataDiv > div[style*="flex"] { justify-content: center !important; }
html[data-theme] [id$="Window"] .inspectDataDiv table { margin-left: auto !important; margin-right: auto !important; }
/* widen the dropdowns in every settings dialog so longer names fit */
[id$="Window"] select,
[id$="Window"] .inspectDataDiv select { min-width: 280px !important; max-width: 100% !important; }

/* ---------- reusable on/off toggle switch (drop-in for a checkbox) ---------- */
.jq-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.jq-switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.jq-switch .jq-track { width: 42px; height: 24px; border-radius: 20px; background: #3a3760; position: relative; transition: .15s; flex: 0 0 auto; display: inline-block; }
html[data-theme="light"] .jq-switch .jq-track { background: #c9ccdd; }
.jq-switch .jq-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.jq-switch > input:checked + .jq-track { background: var(--accent); }
.jq-switch > input:checked + .jq-track .jq-knob { left: 21px; }
.jq-switch > input:disabled + .jq-track { opacity: .5; cursor: not-allowed; }