/*
 * Leader Valves portal - theme (2026 colourful redesign)
 * Loaded AFTER bootstrap/style.css/sidebar-menu.css on the login page and both master pages.
 * Visual only. Every menu section has its own colour (.m-<colour> on its <li> sets --c);
 * js/sidebar-menu.js copies the current section's colour to --accent on <body>, so the page
 * header, buttons, section titles and table headers match the section in the menu.
 * Remove the <link> to this file to go back to the old look.
 */
:root {
  --accent: #4f46e5;
  --lv-brand: #15803d;
  --lv-side: #111827;
  --lv-side-2: #1e1b4b;
  --lv-side-text: #d6dae3;
  --lv-side-muted: #8b93a7;
  --lv-bg: #f4f6fb;
  --lv-surface: #ffffff;
  --lv-text: #1f2937;
  --lv-muted: #6b7280;
  --lv-border: #e5e7eb;
  --lv-border-strong: #d1d5db;
  --lv-danger: #dc2626;
  --lv-radius: 14px;
  --lv-radius-sm: 9px;
  --lv-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
  --lv-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --lv-rainbow: linear-gradient(90deg, #4f46e5, #7c3aed, #db2777, #ea580c, #d97706, #16a34a, #0d9488, #0284c7);
}

/* section colours (menu <li class="m-...">) */
.m-indigo { --c: #4f46e5; }
.m-orange { --c: #ea580c; }
.m-violet { --c: #7c3aed; }
.m-rose   { --c: #e11d48; }
.m-teal   { --c: #0d9488; }
.m-green  { --c: #16a34a; }
.m-amber  { --c: #d97706; }
.m-blue   { --c: #2563eb; }
.m-cyan   { --c: #0891b2; }
.m-sky    { --c: #0284c7; }
.m-pink   { --c: #db2777; }
.m-slate  { --c: #475569; }

/* ---------- base ---------- */
html, body { font-family: var(--lv-font); color: var(--lv-text); }
body { background: var(--lv-bg); font-size: 14px; -webkit-font-smoothing: antialiased; }
body.dark { background: var(--lv-side); }
a { color: var(--accent); }
a:hover { color: var(--accent); filter: brightness(.85); }
h1, h2, h3, h4, .page-title h1 { font-family: var(--lv-font); }

/* ---------- top bar ---------- */
.top-bar {
  position: relative;
  background: var(--lv-surface);
  background-image: none;
  border-bottom: 1px solid var(--lv-border);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
  height: 60px;
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.top-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--lv-rainbow); }
.top-bar > .container-fluid { width: 100%; }
.top-bar .row { align-items: center; }
.top-bar .logo img { max-height: 34px; width: auto; }
.user-actions { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.top-bar .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #db2777);
  color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
}
.top-bar .welcome-msg {
  float: none; margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: #3730a3;
  background: #eef2ff;
  border-radius: 999px;
  padding: 6px 14px;
}
.signout {
  background: #fff1f2;
  color: #be123c !important;
  border: 1px solid #fecdd3;
  border-radius: 999px;
  font-weight: 600; font-size: 13px;
  padding: 6px 14px !important;
  transition: background .15s, border-color .15s, color .15s;
}
.signout:hover, .signout:focus { background: var(--lv-danger); border-color: var(--lv-danger); color: #fff !important; text-decoration: none; }

/* ---------- sidebar ---------- */
.left-bar { width: 236px; background: linear-gradient(180deg, var(--lv-side) 0%, var(--lv-side-2) 100%); top: 60px; }
.right-panel { margin-left: 236px; background: var(--lv-bg); }
.sidebar-menu { background: transparent; padding: 6px 0 24px; }
.sidebar-menu li.sidebar-header {
  background: transparent;
  color: var(--lv-side-muted);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 20px 10px;
}
.sidebar-menu > li { font-size: 14px; margin: 2px 10px; border-radius: 10px; }
.sidebar-menu > li > a {
  display: flex; align-items: center; gap: 10px;
  color: var(--lv-side-text);
  padding: 7px 10px;
  border-left: 0;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.sidebar-menu > li > a > span { flex: 1 1 auto; min-width: 0; }
/* the section icon as a coloured tile */
.sidebar-menu > li > a > .fa:first-child {
  flex: 0 0 30px; width: 30px; height: 30px; line-height: 30px; text-align: center;
  border-radius: 8px; font-size: 14px;
  background: var(--c, #475569); color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.sidebar-menu > li > a > .pull-right { float: none !important; margin: 0 2px 0 auto; color: var(--lv-side-muted); transition: transform .15s; }
.sidebar-menu > li:hover > a { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-menu > li.active > a { background: rgba(255, 255, 255, .1); background: color-mix(in srgb, var(--c) 28%, transparent); color: #fff; }
.sidebar-menu > li.active > a > .pull-right { transform: rotate(-90deg); color: #fff; }
.sidebar-menu .sidebar-submenu { background: transparent; margin: 2px 0 6px; padding: 2px 0 2px 22px; }
.sidebar-menu .sidebar-submenu > li > a {
  color: var(--lv-side-text); font-size: 13.5px;
  padding: 7px 10px 7px 16px; border-radius: 8px; margin-right: 4px;
  border-left: 2px solid rgba(255, 255, 255, .08);
}
.sidebar-menu .sidebar-submenu > li > a > .fa { color: var(--c, #8b93a7); font-size: 12px; width: 18px; }
.sidebar-menu .sidebar-submenu > li > a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-menu a.activelink { color: #fff !important; background: rgba(255, 255, 255, .12); background: color-mix(in srgb, var(--c) 40%, transparent); border-left-color: var(--c) !important; }
.sidebar-menu a.activelink > .fa { color: #fff !important; }

/* ---------- page header: breadcrumb + coloured title banner ---------- */
.breads {
  background: transparent;
  color: var(--lv-muted);
  font-size: 12.5px;
  padding: 16px 28px 8px;
}
.page-title {
  background: #fff;
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 13%, #fff) 0%, #fff 62%);
  border: 1px solid var(--lv-border);
  border-color: color-mix(in srgb, var(--accent) 22%, #fff);
  border-left: 5px solid var(--accent);
  border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow);
  margin: 0 28px 18px;
  padding: 14px 20px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.page-title h1, .page-title h3 {
  display: flex !important; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 700; color: var(--lv-text);
  margin: 0; padding: 0; background: transparent; border: 0; letter-spacing: -.01em;
}
.page-title .title-ico {
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.page-title .float-right { float: none !important; display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ---------- content card ---------- */
.main-content {
  background: var(--lv-surface);
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow);
  margin: 0 28px 28px;
  padding: 24px;
  font-size: 13.5px;
}
.main-content h3, .panel-box h3 {
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: 0;
  color: var(--lv-text);
  font-size: 16px; font-weight: 700;
  padding: 0;
  margin: 8px 0 14px;
}
.main-content h3::before, .panel-box h3::before {
  content: ""; flex: 0 0 10px; width: 10px; height: 22px; border-radius: 4px;
  background: var(--c, var(--accent));
}
.main-content .row { margin-bottom: 6px; }

/* dashboard cards (js adds .lv-card + its own --c) */
.lv-card {
  border: 1px solid var(--lv-border);
  border-top: 4px solid var(--c);
  border-radius: var(--lv-radius);
  padding: 6px 16px 10px;
  margin-bottom: 20px;
  background: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, #fff) 0, #fff 90px);
}
.main-content .lv-card table th {
  background: color-mix(in srgb, var(--c) 14%, #fff) !important; color: color-mix(in srgb, var(--c) 75%, #111) !important;
  border-bottom-color: color-mix(in srgb, var(--c) 30%, #fff) !important;
}
.main-content .lv-card table tbody tr:hover > td { background: color-mix(in srgb, var(--c) 6%, #fff); }
.main-content .lv-card table tbody tr td a.btn-primary, .main-content .lv-card table tbody tr td input[type=submit] { background-color: var(--c) !important; border-color: var(--c) !important; }

/* ---------- forms ---------- */
.control-label, .main-content label { color: #374151; font-weight: 600; font-size: 12.5px; padding-top: 9px; }
.form-control, .main-content .form-control {
  border: 1px solid var(--lv-border-strong);
  border-radius: var(--lv-radius-sm);
  font-size: 13.5px;
  padding: 8px 12px;
  height: auto;
  min-height: 40px;
  color: var(--lv-text);
  background-color: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:hover { border-color: #9ca3af; }
.form-control:focus, .main-content .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .15);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: 0;
}
.form-control[readonly], .form-control:disabled { background: #f3f4f6; color: var(--lv-muted); }
.main-content input[type=checkbox], .main-content input[type=radio] { width: auto; accent-color: var(--accent); }
::placeholder { color: #9ca3af; }

/* ---------- buttons ---------- */
.btn { border-radius: var(--lv-radius-sm); font-weight: 600; font-size: 13px; padding: 8px 16px; transition: filter .15s, box-shadow .15s, transform .05s; }
.btn:active, .true-btn:active { transform: translateY(1px); }
.btn-primary, .true-btn {
  background-color: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: var(--lv-radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.btn-primary:hover, .btn-primary:focus, .true-btn:hover, .true-btn:focus {
  background-color: var(--accent); border-color: var(--accent); color: #fff;
  filter: brightness(.92);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn-primary:disabled, .true-btn:disabled { filter: grayscale(.5) opacity(.6); }
.true-btn { padding: 9px 22px; font-weight: 600; }
.btn-danger { background: var(--lv-danger); border-color: var(--lv-danger); }

/* buttons with an icon: white line icons drawn as a background image (asp:Button renders <input>, which
   cannot hold an icon element), coloured by what they do */
[id$="btnprint"], [id$="btnexcel"], [id$="btnpdf"], [id$="btnsearch"], [id$="btnupload"],
[id$="btnsubmit"], [id$="btnsave"], [id$="btnview"] {
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 16px 16px !important;
  padding-left: 36px !important;
}
[id$="btnprint"] { background-color: #2563eb !important; border-color: #2563eb !important; color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") !important; }
[id$="btnexcel"] { background-color: #16a34a !important; border-color: #16a34a !important; color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3Cline x1='12' y1='11' x2='12' y2='19'/%3E%3C/svg%3E") !important; }
[id$="btnpdf"] { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E") !important; }
[id$="btnsearch"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.2' y2='16.2'/%3E%3C/svg%3E") !important; }
[id$="btnupload"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") !important; }
/* Backup DB's button is named btnupload but downloads: down arrow */
[id$="btnupload"][value^="Download"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") !important; }
[id$="btnsubmit"], [id$="btnsave"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important; }
[id$="btnview"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important; }
/* "Clear Search" link in the page header: a quiet grey button with an eraser. Only links that reload the
   page; the Add Branch link and the Print link of the view pages (no href) keep a coloured button */
.page-title .float-right a.btn[href]:not([href="frmaddbranch.aspx"]) { background: #fff; color: #374151; border: 1px solid var(--lv-border-strong); box-shadow: none; }
.page-title .float-right a.btn[href]:not([href="frmaddbranch.aspx"])::before { font-family: FontAwesome; content: "\f12d"; margin-right: 7px; color: #9ca3af; }
.page-title .float-right a.btn[href]:not([href="frmaddbranch.aspx"]):hover { background: #f3f4f6; color: #111827; filter: none; }
.page-title .float-right a.btn[href="frmaddbranch.aspx"]::before { font-family: FontAwesome; content: "\f067"; margin-right: 7px; }
/* Print on the bill / dispatch view pages: blue with a printer, like the other Print buttons */
.page-title .float-right a#Print { background-color: #2563eb; border-color: #2563eb; color: #fff !important; cursor: pointer; }
.page-title .float-right a#Print:hover { background-color: #2563eb; border-color: #2563eb; }
.page-title .float-right a#Print::before { font-family: FontAwesome; content: "\f02f"; margin-right: 7px; }

/* ---------- grids / tables ---------- */
.main-content table, .main-content .table {
  border: 1px solid var(--lv-border) !important;
  border-radius: var(--lv-radius-sm);
  border-collapse: separate !important;
  border-spacing: 0;
  background: #fff;
  font-size: 13px;
  overflow: hidden;
}
.main-content table th {
  background: #eef2ff !important;
  background: color-mix(in srgb, var(--accent) 12%, #fff) !important;
  color: #312e81 !important;
  color: color-mix(in srgb, var(--accent) 72%, #111) !important;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 11px 10px !important;
  border: 0 !important;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, #fff) !important;
  vertical-align: bottom;
  white-space: normal;
  text-align: center;
}
.main-content table th a { color: inherit !important; }
/* wide lists: js/sidebar-menu.js puts each grid (.table-responsive) in a .lv-scroll box that scrolls both
   ways within the screen, with the heading row kept in view; the grid itself sizes like a normal table.
   (The "overflow: hidden" above for rounded corners had switched off the sideways scroll, hiding columns.) */
.main-content .table-responsive { overflow-x: auto !important; }
.lv-scroll {
  overflow: auto; max-height: calc(100vh - 150px);
  border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm);
  margin-bottom: 14px; background: #fff;
}
.lv-scroll > table.table-responsive { display: table; overflow: visible !important; margin-bottom: 0 !important; border: 0 !important; border-radius: 0; }
.lv-scroll > table th { position: sticky; top: 0; z-index: 2; }
/* the page-number row (last row of a paged grid): numbers wrap, so 25 of them no longer widen the whole grid */
.main-content table.table-responsive > tbody > tr:last-child > td > table,
.main-content table.table-responsive > tbody > tr.pagination-sm > td > table { display: block; width: auto !important; }
.main-content table.table-responsive > tbody > tr:last-child > td > table > tbody > tr,
.main-content table.table-responsive > tbody > tr.pagination-sm > td > table > tbody > tr { display: flex; flex-wrap: wrap; }
/* dashboard boxes are fixed at 300px with a scroll bar: let them fit their 5 rows */
.main-content div[style*="height: 300px"] { height: auto !important; max-height: 420px; overflow: auto !important; margin-bottom: 18px; }
.main-content .table td, .main-content table td {
  border: 0 !important;
  border-top: 1px solid #f0f2f6 !important;
  padding: 9px 10px !important;
  vertical-align: middle !important;
  color: var(--lv-text);
}
.main-content table tr:first-child td { border-top: 0 !important; }
.main-content table tbody tr:nth-child(even) { background: #fafbfd; }
.main-content table tbody tr:hover > td { background: #f5f7ff; background: color-mix(in srgb, var(--accent) 6%, #fff); }
tr:nth-child(even) { background-color: transparent; }
.main-content .table-bordered td, .main-content .table-bordered th { border-left: 0 !important; border-right: 0 !important; }
/* the black header cells some pages set inline */
.main-content table td[style*="background-color: black"], .main-content table th[style*="background-color: black"] {
  background: color-mix(in srgb, var(--accent) 12%, #fff) !important; color: color-mix(in srgb, var(--accent) 72%, #111) !important; font-weight: 700;
}
/* stacked cells (several related fields in one column, e.g. the Channel Partner list) */
.main-content table td.lv-cell { line-height: 1.45; min-width: 120px; }
.main-content table td.lv-cell > b, .main-content table td.lv-cell > span, .main-content table td.lv-cell > small { display: block; }
.main-content table td.lv-cell > b { color: #111827; }
.main-content table td.lv-cell > small { color: var(--lv-muted); font-size: 12px; margin-top: 2px; }
.main-content table td.lv-cell > small.d-none { display: none; }
.main-content table td.lv-cell > small .fa { width: 15px; color: #9ca3af; }
.main-content table td.lv-contact { word-break: break-word; min-width: 190px; max-width: 240px; }
.main-content table td.lv-cell > .lv-pill { display: inline-block; }
.lv-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.lv-pill-on { background: #dcfce7; color: #166534; }
.lv-pill-off { background: #fee2e2; color: #991b1b; }
.main-content table td .lv-lastlogin { display: block; margin-top: 4px; font-size: 11.5px; color: var(--lv-muted); white-space: nowrap; }
/* row action buttons (view / edit / reduce ...) */
.main-content table tbody tr td a { border-radius: 7px; padding: 4px 10px; line-height: 1.4; }
.main-content table tbody tr td a.btn-primary { color: #fff; }
.main-content table .edit { background: #2563eb; border-radius: 7px; padding: 5px 16px; color: #fff; }
.main-content table .del { background: var(--lv-danger); border-radius: 7px; padding: 5px 16px; color: #fff; }
.main-content table tbody tr td a.bg-primary { background: #2563eb !important; }
.main-content table tbody tr td a.bg-success { background: #16a34a !important; }
.main-content table tbody tr td a.bg-danger { background: var(--lv-danger) !important; }
/* pager row (GridView PagerStyle CssClass="pagination-sm" and the default pager) */
.main-content table tr.pagination-sm > td, .main-content table tr:last-child > td > table { background: #fff !important; }
.main-content table td table { border: 0 !important; width: auto !important; margin: 6px 0; overflow: visible; }
.main-content table td table td { border: 0 !important; padding: 2px !important; background: transparent !important; }
.main-content table td table td a, .main-content table td table td span {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--lv-border-strong); color: var(--lv-text); background: #fff; font-weight: 600;
}
.main-content table td table td span { background: var(--accent); border-color: var(--accent); color: #fff; }
.main-content table td table td a:hover { background: color-mix(in srgb, var(--accent) 10%, #fff); border-color: var(--accent); color: var(--accent); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); }
.page-link { color: var(--accent); }

/* ---------- autocomplete list ---------- */
.completionList {
  background: #fff;
  border: 1px solid var(--lv-border-strong) !important;
  border-radius: var(--lv-radius-sm);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
  height: auto !important; max-height: 260px;
  padding: 4px !important; margin: 2px 0 0 !important;
  z-index: 2000 !important;
}
.completionList li { border-bottom: 0 !important; border-radius: 6px; padding: 7px 9px !important; font-size: 13px; }
.completionList li:hover, .completionList li.active, .itemHighlighted { background: color-mix(in srgb, var(--accent) 10%, #fff) !important; color: var(--accent); }

/* ---------- file uploads: a large drop-zone style box ---------- */
input[type=file] {
  display: block; width: 100%; max-width: 560px;
  margin: 8px 0 4px;
  padding: 18px;
  font-size: 13px; color: var(--lv-muted);
  border: 2px dashed #c7d2fe;
  border-color: color-mix(in srgb, var(--accent) 40%, #fff);
  border-radius: var(--lv-radius);
  background: #f8faff;
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
input[type=file]:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #fff); }
input[type=file]::file-selector-button {
  margin-right: 14px; padding: 9px 16px; cursor: pointer;
  border: 0; border-radius: var(--lv-radius-sm);
  background: var(--accent); color: #fff; font-weight: 600; font-family: var(--lv-font);
}
/* the "Download File" sample link on the upload pages */
.main-content a[href$=".xlsx"], .main-content a[href$=".xls"] {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #dcfce7; color: #15803d !important; font-weight: 600;
}
.main-content a[href$=".xlsx"]::after, .main-content a[href$=".xls"]::after { content: "Download sample"; font-size: 12.5px; }

/* ---------- "please wait" screen while an upload/save posts (js/sidebar-menu.js) ---------- */
#lv-wait { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(17, 24, 39, .55); align-items: center; justify-content: center; }
#lv-wait.show { display: flex; }
.lv-wait-box {
  background: #fff; border-radius: var(--lv-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  padding: 26px 34px; text-align: center; max-width: 340px; border-top: 5px solid var(--accent);
}
.lv-wait-box b { display: block; font-size: 17px; margin: 12px 0 4px; }
.lv-wait-box small { color: var(--lv-muted); font-size: 13px; }
.lv-spin {
  display: inline-block; width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--accent) 20%, #fff); border-top-color: var(--accent);
  animation: lv-spin .8s linear infinite;
}
@keyframes lv-spin { to { transform: rotate(360deg); } }

/* ---------- misc ---------- */
.copyright { color: #9ca3af; }
.alert { border-radius: var(--lv-radius-sm); }
.panel-box a { color: var(--accent); }
.boxes1, .boxes2 { border-color: var(--lv-border); border-radius: var(--lv-radius-sm); }
/* error / result labels the pages show in red or green */
.main-content span[style*="color:Red"], .main-content span[style*="color: Red"] {
  display: inline-block; margin-top: 6px; padding: 8px 12px; border-radius: var(--lv-radius-sm);
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c !important;
}
.main-content span[style*="color:Red"]:empty, .main-content span[style*="color: Red"]:empty { display: none; }
/* form validation (checked on the server): the message under its field, the field outlined in red */
.lv-err { display: block; font-size: 12.5px; color: #b91c1c !important; margin-top: 6px; }
/* "No ... matches" under a search box that found nothing (js/sidebar-menu.js) */
.lv-nomatch { display: none; position: absolute; z-index: 10050; box-sizing: border-box; padding: 8px 12px; font-size: 12.5px;
  color: #6b7280; font-style: italic; background: #fff; border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.lv-invalid, .lv-invalid:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; }

/* ---------- graphical dashboards (admin + channel partner; drawn by dashboard.cs) ---------- */
.lv-dash { margin: 0 28px 20px; }
.lv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.lv-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--lv-surface);
  border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow);
  color: var(--lv-text) !important; text-decoration: none !important; transition: border-color .15s, transform .15s;
}
.lv-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.lv-tile-label { font-size: 13px; color: var(--lv-muted); }
.lv-tile-label .fa { width: 18px; color: var(--accent); }
.lv-tile-value { font-size: 26px; font-weight: 600; color: #111827; line-height: 1.2; }
.lv-tile-sub { font-size: 12.5px; color: var(--lv-muted); }
.lv-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lv-charts > .lv-wide { grid-column: 1 / -1; }
.lv-chart {
  background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow); padding: 16px 18px 10px; height: 100%;
}
.lv-chart-head { display: flex; flex-direction: column; margin-bottom: 8px; }
.lv-chart-head b { font-size: 15px; color: #111827; }
.lv-chart-head small { font-size: 12.5px; color: var(--lv-muted); }
.lv-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--lv-font); }
.lv-svg .lv-grid { stroke: #e1e0d9; stroke-width: 1; }
.lv-svg .lv-axis { stroke: #c3c2b7; stroke-width: 1; }
.lv-svg .lv-tick { fill: #898781; font-size: 11px; font-variant-numeric: tabular-nums; }
.lv-svg .lv-cat { fill: #52514e; font-size: 11px; }
.lv-svg .lv-val { fill: #0b0b0b; font-size: 11.5px; font-weight: 600; }
.lv-svg .lv-hit { fill: transparent; }
.lv-svg .lv-mark { cursor: default; }
.lv-svg .lv-mark:hover .lv-hit { fill: rgba(42, 120, 214, .06); }
.lv-svg .lv-mark:hover path { filter: brightness(.9); }
.lv-chart-table { margin-top: 4px; font-size: 12.5px; }
.lv-chart-table summary { cursor: pointer; color: var(--lv-muted); }
.lv-chart-table table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.lv-chart-table th, .lv-chart-table td { padding: 5px 8px; border-bottom: 1px solid #f0f2f6; text-align: left; font-variant-numeric: tabular-nums; }
.lv-chart-table th { color: var(--lv-muted); font-weight: 600; }
.lv-empty { color: var(--lv-muted); margin: 8px 0; }
.lv-tip {
  position: fixed; z-index: 2000; pointer-events: none; max-width: 320px; padding: 7px 10px; border-radius: 8px;
  background: #111827; color: #fff; font-size: 12.5px; line-height: 1.4; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); display: none;
}
@media (max-width: 1100px) { .lv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-charts { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lv-dash { margin: 0 16px 16px; } .lv-tiles { grid-template-columns: 1fr; } }

/* date picker on the date boxes (AjaxControlToolkit CalendarExtender, default ajax__calendar theme).
   Only colours/borders here: the toolkit lays the calendar out in fixed pixel sizes. */
.ajax__calendar_container {
  z-index: 1000; border: 1px solid var(--lv-border, #e5e7eb) !important; border-radius: 10px;
  background: #fff !important; box-shadow: 0 10px 25px rgba(15, 23, 42, .15);
}
/* the calendar is built from tables: undo the grid styles above (padding, borders, stripes) inside it */
.main-content .ajax__calendar_container table, .ajax__calendar_container table {
  border: 0 !important; border-radius: 0; background: transparent; font-size: 11px; overflow: visible;
}
.main-content .ajax__calendar_container table td, .main-content .ajax__calendar_container table th, .ajax__calendar_container table td {
  padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit; vertical-align: middle !important;
}
.main-content .ajax__calendar_container table tbody tr:nth-child(even),
.main-content .ajax__calendar_container table tbody tr:hover > td { background: transparent !important; }
.ajax__calendar_title { font-weight: 600; color: #111827; cursor: pointer; }
.ajax__calendar_dayname { font-weight: 600; color: #6b7280; border-bottom: 1px solid #e5e7eb !important; }
.ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year { border-radius: 4px; }
.ajax__calendar_hover .ajax__calendar_day, .ajax__calendar_hover .ajax__calendar_month, .ajax__calendar_hover .ajax__calendar_year,
.ajax__calendar_hover .ajax__calendar_title { color: var(--accent, #2563eb) !important; background: #eff6ff; }
.ajax__calendar_active .ajax__calendar_day, .ajax__calendar_active .ajax__calendar_month, .ajax__calendar_active .ajax__calendar_year {
  background: var(--accent, #2563eb) !important; color: #fff !important; border: 0 !important;
}
.ajax__calendar_other .ajax__calendar_day { color: #d1d5db !important; }
.ajax__calendar_today { color: var(--accent, #2563eb); cursor: pointer; }

/* ---------- login: brand panel + sign-in form ---------- */
body.lv-login-page { background: #f8fafc; }
.lv-login { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; }
.lv-login-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 48px 56px;
  color: #fff;
  background:
    repeating-radial-gradient(circle at 115% 112%, rgba(255, 255, 255, .055) 0 1px, transparent 1px 30px),
    radial-gradient(700px 480px at 0% 100%, rgba(34, 197, 94, .22), transparent 65%),
    linear-gradient(160deg, #0b1f3a 0%, #0f2b4c 55%, #0c3a30 100%);
}
.lv-brand-logo { max-height: 34px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
.lv-brand-copy h2 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 14px; color: #fff; }
.lv-brand-copy p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 440px; margin: 0 0 28px; }
.lv-points { list-style: none; padding: 0; margin: 0; }
.lv-points li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(255, 255, 255, .9); margin: 0 0 14px; }
.lv-points .fa {
  flex: 0 0 38px; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 10px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #4ade80; font-size: 16px;
}
.lv-brand-foot { font-size: 13px; color: rgba(255, 255, 255, .55); }

.lv-login-main { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.lv-form { width: 100%; max-width: 400px; }
.lv-form-logo { display: none; max-height: 30px; width: auto; margin-bottom: 28px; }
.lv-form h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #111827; margin: 0 0 6px; }
.lv-sub { color: #6b7280; font-size: 14.5px; margin: 0 0 26px; }
.lv-label { display: block; width: auto; font-size: 13px; font-weight: 600; color: #374151; margin: 18px 0 7px; }
.lv-label-row { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 7px; }
.lv-label-row .lv-label { margin: 0; }
.lv-label-row a { font-size: 13px; font-weight: 600; color: #15803d; }
.lv-label-row a:hover { color: #116632; filter: none; text-decoration: underline; }

/* "Sign in as": two buttons that set the hidden type list (the list shows if scripts are off) */
.lv-role { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.js .lv-role { display: grid; }
.js .lv-role-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lv-role button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff;
  font-size: 14px; font-weight: 600; color: #374151; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
}
.lv-role button .fa { font-size: 16px; color: #9ca3af; }
.lv-role button:hover { border-color: #9ca3af; }
.lv-role button.on { border-color: #15803d; background: #f0fdf4; color: #166534; box-shadow: 0 0 0 3px rgba(21, 128, 61, .14); }
.lv-role button.on .fa { color: #15803d; }

.lv-field { position: relative; }
.lv-field > .fa { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 15px; pointer-events: none; }
.lv-login .lv-field .form-control {
  height: 46px; min-height: 46px; padding: 10px 44px 10px 42px;
  border: 1px solid #d1d5db; border-radius: 10px; font-size: 14.5px; background: #fff;
}
.lv-login .form-control:focus { border-color: #15803d; box-shadow: 0 0 0 3px rgba(21, 128, 61, .15); }
.lv-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #6b7280; cursor: pointer;
}
.lv-eye:hover { background: #f3f4f6; color: #111827; }

.lv-btn {
  display: block; width: 100%; height: 48px; margin-top: 26px;
  border: 0; border-radius: 10px; background: #15803d; color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 6px 16px rgba(21, 128, 61, .28);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.lv-btn:hover, .lv-btn:focus { background: #116632; box-shadow: 0 8px 20px rgba(21, 128, 61, .34); outline: 0; }
.lv-btn:active { transform: translateY(1px); }
.lv-secure { margin: 24px 0 0; text-align: center; font-size: 12.5px; color: #6b7280; }
.lv-secure .fa { color: #15803d; margin-right: 6px; }

@media (max-width: 900px) {
  .lv-login { grid-template-columns: 1fr; }
  .lv-login-brand { display: none; }
  .lv-login-main { align-items: flex-start; padding: 40px 20px; }
  .lv-form-logo { display: block; }
}
/* declaration popup */
#pnlpopup {
  border: 0 !important;
  border-radius: var(--lv-radius);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  padding: 14px !important;
  font-family: var(--lv-font);
}
#pnlpopup tr[style*="#0924BC"], #pnlpopup tr[style*="#0924bc"] { background: #0f2b4c !important; }
#pnlpopup tr[style*="#0924BC"] td { border-radius: var(--lv-radius-sm); line-height: 1.55; font-size: 14px !important; text-align: left; padding: 14px !important; }
#pnlpopup label, [id$="pnlpopup"] label { width: auto; display: inline; font-weight: 600; margin-left: 6px; }
#pnlpopup input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; accent-color: #15803d; }
#mask { background: #111827 !important; opacity: .55 !important; }
/* the same popup on the dealer bill list */
[id$="pnlpopup"] { border-radius: var(--lv-radius); }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .top-bar { height: auto; padding: 12px 4px 10px; }
  .top-bar .row > div { flex: 0 0 100%; max-width: 100%; }
  .top-bar .logo { text-align: center; margin-bottom: 8px; }
  .user-actions { justify-content: center; float: none; }
  /* the sidebar becomes a dark strip with the menu button; the menu opens below it */
  .left-bar { width: 100%; top: auto; min-height: 50px; height: auto !important; }
  .left-bar::after { content: ""; display: block; clear: both; }
  .right-panel { margin-left: 0; }
  .toggle-btn { color: #fff; margin: 9px 16px; font-size: 26px !important; }
  .breads { padding: 14px 16px 6px; }
  .page-title { margin: 0 12px 14px; padding: 12px 14px; }
  .page-title h1, .page-title h3 { font-size: 19px; }
  .page-title .float-right { margin-left: 0; }
  .main-content { margin: 0 12px 16px; padding: 16px; }
}