/* ============ FFC ERP — Acumatica-style theme ============ */
:root {
  /* FFC ERP palette — navy blue matched to the FFC logo mark */
  --blue: #12296b;
  --blue-dark: #0e2158;
  --blue-darker: #0a1740;
  /* The working blue: links, the active tab, a focused field. Lighter than the brand navy so it
     reads as "you can act on this" rather than as chrome. */
  --accent: #1a5bb8;
  --accent-soft: #e8f0fb;
  /* The rail carries the brand, as the dashboard design does: navy panel, light labels. */
  --sidebar-bg: #12296b;
  --sidebar-text: #ccd7ef;
  --sidebar-hover: rgba(255,255,255,.10);
  --sidebar-active: #ffffff;
  --topbar-bg: #12296b;
  --bg: #f1f5fb;
  --panel: #ffffff;
  --border: #e2e8f1;
  --border-strong: #cfd8e6;
  --text: #2b3540;
  --text-dim: #6b7785;
  --green: #2e9e5b;
  --red: #d64541;
  --amber: #e8a33d;
  --grid-header: #f3f7fd;
  --grid-hover: #edf1fa;
  --grid-sel: #d7e0f5;
  /* Every other row tinted, as the dashboard design has them. */
  --row-alt: #f6f9fe;
  --shadow: 0 1px 3px rgba(20,40,60,.12);
  --shadow-card: 0 2px 10px rgba(23,43,77,.07);
  --radius: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  /* The menu rail is a named width because the grid column and the flyout both position from it. */
  --rail-w: 216px;
  font-size: 13px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}
.hidden { display: none !important; }
h2 { font-weight: 600; }
button { font-family: inherit; }
input, select, textarea {
  font-family: inherit; font-size: 13px; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 8px; background: #fff; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,91,184,.16); }
input:disabled, select:disabled { background: #f3f5f8; color: var(--text-dim); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3ccd6; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ LOGIN ============ */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(135deg, var(--blue-darker) 0%, var(--blue) 55%, var(--accent) 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.login-shell {
  display: flex; background: var(--panel); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,20,40,.45); max-width: 960px; width: 92vw;
}
.login-brand-panel {
  flex: 1 1 54%; background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  display: flex; align-items: center; justify-content: center; padding: 30px 26px;
}
.brand-poster { width: 100%; max-width: 420px; height: auto; display: block; }
.login-panel {
  flex: 1 1 46%; min-width: 320px; padding: 40px 40px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-logo {
  width: 58px; height: auto; margin: 0 auto 12px; display: block;
  filter: drop-shadow(0 2px 6px rgba(10,30,60,.25));
}
.login-brand h1 { font-size: 22px; color: var(--blue-darker); letter-spacing: .3px; }
.login-brand p { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
#login-form label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
#login-form input, #login-form select { width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 14px; }
.login-hint { text-align: center; color: var(--text-dim); font-size: 11px; margin-top: 14px; }
.login-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c0; border-radius: var(--radius); padding: 8px 12px; font-size: 12.5px; margin-top: 10px; }
.login-footer { color: rgba(255,255,255,.85); font-size: 11px; margin-top: 22px; text-align: center; }
.login-tagline { color: rgba(255,255,255,.65); font-size: 10.5px; letter-spacing: .6px; margin-top: 4px; text-transform: uppercase; }
@media (max-width: 860px) {
  .login-shell { flex-direction: column; max-width: 440px; width: 90vw; }
  .login-brand-panel { padding: 26px 22px 6px; }
  .brand-poster { max-width: 280px; }
  .login-panel { padding: 26px 32px 24px; }
}

/* ============ TOP BAR ============ */
#app { display: grid; grid-template-rows: 46px 1fr; grid-template-columns: var(--rail-w) 1fr; height: 100vh; height: 100dvh;
  grid-template-areas: "topbar topbar" "sidebar main"; }
/* Collapsing sets the same token, so the flyout's left edge follows the rail rather than hanging
   216px out over the content. */
#app.nav-toggled { --rail-w: 0px; }
#topbar {
  /* The per-company colour arrives as --topbar-bg from TopBar.razor; the brand navy is the fallback. */
  grid-area: topbar; background: var(--topbar-bg, var(--blue)); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 0 14px; z-index: 20;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(10,23,64,.18);
}
#nav-toggle { background: none; border: none; color: #fff; font-size: 17px; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
#nav-toggle:hover { background: rgba(255,255,255,.15); }
.top-logo { display: flex; align-items: center; gap: 8px; }
.top-logo-mark { width: 28px; height: auto; flex-shrink: 0; }
.top-logo-text { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.top-logo-text span { font-weight: 400; opacity: .9; }
#global-search-wrap { flex: 1; max-width: 480px; margin-left: 18px; position: relative; }
#global-search {
  width: 100%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  color: #fff; padding: 6px 12px; border-radius: 15px;
}
#global-search::placeholder { color: rgba(255,255,255,.7); }
#global-search:focus { background: #fff; color: var(--text); box-shadow: none; }
#global-search:focus::placeholder { color: var(--text-dim); }
#search-results {
  position: absolute; top: 34px; left: 0; right: 0; background: #fff; color: var(--text);
  border-radius: 6px; box-shadow: 0 8px 30px rgba(0,20,40,.3); max-height: 380px; overflow: auto; z-index: 50;
}
.sr-group { padding: 6px 12px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); font-weight: 700; }
.sr-item { padding: 7px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
a.sr-item { color: inherit; text-decoration: none; }
.sr-item:hover, .sr-item.active { background: var(--grid-hover); }
.sr-item small { color: var(--text-dim); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#company-badge { font-size: 12px; font-weight: 600; background: rgba(255,255,255,.14); padding: 5px 12px; border-radius: 4px; cursor: pointer; }
#company-badge:hover { background: rgba(255,255,255,.22); }
#company-badge small { opacity: .75; font-weight: 400; margin-left: 6px; }
#company-badge::after { content: '▾'; font-size: 9px; opacity: .6; margin-left: 6px; }
#company-badge .dropdown-menu { color: var(--text); font-weight: 400; cursor: default; }
#company-badge .dd-hint { padding: 4px 16px 7px; font-size: 10.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
#company-badge .dropdown-menu .dd-item { white-space: normal; cursor: pointer; }
#company-badge .dd-item.active { background: var(--grid-hover); }
#company-badge .dd-item.picked { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--grid-hover); }
#company-badge .dd-item b { font-weight: 700; }
#company-badge .dd-item .branch-addr { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
#company-badge .dd-item.dd-company { background: var(--panel-alt, #f5f6f8); }
#company-badge .dd-item.dd-branch { padding-left: 28px; font-size: 11.5px; }
#company-badge .dd-group-sep { border-top: 1px solid var(--border); margin-top: 4px; }
.top-icon { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; }
.top-icon:hover { background: rgba(255,255,255,.15); }
#user-badge {
  width: 32px; height: 32px; border-radius: 50%; background: #e8a33d; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; cursor: pointer;
}

/* ============ WORKSPACE RAIL (Acumatica-style icon rail + flyout) ============ */
#sidebar {
  grid-area: sidebar; overflow-y: auto; overflow-x: hidden; padding: 10px 0 20px;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--blue-darker) 100%);
  border-right: none;
}
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.rail-item {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 10px 14px; margin: 2px 10px; border-radius: 10px; cursor: pointer; color: var(--sidebar-text);
  text-align: left; transition: background .14s ease, color .14s ease;
}
.rail-item .ico { font-size: 17px; line-height: 1; width: 22px; flex-shrink: 0; text-align: center; color: var(--sidebar-text); }
.rail-item .lbl { font-size: 13px; line-height: 1.2; color: var(--sidebar-text); }
.rail-item:hover { background: var(--sidebar-hover); }
.rail-item:hover .ico, .rail-item:hover .lbl { color: var(--sidebar-active); }
/* The screen you are on is a filled pill, not a line in the margin. */
.rail-item.active { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.rail-item.active .ico, .rail-item.active .lbl { color: var(--sidebar-active); }
.rail-item.active .lbl { font-weight: 600; }

/* flyout workspace menu */
#ws-flyout {
  position: fixed; left: var(--rail-w); top: 46px; bottom: 0; width: 360px; max-width: 86vw; z-index: 40;
  background: var(--panel); border-right: 1px solid var(--border); box-shadow: 10px 0 34px rgba(20,30,50,.16);
  overflow-y: auto; padding: 12px 14px 28px;
  animation: ws-slide .16s ease-out;
}
@keyframes ws-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* Covers everything but the rail and the menu, so a click anywhere else dismisses the menu. */
#ws-flyout-backdrop { position: fixed; inset: 46px 0 0 0; z-index: 39; background: rgba(20,35,50,.12); }
#ws-flyout h3 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim);
  padding: 4px 10px 10px; margin-bottom: 4px;
}
/* A group name is a fold: its screens appear under it when picked, and the caret turns to say so. */
.ws-cat {
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text);
  margin: 2px 0; padding: 10px 10px; border-radius: 10px; cursor: pointer; user-select: none;
  transition: background .13s ease, color .13s ease;
}
.ws-cat:hover { background: var(--accent-soft); color: var(--accent); }
.ws-cat.open { background: var(--accent-soft); color: var(--accent); }
.ws-cat .chev { font-size: 10px; width: 10px; flex-shrink: 0; color: var(--text-dim); transition: transform .16s ease; }
.ws-cat:hover .chev, .ws-cat.open .chev { color: var(--accent); }
.ws-cat.open .chev { transform: rotate(90deg); }
.ws-cat-title { flex: 1 1 auto; min-width: 0; }

/* The screens of the open group, hung off a hairline so they read as belonging to it. */
.ws-links {
  margin: 2px 0 10px 15px; padding-left: 11px; border-left: 2px solid var(--border);
  animation: ws-unfold .16s ease-out;
}
@keyframes ws-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ws-link {
  display: block; padding: 7px 10px; border-radius: 8px; color: var(--text); cursor: pointer;
  font-size: 13px; text-decoration: none; transition: background .12s ease, color .12s ease;
}
.ws-link:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
/* The screen you are on, named inside its own group. */
.ws-link.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#app.nav-toggled #sidebar { display: none; }
#sidebar-backdrop { display: none; }

/* ============ MAIN ============ */
#main { grid-area: main; display: flex; flex-direction: column; overflow: hidden; }
#screen-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 14px 22px 10px; background: var(--bg);
}
#breadcrumb { font-size: 11px; color: var(--text-dim); margin-bottom: 2px; }
#breadcrumb a { color: var(--blue); text-decoration: none; cursor: pointer; }
#breadcrumb a:hover { text-decoration: underline; }
#screen-title { font-size: 19px; color: #1d2833; }
#screen-actions { display: flex; gap: 8px; }
#screen-body { flex: 1; overflow: auto; padding: 0 22px 26px; }

/* ============ BUTTONS ============ */
.btn {
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
  padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn { transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.primary { box-shadow: 0 1px 4px rgba(26,91,184,.35); }
.btn.primary:hover { color: #fff; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: #fdf0ef; border-color: var(--red); }
.btn.release { background: var(--green); border-color: var(--green); color: #fff; }
.btn.release:hover { background: #257f49; }
.btn:disabled { opacity: .5; cursor: default; pointer-events: none; }
.btn.small { padding: 3px 10px; font-size: 12px; }

/* ============ PANELS / CARDS ============ */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: box-shadow .16s ease; }
.panel:hover { box-shadow: 0 4px 18px rgba(23,43,77,.10); }
.panel + .panel { margin-top: 14px; }
.panel-title { padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--border); font-size: 13px; display:flex; justify-content:space-between; align-items:center; }

/* ============ GRID ============ */
.grid-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.grid-filters {
  display: flex; align-items: center; gap: 16px; padding: 6px 10px; background: #eaf1fb; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.grid-filter { display: flex; align-items: center; gap: 5px; }
.grid-filter label { font-size: 11.5px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.grid-filter select { font-size: 12px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); background: #fff; }
.grid-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.grid-toolbar .spacer { flex: 1; }
.grid-search { width: 220px; padding: 5px 12px; border-radius: var(--radius-pill); }
.grid-count { color: var(--text-dim); font-size: 12px; margin-left: 8px; }
.grid-scroll { overflow: auto; max-height: calc(100vh - 235px); }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th {
  background: var(--grid-header); text-align: left; padding: 7px 10px; font-weight: 700;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; cursor: pointer; user-select: none;
  white-space: nowrap; color: var(--accent); z-index: 2;
  /* Column names as small capitals, as the dashboard design has them. The padding is untouched,
     so the header keeps its height and the list its density. */
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
}
table.grid th .sort-arrow { color: var(--blue); font-size: 10px; margin-left: 4px; }
table.grid td { padding: 6px 10px; border-bottom: 1px solid #e8ecf1; white-space: nowrap; }
table.grid tbody tr { cursor: pointer; transition: background .12s ease; }
table.grid tbody tr:nth-child(even) { background: var(--row-alt); }
table.grid tbody tr:hover { background: var(--grid-hover); }
table.grid tbody tr.selected { background: var(--grid-sel); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid a.doclink { color: var(--blue); text-decoration: none; font-weight: 600; }
table.grid a.doclink:hover { text-decoration: underline; }
.grid-empty { padding: 40px; text-align: center; color: var(--text-dim); }

/* ============ ACUMATICA-STYLE LIST (AcuGrid) ============ */
.acu-grid { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; font-size: 12px; min-height: 0; }
.acu-toolbar, .acu-bar { display: flex; align-items: center; gap: 2px; padding: 3px 6px; }
.acu-toolbar { border-bottom: 1px solid #e8ecf1; }
.acu-bar { border-bottom: 1px solid var(--border); gap: 4px; }
.acu-bar .spacer { flex: 1; }
.acu-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: 3px; background: transparent; color: #4a5866; cursor: pointer;
}
.acu-icon svg { width: 15px; height: 15px; }
.acu-icon:hover { background: #eef1f5; border-color: #d5dbe3; color: var(--blue); }
.acu-icon.on { background: var(--grid-sel); color: var(--blue); }
.acu-icon:disabled { opacity: .4; pointer-events: none; }
.acu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acu-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; border: 1px solid #c9d1db;
  border-radius: 12px; background: #fff; font-size: 12px; color: #34404c; cursor: pointer;
}
.acu-chip.on { background: #e3eaf8; border-color: #9fb2d8; }
.acu-chip select { border: 0; background: transparent; font-size: 12px; font-weight: 600; padding: 1px 2px; cursor: pointer; outline: none; }
.acu-more { position: relative; }
.acu-chooser {
  position: absolute; right: 0; top: 28px; z-index: 30; width: 250px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 8px 10px;
}
.acu-chooser h5 { margin: 0 0 6px; font-size: 12px; }
.acu-chooser-list { max-height: 320px; overflow: auto; }
.acu-chooser-list label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; white-space: nowrap; }
.acu-chooser-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.acu-search { position: relative; margin-left: 4px; }
.acu-search input { width: 190px; height: 24px; padding: 2px 24px 2px 7px; border: 1px solid #c9d1db; border-radius: 3px; font-size: 12px; }
.acu-search svg { position: absolute; right: 6px; top: 5px; width: 14px; height: 14px; color: #6b7785; pointer-events: none; }
.acu-scroll { overflow: auto; max-height: calc(100vh - 200px); }
table.acu-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.acu-table thead { position: sticky; top: 0; z-index: 3; }
table.acu-table th {
  position: relative; background: var(--grid-header); color: var(--accent); font-weight: 700; text-align: left;
  vertical-align: bottom; padding: 3px 6px; border-bottom: 1px solid var(--border-strong); border-right: 1px solid var(--border);
  white-space: normal; line-height: 1.2; overflow: hidden; cursor: pointer; user-select: none;
  letter-spacing: .3px;
}
table.acu-table th .acu-th { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.acu-table th.num { text-align: right; }
table.acu-table th.chk, table.acu-table td.chk { text-align: center; padding-left: 0; padding-right: 0; }
table.acu-table th input[type=checkbox], table.acu-table td input[type=checkbox] { margin: 0; width: 13px; height: 13px; vertical-align: middle; }
.acu-resizer { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 1; }
body.acu-resizing, body.acu-resizing * { cursor: col-resize !important; user-select: none !important; }
table.acu-table td {
  padding: 2px 6px; height: 22px; border-bottom: 1px solid #edf0f3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: #1f2933;
}
table.acu-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.acu-table th.acu-sel, table.acu-table td.acu-sel,
table.acu-table th.acu-ico, table.acu-table td.acu-ico { padding: 0; text-align: center; color: #9aa5b1; }
table.acu-table .acu-sel svg { width: 12px; height: 12px; color: var(--blue); vertical-align: middle; }
table.acu-table .acu-ico svg { width: 13px; height: 13px; vertical-align: middle; }
table.acu-table td.acu-ico.has { color: var(--blue); }
table.acu-table td.acu-ico:hover { color: var(--blue); }
table.acu-table tbody tr { cursor: default; }
table.acu-table tbody tr:nth-child(even) td { background: var(--row-alt); }
table.acu-table tbody tr:hover td { background: var(--grid-hover); }
table.acu-table tbody tr.selected td { background: var(--accent-soft); }
table.acu-table tbody tr.current td { background: var(--grid-sel); }
table.acu-table a.acu-link { color: #1a5bb8; text-decoration: underline; }
table.acu-table a.acu-link:hover { color: var(--blue); }
table.acu-table .acu-filter-row th { padding: 2px 3px; background: #f7f9fb; vertical-align: middle; cursor: default; }
table.acu-table .acu-filter-row input { width: 100%; height: 20px; font-size: 11.5px; padding: 1px 4px; border: 1px solid #c9d1db; border-radius: 2px; box-sizing: border-box; }
table.acu-table tr.acu-empty td { padding: 30px; text-align: center; color: var(--text-dim); height: auto; }
.acu-footer { padding: 3px 8px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 11.5px; }

/* ============ ACUMATICA-STYLE RECORD FORM (AcuField) ============ */
.acu-form { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-size: 12px; color: var(--text); }
.acu-record-bar { padding: 3px 6px; }
.acu-record-bar .spacer { flex: 1; }
.acu-icon.wide { width: 34px; gap: 1px; }
.acu-icon .caret { font-size: 8px; line-height: 1; }
.acu-icon.acu-files { width: auto; padding: 0 7px; gap: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; }
.acu-icon.acu-files.has { color: var(--blue); }
.acu-drop { position: relative; display: inline-flex; }
.acu-drop-backdrop { position: fixed; inset: 0; z-index: 20; }
.acu-drop-menu {
  position: absolute; left: 0; top: 26px; z-index: 25; min-width: 180px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 4px 0;
}
.acu-drop-menu .dd-item { padding: 5px 14px; cursor: pointer; white-space: nowrap; }
.acu-drop-menu .dd-item:hover { background: var(--grid-hover); }
.acu-drop-menu .dd-item.disabled { color: #b3bdc9; pointer-events: none; }
.acu-drop-menu .dd-sep { border-top: 1px solid var(--border); margin: 4px 0; }

.acu-form .tabs { background: transparent; padding: 0 8px; gap: 0; border-bottom: 1px solid var(--border); }
.acu-form .tab {
  padding: 7px 12px 5px; font-size: 12px; font-weight: 400; color: #4a5866; text-transform: uppercase;
  border-bottom-width: 2px; letter-spacing: .1px;
}
.acu-form .tab:hover { color: #1a5bb8; }
.acu-form .tab.active { color: #1a5bb8; border-bottom-color: #1a5bb8; }

/* A row: label | control | pencil. Columns set the widths through the two variables. */
.acu-field {
  display: grid; grid-template-columns: var(--acu-label, 130px) var(--acu-input, 135px) 18px;
  align-items: center; column-gap: 4px; min-height: 24px;
}
.acu-field > label { position: relative; padding-left: 8px; color: #34404c; font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acu-field > label.req::before { content: "*"; position: absolute; left: 0; color: #34404c; }
.acu-field.short { --acu-input: 65px; }
.acu-value { min-width: 0; }
.acu-value input[type=text], .acu-value input[type=date], .acu-value input[type=number], .acu-value select {
  width: 100%; height: 21px; padding: 1px 4px; border: 0; border-bottom: 1px solid #b9c3cf; border-radius: 0;
  background: transparent; font-size: 12px; color: #1f2933; box-shadow: none; box-sizing: border-box;
}
.acu-value select { -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.acu-value select:not(:disabled):hover, .acu-value select:not(:disabled):focus {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7785'/%3E%3C/svg%3E") no-repeat right 3px center / 8px 5px;
  padding-right: 14px;
}
.acu-value input:focus, .acu-value select:focus { border-bottom-color: #1a5bb8; box-shadow: none; outline: none; }
.acu-value input:disabled, .acu-value select:disabled { background: transparent; color: #1f2933; border-bottom-color: #e3e7ec; cursor: default; opacity: 1; }
.acu-value input.num { text-align: right; font-variant-numeric: tabular-nums; }
.acu-value input[type=date]::-webkit-calendar-picker-indicator { width: 11px; height: 11px; margin-left: 2px; opacity: .55; cursor: pointer; }
.acu-value input[type=date]:disabled::-webkit-calendar-picker-indicator { display: none; }
.acu-pencil { display: inline-flex; align-items: center; justify-content: center; }
.acu-pencil a { display: inline-flex; color: #6b7785; }
.acu-pencil a:hover { color: #1a5bb8; }
.acu-pencil svg { width: 13px; height: 13px; }
.acu-check { display: inline-flex; align-items: center; gap: 6px; color: #34404c; cursor: pointer; white-space: nowrap; height: 21px; }
.acu-check input { width: 13px; height: 13px; margin: 0; accent-color: #1a5bb8; }
.acu-check:has(input:disabled) { color: #6b7785; cursor: default; }
.acu-lookup { position: relative; }
.acu-lookup input[type=text] { padding-right: 20px; }
.acu-lookup svg { position: absolute; right: 3px; top: 4px; width: 13px; height: 13px; color: #34404c; pointer-events: none; }

.acu-header { display: grid; grid-template-columns: max-content max-content; column-gap: 34px; padding: 8px 12px 6px; border-bottom: 1px solid var(--border); }
.acu-header .acu-field { --acu-label: 80px; --acu-input: 110px; }
.acu-header .acu-field:nth-child(2) { --acu-label: 90px; --acu-input: 165px; }
.acu-header .acu-field.span2 { grid-column: 1 / -1; grid-template-columns: 80px 1fr 18px; }

.acu-tab-body { padding: 4px 0 12px; }
.acu-tab-body > .panel { margin: 10px 12px; box-shadow: none; }
.acu-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 36px; padding: 2px 12px; }
.acu-col { display: flex; flex-direction: column; }
.acu-columns .acu-col:nth-child(2) { --acu-label: 80px; }
.acu-columns .acu-col.gl { --acu-label: 200px; --acu-input: 230px; }
/* General Ledger Preferences (GL102000): two columns of settings, each under its own rule, with the chart
   order as a list of choices. */
.acu-gl-prefs-body { display: flex; gap: 46px; padding: 10px 12px 16px; flex-wrap: wrap; }
.acu-gl-prefs-body .acu-col { --acu-label: 190px; --acu-input: 175px; }
.acu-gl-prefs-body .acu-section-title { margin-top: 12px; }
.acu-gl-prefs-body .acu-col > .acu-section-title:first-child { margin-top: 0; }
/* Inter-Branch Account Mapping (GL101010): the branches, and the mappings of the one picked. */
/* Consolidation (GL103000): a wide grid of units, each column as narrow as Acumatica keeps it. */
/* Payment Methods (CA204000): the method on the left, its switches beside it, its tabs beneath. */
.acu-pay-method-head { display: flex; gap: 40px; flex-wrap: wrap; }
.acu-pay-method-head .acu-col { --acu-label: 140px; --acu-input: 190px; }
.acu-pay-method .acu-subgrid { padding: 6px 12px 16px; overflow-x: auto; }
table.acu-pay-method-accounts { min-width: 1250px; }
table.acu-pay-method-accounts th { white-space: normal; }
table.acu-pay-method-accounts input[type=text] { width: 100%; }
.acu-pay-method-settings { padding: 10px 12px; --acu-label: 220px; --acu-input: 200px; }
.acu-pay-method-settings .acu-field.wide-input { --acu-input: 300px; }

/* Cash Management Preferences (CA101000): two columns of settings under their own rules. */
.acu-ca-body { display: flex; gap: 60px; padding: 10px 12px 16px; flex-wrap: wrap; }
.acu-ca-body .acu-col { --acu-label: 230px; --acu-input: 175px; }
.acu-ca-body .acu-col .acu-field.short { --acu-input: 90px; }
.acu-ca-body .acu-col .acu-field.wide-input { --acu-input: 260px; }
.acu-ca-body .acu-section-title { margin-top: 12px; }
.acu-ca-body .acu-col > .acu-section-title:first-child { margin-top: 0; }

/* Funds Transfers (CA301000): the two sides of the transfer, and the charges the bank took. */
.acu-transfer-head { display: flex; gap: 50px; flex-wrap: wrap; }
.acu-transfer-head .acu-col { --acu-label: 120px; --acu-input: 150px; }
.acu-transfer-head .acu-col .acu-field.wide-input { --acu-input: 320px; }
.acu-transfer-sides { padding: 4px 12px 0; }
.acu-transfer-side + .acu-transfer-side { margin-top: 10px; }
.acu-transfer-grid { display: flex; gap: 50px; flex-wrap: wrap; padding-top: 4px; }
.acu-transfer-grid .acu-col { --acu-label: 130px; --acu-input: 175px; }
.acu-rate { display: flex; gap: 4px; }
.acu-rate input[type=text] { width: 56px; }
.acu-rate input[type=number] { width: 100px; }
.acu-transfer .acu-subgrid { padding: 10px 12px 16px; overflow-x: auto; }
table.acu-transfer-charges { min-width: 2050px; }
table.acu-transfer-charges th { white-space: normal; }
table.acu-transfer-charges input[type=text] { width: 100%; }
table.acu-transfer-charges input[type=number] { width: 90px; }

/* Reconciliation Statements (CA302000): the statement above the account's own ledger lines. */
.acu-recon-head { display: flex; gap: 50px; flex-wrap: wrap; }
.acu-recon-head .acu-col { --acu-label: 155px; --acu-input: 175px; }
.acu-recon-head .acu-col:nth-child(2) input { text-align: right; }
.acu-recon-head .acu-col.acu-recon-counts { --acu-label: 125px; --acu-input: 70px; }
.acu-recon-head .acu-recon-counts input { text-align: right; }
.acu-recon .acu-subgrid { padding: 6px 12px 16px; overflow-x: auto; }
.acu-recon-filter { height: 22px; font-size: 12px; margin-left: auto; min-width: 145px; }
table.acu-recon-lines { min-width: 1780px; }
table.acu-recon-lines th.chk, table.acu-recon-lines td.chk { width: 64px; text-align: center; }
table.acu-recon-lines td.num, table.acu-recon-lines th.num { text-align: right; }
table.acu-recon-lines input[type=date] { width: 112px; }
.acu-recon-foot { padding: 5px 2px 0; color: var(--text-dim); font-size: 11.5px; }
.acu-recon-approvals { padding: 10px 12px 16px; --acu-label: 145px; --acu-input: 175px; }
.acu-recon-approvals .acu-rpt-note { max-width: 620px; padding-top: 6px; }

/* Cash Accounts (CA202000): the account on the left, its switches on the right, its tabs beneath. */
.acu-cash-head { display: flex; gap: 60px; flex-wrap: wrap; }
.acu-cash-head .acu-col { --acu-label: 175px; --acu-input: 230px; }
.acu-cash-account .acu-subgrid { padding: 6px 12px 16px; overflow-x: auto; }
table.acu-cash-methods { min-width: 1500px; }
table.acu-cash-entry-types { min-width: 1900px; }
table.acu-cash-entry-types th { white-space: normal; }
table.acu-cash-entry-types input[type=text] { width: 100%; }
table.acu-cash-methods th { white-space: normal; }
table.acu-cash-methods input[type=text] { width: 100%; }
.acu-cash-signature { padding: 10px 12px; --acu-label: 140px; }

/* Unit Sets (CS206020): the tree of units beside the ones under the one picked. */
.acu-unit-set-head { display: flex; gap: 50px; flex-wrap: wrap; }
.acu-unit-set-head .acu-col { --acu-label: 100px; --acu-input: 160px; }
.acu-unit-panes { display: flex; gap: 14px; padding: 8px 12px 16px; align-items: flex-start; }
.acu-unit-tree { width: 230px; flex: none; border: 1px solid #c9d3de; background: #fff; max-height: 520px; overflow: auto; }
.acu-unit-rows { flex: 1; min-width: 0; border: 1px solid #c9d3de; background: #fff; overflow-x: auto; }
table.acu-unit-set-table input[type=text] { width: 100%; }

/* Row Sets (CS206000): the head of the set, and the wide grid of its rows. */
.acu-row-set-head { display: flex; gap: 50px; flex-wrap: wrap; }
.acu-row-set-head .acu-col { --acu-label: 100px; --acu-input: 160px; }
.acu-row-set .acu-subgrid { padding: 6px 12px 16px; overflow-x: auto; }
table.acu-row-set-table { min-width: 1750px; }
table.acu-row-set-table th { white-space: normal; }
table.acu-row-set-table input[type=text] { width: 100%; }
table.acu-row-set-table input[type=number] { width: 54px; }
.acu-consol .acu-subgrid { padding: 8px 12px 16px; overflow-x: auto; }
.acu-consol-head { padding: 8px 12px 0; }
.acu-consol-head .acu-col { --acu-label: 210px; --acu-input: 175px; }
table.acu-consol-table { min-width: 1900px; }
table.acu-consol-table th { white-space: normal; }
table.acu-consol-table input[type=text], table.acu-consol-table input[type=url], table.acu-consol-table input[type=password] { width: 100%; }
.acu-th.acu-req::before { content: "*"; color: #c0392b; margin-right: 2px; }
.acu-budget-panes { display: flex; gap: 14px; padding: 8px 12px 16px; align-items: flex-start; }
.acu-budget-tree { width: 260px; flex: none; border: 1px solid #c9d3de; background: #fff; }
.acu-budget-rows { flex: 1; min-width: 0; border: 1px solid #c9d3de; background: #fff; overflow-x: auto; }
.acu-budget-panes .acu-rpt-caption { margin: 0; padding: 6px 8px; background: #f2f5f8; border-bottom: 1px solid #c9d3de; }
ul.acu-tree { list-style: none; margin: 0; padding: 2px 0 8px 14px; font-size: 12px; }
ul.acu-tree svg { width: 13px; height: 13px; vertical-align: -2px; }
.acu-tree-root, .acu-tree-node { display: inline-flex; gap: 5px; align-items: center; padding: 1px 6px; border-radius: 2px; cursor: pointer; }
.acu-tree-on { background: #e2ecf7; font-weight: 600; }
table.acu-budget-table { min-width: 860px; }
.acu-interbranch .acu-subgrid { padding: 8px 12px 16px; }
table.acu-interbranch-branches { width: 620px; }
table.acu-interbranch-branches tbody tr { cursor: pointer; }
table.acu-interbranch-map { width: 620px; }
.acu-interbranch .acu-rpt-caption { margin-top: 14px; }
tr.acu-row-selected > td { background: #eef3f8; }
.acu-fin-year-form { display: flex; gap: 60px; flex-wrap: wrap; }
.acu-fin-year-form .acu-col { --acu-label: 160px; --acu-input: 130px; }
table.acu-fin-year-table { width: 520px; }
table.acu-fin-year-table tr.acu-fin-year-new td { color: #5b6b7c; font-style: italic; }
.acu-gl-order { margin: 4px 0 0 8px; display: flex; flex-direction: column; gap: 2px; }
.acu-gl-order-title { font-size: 11px; margin-bottom: 2px; }
.acu-gl-order .acu-check { padding-left: 10px; }
.acu-section-title {
  display: flex; align-items: flex-end; gap: 4px; margin: 8px 0 4px; font-size: 12px; font-weight: 400;
  color: #34404c; text-transform: uppercase; letter-spacing: .2px;
}
.acu-section-title::after { content: ""; flex: 1; border-bottom: 1px solid #34404c; margin-bottom: 4px; min-width: 40px; }
.acu-col > .acu-section-title { width: calc(var(--acu-label, 130px) + var(--acu-input, 135px) + 26px); box-sizing: border-box; }

.acu-dispose { padding: 2px 12px 8px; background: #fdf8ef; border-bottom: 1px solid #efdcb8; }
.acu-dispose .acu-section-title { max-width: 420px; }
.acu-dispose-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.acu-dispose-row .acu-field { --acu-label: 105px; --acu-input: 120px; }
.acu-dispose .muted { margin: 4px 0 0; font-size: 11.5px; }

.acu-balance-summary { display: flex; flex-wrap: wrap; gap: 0 30px; padding: 6px 12px; --acu-label: 150px; }
.acu-balance-summary .acu-field.short { --acu-input: 100px; }
.acu-lines { padding: 2px 12px 0; overflow-x: auto; }
.acu-form table.lines { font-size: 12px; }
.acu-form table.lines th { padding: 3px 6px; border-bottom: 1px solid #c9d1db; white-space: normal; line-height: 1.2; vertical-align: bottom; }
.acu-form table.lines td { padding: 1px 4px; height: 22px; }
.acu-form table.lines input, .acu-form table.lines select { height: 20px; font-size: 12px; padding: 0 4px; }
.acu-form .lines-toolbar { padding: 3px 0; }

/* A grid inside a record tab (Components): the list grid's look with in-cell editors. */
.acu-subgrid { margin-top: -4px; }
.acu-subgrid .acu-toolbar { padding: 3px 8px; border-bottom: 1px solid var(--border); }
.acu-subgrid .acu-scroll { max-height: calc(100vh - 330px); min-height: 90px; }
table.acu-table th .acu-req { margin-right: 1px; }
table.acu-edit td { padding: 0 2px; }
table.acu-edit td.acu-sel, table.acu-edit td.acu-ico { padding: 0; }
table.acu-edit td > a.acu-link, table.acu-edit td > .acu-new { padding: 0 4px; }
table.acu-edit td.acu-ico a { color: inherit; display: inline-flex; }
table.acu-edit td.acu-ico a:hover { color: var(--blue); }
table.acu-edit .acu-new { color: #6b7785; }
table.acu-edit input[type=text], table.acu-edit input[type=date], table.acu-edit select {
  width: 100%; height: 20px; padding: 0 4px; border: 1px solid transparent; border-radius: 0; background: transparent;
  font-size: 12px; color: #1f2933; box-shadow: none; box-sizing: border-box;
}
table.acu-edit select { -webkit-appearance: none; appearance: none; cursor: pointer; }
table.acu-edit input:not(:disabled):hover, table.acu-edit select:not(:disabled):hover { border-color: #c9d1db; background-color: #fff; }
table.acu-edit input:focus, table.acu-edit select:focus { border-color: #1a5bb8; background-color: #fff; outline: none; box-shadow: none; }
table.acu-edit input:disabled, table.acu-edit select:disabled { background: transparent; color: #1f2933; opacity: 1; cursor: default; }
table.acu-edit input.num { text-align: right; font-variant-numeric: tabular-nums; }
table.acu-edit input[type=date]::-webkit-calendar-picker-indicator { width: 10px; height: 10px; margin: 0; opacity: .5; }
table.acu-edit input[type=date]:disabled::-webkit-calendar-picker-indicator { display: none; }
table.acu-edit tbody tr.current input, table.acu-edit tbody tr.current select { background-color: transparent; }

/* The Depreciation tab: a book lookup, then Period / Calculated / Depreciated groups per year. */
.acu-depr-book { padding: 4px 8px 2px; border-bottom: 1px solid var(--border); --acu-label: 60px; --acu-input: 170px; }
.acu-depr-book .acu-lookup select { padding-right: 20px; }
.acu-depr-book .acu-lookup select:not(:disabled):hover, .acu-depr-book .acu-lookup select:not(:disabled):focus { background: transparent; }
table.acu-depr-table th { vertical-align: middle; white-space: nowrap; }
table.acu-depr-table th.acu-depr-period, table.acu-depr-table td.acu-depr-period { border-left: 1px solid #d5dbe3; }
table.acu-depr-table td.num { padding-right: 8px; }
table.acu-depr-table td.acu-depr-period.last { font-weight: 600; color: var(--blue); }
.acu-depr-empty { padding: 24px 12px; color: var(--text-dim); }

/* Book Calendars: Book / Financial Year keys beside Start Date / Number of Periods, then the period grid. */
.acu-book-cal { max-width: 460px; }
.acu-book-cal-header { background: #f7f9fb; column-gap: 30px; }
.acu-book-cal-header .acu-field { --acu-label: 88px; --acu-input: 112px; }
.acu-book-cal-header .acu-field:nth-child(2n) { --acu-label: 100px; --acu-input: 60px; }
.acu-book-cal-header .acu-field.readonly > label { padding-left: 0; }
.acu-book-cal .acu-subgrid { margin-top: 0; }
.acu-book-cal .acu-scroll { max-height: calc(100vh - 250px); }

/* Convert Purchases to Assets: filter, transactions grid with a pager, details grid. */
.acu-text-btn {
  height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: #34404c; font-size: 12px; font-weight: 600; letter-spacing: .3px; cursor: pointer;
}
.acu-text-btn:hover { background: #eef1f5; border-color: #d5dbe3; color: var(--blue); }
.acu-text-btn:disabled { opacity: .45; pointer-events: none; }
.acu-convert-filter { display: flex; flex-wrap: wrap; gap: 0 40px; background: #f7f9fb; }
.acu-convert-filter .acu-col { display: flex; flex-direction: column; }
.acu-convert-filter .acu-col:first-child { --acu-label: 80px; --acu-input: 170px; }
.acu-convert-filter .acu-col:nth-child(2) { --acu-label: 80px; --acu-input: 170px; }
.acu-convert-filter .acu-check { font-size: 12px; }
.acu-view-select { height: 22px; font-size: 12px; padding: 0 4px; border: 1px solid #c9d1db; border-radius: 2px; min-width: 130px; }
.acu-convert-top { max-height: 300px; }
.acu-convert .acu-subgrid { margin-top: 0; border-top: 1px solid var(--border); }
.acu-convert-details .acu-scroll { max-height: calc(100vh - 560px); min-height: 110px; }
.acu-pager { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 2px 8px; border-top: 1px solid #edf0f3; }
.acu-pager-info { color: var(--text-dim); font-size: 11.5px; margin-right: 8px; }

/* Calculate Depreciation: filter beside the assets due, and a notice when the period has already run. */
.acu-depreciate-filter { display: flex; flex-wrap: wrap; gap: 0 40px; background: #f7f9fb; }
.acu-depreciate-filter .acu-col { display: flex; flex-direction: column; --acu-label: 100px; --acu-input: 165px; }
.acu-depreciate-filter .acu-col:nth-child(2) { --acu-label: 80px; }
.acu-depreciate-grid { max-height: calc(100vh - 290px); }
.acu-notice { padding: 5px 12px; background: #fdf8ef; border-bottom: 1px solid #efdcb8; color: #6b4f1d; font-size: 12px; }

/* Transfer Assets: date and reason, then Asset Transfer From beside To, then the assets. */
.acu-transfer-filter { background: #f7f9fb; border-bottom: 1px solid var(--border); padding: 6px 0 4px; }
.acu-transfer-top { padding: 0 12px; --acu-label: 95px; --acu-input: 150px; }
.acu-transfer-sides { padding-top: 0; }
.acu-transfer-sides .acu-col, .acu-transfer-sides .acu-col:nth-child(2) { --acu-label: 90px; --acu-input: 150px; }
.acu-transfer-sides .acu-section-title { margin-top: 4px; }
.acu-transfer-grid { max-height: calc(100vh - 360px); }
table.acu-table td.acu-edit-cell { padding: 0 2px; }
table.acu-table td.acu-edit-cell select {
  width: 100%; height: 20px; padding: 0 4px; border: 1px solid transparent; border-radius: 0; background: transparent;
  font-size: 12px; color: #1f2933; box-shadow: none; -webkit-appearance: none; appearance: none; cursor: pointer;
}
table.acu-table td.acu-edit-cell select:not(:disabled):hover { border-color: #c9d1db; background-color: #fff; }
table.acu-table td.acu-edit-cell select:focus { border-color: #1a5bb8; background-color: #fff; outline: none; }
table.acu-table td.acu-edit-cell select:disabled { opacity: 1; cursor: default; }

/* Split Assets: the asset beside the split date, then the new assets. */
.acu-split { max-width: 620px; }
.acu-split-header { display: flex; flex-wrap: wrap; gap: 0 34px; background: #f7f9fb; }
.acu-split-header .acu-col { display: flex; flex-direction: column; --acu-label: 75px; --acu-input: 150px; }
.acu-split-header .acu-col:nth-child(2) { --acu-label: 80px; }
.acu-split-header .acu-field.short { --acu-input: 95px; }
.acu-split .acu-scroll { max-height: calc(100vh - 280px); min-height: 110px; }

/* Dispose Assets: selection beside the disposal terms, then the assets with their proceeds. */
.acu-dispose-filter { display: flex; flex-wrap: wrap; gap: 0 34px; background: #f7f9fb; }
.acu-dispose-filter .acu-col { display: flex; flex-direction: column; --acu-label: 100px; --acu-input: 165px; }
.acu-dispose-filter .acu-col:nth-child(2) { --acu-label: 130px; }
.acu-dispose-filter .acu-field.short { --acu-input: 95px; }
.acu-dispose-grid { max-height: calc(100vh - 400px); min-height: 120px; }
.acu-row-warning { display: inline-block; width: 12px; height: 12px; line-height: 12px; border-radius: 50%; background: #e8a33d; color: #fff; font-size: 9px; font-weight: 700; text-align: center; cursor: help; }
table.acu-table .acu-cell-num { display: block; text-align: right; padding: 0 4px; font-variant-numeric: tabular-nums; }

/* Generate Book Calendars: From Year and To Year above the books. */
.acu-generate-cal { max-width: 560px; }
.acu-generate-cal-filter { display: flex; flex-wrap: wrap; gap: 0 30px; background: #f7f9fb; }
.acu-generate-cal-filter .acu-field { --acu-label: 70px; }
.acu-generate-cal-filter .acu-field.short { --acu-input: 80px; }

/* Close Financial Periods (Fixed Assets): Action, From Year and To Year above the periods. */
.acu-fa-close { max-width: 560px; }
.acu-fa-close-filter { display: block; background: #f7f9fb; --acu-label: 90px; --acu-input: 100px; }
.acu-fa-close-filter .acu-field.short { --acu-input: 100px; }
.acu-fa-close-grid { max-height: calc(100vh - 250px); }

/* Book Calendar Setup: the calendar settings beside the period count, then one year's periods. */
.acu-cal-setup { max-width: 560px; }
.acu-cal-setup-header { display: flex; flex-wrap: wrap; gap: 0 34px; background: #f7f9fb; }
.acu-cal-setup-header .acu-col { display: flex; flex-direction: column; --acu-label: 120px; --acu-input: 110px; }
.acu-cal-setup-header .acu-col:nth-child(2) { --acu-label: 105px; --acu-input: 70px; }
.acu-cal-setup-header .acu-field.short { --acu-input: 110px; }
.acu-cal-setup-header .acu-col:nth-child(2) .acu-field.short { --acu-input: 70px; }
.acu-cal-setup-note { margin: 6px 0 0 8px; max-width: 190px; font-size: 11px; color: var(--text-dim); }
.acu-icon.acu-icon-danger:not(:disabled) { color: #c0392b; }

/* Depreciation Methods: the compact method form. */
.acu-depr-method { max-width: 620px; }
.acu-depr-method-form { display: flex; flex-wrap: wrap; gap: 0 30px; background: #f7f9fb; }
.acu-depr-method-form .acu-col { display: flex; flex-direction: column; --acu-label: 140px; --acu-input: 200px; }
.acu-depr-method-form .acu-col:nth-child(2) { --acu-label: 120px; --acu-input: 100px; }
.acu-depr-method-form .acu-depr-method-rest { flex-basis: 100%; }
.acu-depr-method-form .acu-field.wide-input { --acu-input: 430px; }
.acu-depr-method-form .acu-field.short { --acu-input: 80px; }
.acu-depr-method-inline { display: flex; align-items: center; gap: 10px; }

/* Depreciation Table Methods: settings beside the life, then the yearly rates. */
.acu-depr-table { max-width: 620px; }
.acu-depr-table-form { display: flex; flex-wrap: wrap; gap: 0 30px; background: #f7f9fb; }
.acu-depr-table-form .acu-col { display: flex; flex-direction: column; --acu-label: 140px; --acu-input: 170px; }
.acu-depr-table-form .acu-col:nth-child(2) { --acu-label: 110px; --acu-input: 110px; }
.acu-depr-table-form .acu-field.wide-input { --acu-input: 240px; }
.acu-depr-table-form .acu-field.short { --acu-input: 80px; }
.acu-depr-table-form .acu-col:nth-child(2) .acu-field.short { --acu-input: 110px; }
.acu-depr-table-form .acu-depr-table-desc { flex-basis: 100%; }
.acu-depr-table-form .acu-depr-table-desc .acu-field.wide-input { --acu-input: 330px; }
.acu-depr-table-form input.acu-bad { color: var(--red); }
.acu-footer.acu-footer-warn { color: var(--red); }

/* Fixed Asset Classes: ID, parent and description beside Active / Hold on Entry, then General, Depreciation and GL Accounts. */
.acu-fa-class { max-width: 680px; }
.acu-fa-class-form { display: flex; flex-wrap: wrap; gap: 0 60px; background: #f7f9fb; }
.acu-fa-class-form .acu-col { display: flex; flex-direction: column; --acu-label: 100px; --acu-input: 150px; }
.acu-fa-class-form .acu-field.wide-input { --acu-input: 190px; }
.acu-fa-class-form .acu-fa-class-flags { gap: 3px; padding-top: 2px; }
.acu-fa-class-body > .acu-col { display: flex; flex-direction: column; --acu-label: 130px; --acu-input: 80px; padding: 6px 12px; }
.acu-fa-class-body > .acu-col .acu-field.wide-input { --acu-input: 170px; }
.acu-fa-class-body > .acu-col .acu-field.short { --acu-input: 80px; }
.acu-fa-class-gl { padding: 6px 12px; column-gap: 30px; }
.acu-fa-class-gl .acu-col { --acu-label: 180px; --acu-input: 120px; }
.acu-fa-class-body .acu-subgrid { margin-top: 0; }

/* Disposal Methods: the editable method grid, with a warning on an account that is not set up. */
.acu-disposal-methods { max-width: 460px; }
table.acu-edit td.acu-cell-bad input { color: var(--red); }
.acu-cell-with-flag { display: flex; align-items: center; gap: 2px; }
.acu-cell-with-flag input { flex: 1; min-width: 0; }

/* Fixed Asset Types: the editable type grid. */
.acu-asset-types { max-width: 410px; }

/* Bonuses: the compact bonus form and its date-range rates. */
.acu-bonus { max-width: 460px; }
.acu-bonus-form { display: block; background: #f7f9fb; }
.acu-bonus-form .acu-col { display: flex; flex-direction: column; --acu-label: 80px; --acu-input: 120px; }
.acu-bonus-form .acu-field.wide-input { --acu-input: 280px; }

/* Books: the editable book grid. */
.acu-books { max-width: 470px; }
.acu-books-grid { max-height: calc(100vh - 200px); min-height: 120px; }
table.acu-edit .acu-cell-text { display: block; padding: 0 5px; }

/* Fixed Asset Preferences: account and other settings beside numbering and posting settings. */
.acu-fa-prefs { max-width: 760px; }
.acu-fa-prefs-body { padding: 4px 12px 14px; background: #f7f9fb; }
.acu-fa-prefs-body .acu-col { --acu-label: 120px; --acu-input: 165px; }
.acu-fa-prefs-body .acu-col:nth-child(2) { --acu-label: 105px; --acu-input: 100px; }
.acu-fa-prefs-body .acu-field.short { --acu-input: 70px; }

/* Release FA Transactions: an Origin filter above the unreleased documents. */
.acu-release { max-width: 760px; }
.acu-release-filter { display: block; background: #f7f9fb; --acu-label: 55px; --acu-input: 100px; }
.acu-release-grid { max-height: calc(100vh - 240px); }
.acu-row-error { display: inline-block; width: 12px; height: 12px; line-height: 12px; border-radius: 50%; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; text-align: center; cursor: help; }

/* Other Info: Purchase Details beside Tangible Info and Lease/Rent Info. */
.acu-other-info .acu-col { --acu-label: 105px; --acu-input: 100px; }
.acu-other-info .acu-col:nth-child(2) { --acu-label: 100px; --acu-input: 100px; }
.acu-other-info .acu-col .acu-section-title + .acu-field { margin-top: 0; }
.acu-other-info .acu-col .acu-field + .acu-section-title { margin-top: 2px; }

/* ============ STATUS BADGES ============ */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; line-height: 1.5;
}
.badge.open      { background: #e3f1fb; color: #0b6cad; }
.badge.balanced  { background: #fdf3e0; color: #a76b0a; }
.badge.on-hold   { background: #eceff3; color: #5b6b7c; }
.badge.released, .badge.posted, .badge.completed, .badge.closed, .badge.won, .badge.paid, .badge.active, .badge.ok, .badge.approved
                 { background: #e2f4e8; color: #1f7a43; }
.badge.overdue, .badge.lost, .badge.void, .badge.inactive, .badge.blacklisted { background: #fdeaea; color: #b3322e; }
.badge.new       { background: #ede7f8; color: #6b3fb5; }
/* Request line progress: everything decided or issued, or only part of it so far. */
.badge.processed, .badge.issued { background: #e2f4e8; color: #1f7a43; }
.badge.partially-processed, .badge.partially-issued { background: #fdf3e0; color: #a76b0a; }
.badge.qualified, .badge.negotiation, .badge.proposal { background: #e3f1fb; color: #0b6cad; }

/* ============ DOCUMENT FORM ============ */
.doc-form { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.doc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 26px; padding: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field > label { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; }
.field .static { padding: 5px 2px; font-weight: 600; }
/* A document past editing is a record, not a form. Its fields are already disabled; here they stop
   looking like controls and read as the values they are — the same weight and position as .static,
   so nothing moves when a document is released. A select keeps showing its chosen option's label,
   which is exactly what should be read. Checkboxes keep their box: an empty space would say nothing. */
.doc-form.locked .field input:disabled,
.doc-form.locked .field select:disabled,
.doc-form.locked .field textarea:disabled {
  border-color: transparent; background: transparent; color: var(--text); opacity: 1;
  padding: 5px 2px; font-weight: 600; -webkit-appearance: none; appearance: none;
}
.doc-form.locked .field input[type=checkbox]:disabled { -webkit-appearance: auto; appearance: auto; padding: 0; }
.doc-form.locked .field input:disabled::-webkit-calendar-picker-indicator { display: none; }
/* Stock Items (IN202500) tabs — the real Acumatica screen uses much narrower fields, packed close
   together, than this app's usual full-width/equal-fraction-grid .field convention (which every
   other document screen relies on, so neither rule is changed globally). Capping the field alone
   isn't enough — .doc-summary's own grid still hands each field an equal 1fr-wide cell, leaving a
   big empty gap to the right of the now-narrower input; switching to flex-wrap with fields sized
   to their own content is what actually pulls them together the way Acumatica's layout does. */
.item-tab-compact .doc-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.item-tab-compact .field { max-width: 300px; flex: 0 0 auto; }
.item-tab-compact .field input, .item-tab-compact .field select, .item-tab-compact .field .static { max-width: 260px; }
/* A unit and its Divisible Unit box on one line, as the item screens show them. */
.item-unit { display: flex; align-items: center; gap: 8px; }
.item-unit .inline-check { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; margin: 0; }
.item-tab-compact .field .item-unit { max-width: none; }
.doc-totals {
  display: flex; gap: 34px; justify-content: flex-end; padding: 12px 20px;
  border-top: 1px solid var(--border); background: #fafbfd; font-size: 13px;
}
.doc-totals .t label { color: var(--text-dim); font-size: 11px; display: block; text-align: right; }
.doc-totals .t div { font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ============ TABS ============ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 12px; background: #fafbfd; }
.tab { padding: 9px 16px; cursor: pointer; font-weight: 600; color: var(--text-dim); border-bottom: 3px solid transparent; font-size: 12.5px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-body { padding: 0; }

/* editable line grid */
table.lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.lines th { background: var(--grid-header); padding: 6px 10px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border); white-space: nowrap; }
table.lines td { padding: 3px 6px; border-bottom: 1px solid #e8ecf1; }
table.lines input, table.lines select { width: 100%; border-color: transparent; background: transparent; }
table.lines input:hover, table.lines select:hover { border-color: var(--border); background:#fff; }
table.lines input:focus, table.lines select:focus { border-color: var(--blue); background: #fff; }
table.lines .num, table.lines input.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lines .row-del { color: var(--text-dim); cursor: pointer; padding: 0 8px; font-size: 14px; }
table.lines .row-del:hover { color: var(--red); }
table.lines .dblclick-cell { cursor: pointer; }
/* lookup fields (line-grid cells and plain header fields) — click opens recordPickerModal
   (see components.js) instead of a native <select> */
.cell-lookup {
  padding: 3px 6px; border: 1px solid transparent; border-radius: 3px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.lines .cell-lookup { margin: -3px -6px; }
.cell-lookup:hover, .cell-lookup:focus { border-color: var(--border); background: #fff; outline: none; }
.cell-lookup.disabled { cursor: default; color: var(--text-dim); }
.field .cell-lookup { border-color: var(--border); background: #fff; min-height: 17px; }
table.lines .dblclick-cell:hover { background: var(--grid-hover); }
table.lines th.col-draggable { cursor: grab; user-select: none; }
table.lines th.col-draggable:hover { background: var(--grid-hover); }
table.lines th.col-draggable.dragging { opacity: .4; }
table.lines th.col-draggable.drag-over { box-shadow: inset 2px 0 0 var(--blue); background: var(--grid-hover); }
table.lines th .col-resize-handle { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 1; }
table.lines th .col-resize-handle:hover, table.lines th .col-resize-handle:active { background: var(--blue); opacity: .5; }
table.lines .row-grip { cursor: grab; user-select: none; }
table.lines tr.row-dragging { opacity: .4; }
table.lines tr.row-drag-over { box-shadow: inset 0 2px 0 var(--blue); }
.lines-toolbar { padding: 6px 10px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; }

/* typeahead combobox cell (lineTable column type: 'search') */
.cell-search { position: relative; }
.cell-search-list {
  position: fixed; z-index: 90; max-height: 260px; overflow: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 8px 28px rgba(10,30,50,.22); font-size: 12.5px;
}
.cell-search-item { padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.cell-search-item:hover { background: var(--grid-hover); }

/* ============ MORE ITEMS — module launcher ============ */
.module-section { margin-bottom: 24px; }
.module-section h4 {
  font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 14px;
}
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.module-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; cursor: pointer; transition: border-color .1s, box-shadow .1s;
}
.module-tile:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(20,30,50,.14); }
.module-tile .ico { font-size: 22px; color: var(--blue); line-height: 1; }
.module-tile .lbl { font-size: 12px; color: var(--text); font-weight: 600; }
.cust-groups { display: flex; gap: 56px; flex-wrap: wrap; }
.cust-col { min-width: 180px; }

/* workspace-home layout: quick-action tiles + multi-column category links (e.g. Fixed Assets) */
.fa-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.fa-action {
  background: var(--blue); color: #fff; border: none; border-radius: var(--radius); cursor: pointer;
  padding: 10px 14px; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-align: center; text-decoration: none;
}
.fa-action:hover { background: var(--blue-dark); }
.fa-action .ico { font-size: 18px; line-height: 1; }
.fa-columns { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.fa-col { min-width: 170px; }
.fa-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fa-filters select { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; background: #fff; color: var(--text); }

/* ============ DASHBOARD ============ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi-color, var(--blue)); }
.kpi .kpi-label { font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.kpi .kpi-value { font-size: 23px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.kpi .kpi-sub .up { color: var(--green); font-weight: 700; }
.kpi .kpi-sub .down { color: var(--red); font-weight: 700; }
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.dash-grid .panel + .panel { margin-top: 0; }
.dash-col { display: flex; flex-direction: column; gap: 14px; }
.chart-box { padding: 12px 14px; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mini-table td { padding: 6px 14px; border-bottom: 1px solid #eef1f5; }
.mini-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mini-table tr:last-child td { border-bottom: none; }

/* ============ MODAL ============ */
#modal-root:not(:empty) { position: fixed; inset: 0; background: rgba(20,35,50,.45); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.modal { background: #fff; border-radius: 6px; box-shadow: 0 16px 60px rgba(0,20,40,.4); width: 560px; max-width: 94vw; max-height: 82vh; display: flex; flex-direction: column; animation: pop .12s ease-out; }
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.modal-head { padding: 13px 18px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-dim); }
.modal-body { padding: 16px 18px; overflow: auto; }
.modal-body .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.modal-body .form-grid .full { grid-column: 1 / -1; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: #fafbfd; }

/* ============ TOASTS ============ */
#toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #24313f; color: #fff; padding: 11px 18px; border-radius: 6px; font-size: 13px;
  box-shadow: 0 6px 24px rgba(0,20,40,.35); animation: slidein .18s ease-out; max-width: 380px;
  border-left: 4px solid var(--blue);
}
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--amber); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }

/* ============ REPORTS ============ */
.report { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 34px; max-width: 900px; }
.report h3 { text-align: center; font-size: 17px; }
.report .rpt-sub { text-align: center; color: var(--text-dim); font-size: 12px; margin: 3px 0 18px; }
table.rpt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.rpt th { text-align: right; border-bottom: 2px solid var(--text); padding: 6px 10px; font-weight: 700; }
table.rpt th:first-child { text-align: left; }
table.rpt td { padding: 5px 10px; border-bottom: 1px solid #eef1f5; }
table.rpt td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.rpt tr.section td { font-weight: 700; padding-top: 14px; border-bottom: none; }
table.rpt tr.subtotal td { font-weight: 700; border-top: 1px solid var(--text); border-bottom: none; }
table.rpt tr.grand td { font-weight: 700; border-top: 2px solid var(--text); border-bottom: 3px double var(--text); font-size: 13.5px; }
table.rpt tr.indent td:first-child { padding-left: 28px; }

/* ============ MISC ============ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.muted { color: var(--text-dim); }
.right { text-align: right; }
.mt { margin-top: 14px; }
.link { color: var(--blue); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .dash-grid, .two-col { grid-template-columns: 1fr; }
  #app { --rail-w: 176px; }
}

/* ============ MOBILE / NARROW VIEWPORT ============
   Below this width the rail can no longer live in the grid alongside real content — it becomes an
   off-canvas drawer (slides in over #main, dismissed via the backdrop, the ☰ toggle, or picking a
   screen) instead of the desktop's "shrink the rail column" treatment above. The ☰ button flips one
   class, .nav-toggled, and the two treatments read it in opposite directions: on a desktop it means
   "rail hidden", here it means "drawer shown". These rules come after the desktop ones, so the
   drawer wins the display over #app.nav-toggled #sidebar { display: none }. MainLayout closes the
   drawer on navigation when ffc.isNarrow() agrees this breakpoint applies, so picking a screen
   doesn't leave the drawer covering the new content. */
@media (max-width: 760px) {
  #app { --rail-w: 0px; }
  #sidebar {
    position: fixed; top: 46px; left: 0; bottom: 0; width: 240px; max-width: 82vw; z-index: 46;
    box-shadow: 8px 0 28px rgba(20,30,50,.18); transform: translateX(-100%); transition: transform .18s ease-out;
  }
  #app.nav-toggled #sidebar { display: block; transform: translateX(0); }
  #sidebar-backdrop { position: fixed; top: 46px; left: 0; right: 0; bottom: 0; background: rgba(20,35,50,.4); z-index: 45; }
  #app.nav-toggled #sidebar-backdrop { display: block; }
  /* the icon-stack rail (built for an 84px-wide column) reads as a normal left-aligned menu list
     once the sidebar is a full-width drawer */
  .rail-item { padding: 11px 16px; margin: 0; border-radius: 0; gap: 12px; border-left-width: 4px; }
  .rail-item .ico { font-size: 18px; }

  /* workspace flyout: was positioned assuming an 84px rail to its left — full-width sheet instead,
     opening below the topbar same as the drawer */
  #ws-flyout { left: 0; top: 46px; width: 100%; max-width: 100%; }

  /* topbar: drop the wordmark and branch subtext, and clamp the company badge to a fixed sliver
     (ellipsized) so it can't crowd out the search box — flex would otherwise let a long company
     name like "Frey-Fil Corporation" claim as much width as it wants and squeeze search to nothing */
  #topbar { padding: 0 8px; gap: 8px; }
  .top-logo-text { display: none; }
  #global-search-wrap { flex: 1 1 0; min-width: 0; margin-left: 0; max-width: none; }
  #company-badge small { display: none; }
  /* The badge clamps its own text, not its box: hiding the overflow here also clipped the company
     and branch menu that opens inside it, so tapping the badge looked like it did nothing. */
  #company-badge { padding: 5px 9px; max-width: 92px; flex-shrink: 0; }
  #company-badge-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .top-right { gap: 6px; }

  /* Any menu that drops out of the top bar becomes a sheet across the viewport: a 220px box pinned
     to a 92px badge at the right edge would otherwise hang off the side of the screen. */
  #topbar .dropdown-menu, #company-badge .dropdown-menu {
    position: fixed; top: 46px; left: 6px; right: 6px; min-width: 0; max-height: 72vh; overflow: auto;
  }
  #company-badge .dd-item, #topbar .dropdown-menu .dd-item { padding: 10px 16px; }
  #company-badge .dd-item.dd-branch { padding-left: 28px; }

  /* every screen's ad hoc "style=display:grid;grid-template-columns:1fr 1fr..." record-edit form
     (the dominant layout idiom across js/screens/*.js — there's no shared class to retarget instead)
     collapses to one column here; .doc-summary's own auto-fit/minmax already tends toward 1 column
     at this width but is pinned explicitly for consistency, same as the handful of screens that
     override it inline (e.g. a nested sub-form) and would otherwise stay stuck at a fixed 2 columns */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .doc-summary { grid-template-columns: 1fr; }
  .modal-body .form-grid { grid-template-columns: 1fr; }

  /* modal becomes a full-screen sheet rather than a floating box with awkward side margins */
  #modal-root:not(:empty) { padding-top: 0; align-items: stretch; }
  .modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }

  #screen-header { padding: 12px 14px 8px; flex-wrap: wrap; gap: 6px; }
  #screen-body { padding: 0 14px 20px; }
  .doc-totals { flex-wrap: wrap; gap: 16px 28px; }
  .report { padding: 16px; }

  /* ---- the action bar and every screen toolbar wrap rather than run off the side ---- */
  #screen-actions { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; }
  .acu-toolbar, .acu-bar, .acu-record-bar, .grid-toolbar, .lines-toolbar { flex-wrap: wrap; row-gap: 4px; }
  .acu-toolbar .spacer, .acu-bar .spacer, .grid-toolbar .spacer { flex-basis: 100%; height: 0; }
  .grid-search { width: 100%; }
  /* a finger needs more than a mouse does */
  .acu-icon { width: 32px; height: 30px; }
  .btn { padding: 7px 14px; }

  /* ---- tab strips scroll sideways instead of stacking into a wall ---- */
  .tabs, .acu-form .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .tabs .tab { flex: 0 0 auto; }

  /* ---- Acumatica-style record forms: one fluid column ----
     Screens set their own --acu-label/--acu-input widths (some as wide as 230px + 260px), which
     together overflow a phone. Overriding the row's own template ignores those variables entirely,
     so every screen narrows without each one needing its own rule. */
  .acu-form .acu-field, .acu-field { grid-template-columns: minmax(84px, 40%) minmax(0, 1fr) 16px; }
  .acu-field > label { white-space: normal; line-height: 1.25; }
  .acu-field input, .acu-field select, .acu-field .acu-value > input, .acu-field .acu-value > select { width: 100%; max-width: none; }
  .acu-header, .acu-columns, .acu-ca-body, .acu-transfer-grid, .acu-transfer-sides,
  .acu-cash-head, .acu-recon-head, .acu-transfer-head, .acu-gl-prefs, .acu-budget-panes { grid-template-columns: 1fr; display: block; }
  .acu-col, .acu-columns .acu-col { width: 100%; }
  .acu-col > .acu-section-title { width: 100%; }
  .acu-header .acu-field, .acu-header .acu-field:nth-child(2) { --acu-label: auto; --acu-input: auto; }
  .acu-lookup, .acu-rate { width: 100%; }

  /* ---- wide grids keep their width and scroll inside their own box ---- */
  .grid-wrap, .grid-scroll, .acu-scroll, .acu-subgrid, .acu-grid { max-width: 100%; }
  .grid-scroll, .acu-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* nested scrollers fight the page on a phone: let the page do the vertical scrolling */
  .grid-scroll { max-height: none; }
  .acu-subgrid .acu-scroll { max-height: 60vh; }
  .item-tab-compact .field, .item-tab-compact .field input,
  .item-tab-compact .field select, .item-tab-compact .field .static { max-width: none; }
  .item-unit { flex-wrap: wrap; }

  /* ---- documents meant for paper get the width they need, and scroll to it ---- */
  .print-doc-wrap { padding: 10px; overflow-x: auto; }
  .print-doc { padding: 16px; }
  .acu-rpt-body, .acu-plb, .acu-plp, .acu-bss { overflow-x: auto; }
}

/* ============ SMALL PHONES ============
   Under 520px even a 40% label column leaves too little for the control, so the label goes above
   what it labels — the one layout that always fits, whatever a screen asked for. */
@media (max-width: 520px) {
  .acu-form .acu-field, .acu-field {
    grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "label label" "value pencil";
    row-gap: 2px; padding-bottom: 4px;
  }
  .acu-field > label { grid-area: label; padding-left: 0; font-weight: 600; color: #5b6673; }
  .acu-field > label.req::before { position: static; margin-right: 2px; }
  .acu-value { grid-area: value; }
  .acu-pencil { grid-area: pencil; }
  .doc-summary .field, .item-tab-compact .field { max-width: none; width: 100%; }
  #screen-title { font-size: 16px; }
  .doc-totals .t div { font-size: 14px; }
}

/* ============ Acumatica-style form toolbar & menus ============ */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 3px); right: 0; min-width: 220px; z-index: 70;
  background: #fff; border: 1px solid var(--border); border-radius: 5px;
  box-shadow: 0 8px 28px rgba(10,30,50,.22); padding: 5px 0;
}
.dropdown-menu .dd-item { padding: 7px 16px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.dropdown-menu .dd-item:hover { background: var(--grid-hover); }
.dropdown-menu .dd-item.disabled { color: #b3bdc9; cursor: default; pointer-events: none; }
.dropdown-menu .dd-sep { border-top: 1px solid var(--border); margin: 5px 0; }

.field.inline-check { flex-direction: row; align-items: center; gap: 7px; padding-top: 16px; }
.field.inline-check input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--blue); }
.field.inline-check > label { font-size: 12.5px; color: var(--text); font-weight: 400; }
.field > label.req::after { content: " *"; color: var(--red); font-weight: 700; }

.doc-status-strip { display: flex; gap: 20px; align-items: center; }
.badge.shipping, .badge.confirmed { background: #e3f1fb; color: #0b6cad; }
.badge.invoiced, .badge.scheduled { background: #ede7f8; color: #6b3fb5; }
.badge.in-planning { background: #eceff3; color: #5b6b7c; }
.badge.voided { background: #fdeaea; color: #b3322e; }
.badge.canceled { background: #eceff3; color: #5b6b7c; }
.badge.pending-approval, .badge.pending-print { background: #fdf3e0; color: #a76b0a; }
.badge.printed { background: #e3f1fb; color: #0b6cad; }
/* Cash Advance's own status vocabulary (For Approval/For Payment/For Liquidation/Witness
   Notification Sent/Pending Liquidation) — see js/store.js's cashAdvance* functions */
.badge.for-approval, .badge.witness-notification-sent { background: #fdf3e0; color: #a76b0a; }
.badge.for-payment, .badge.for-liquidation, .badge.pending-liquidation, .badge.pending-payment { background: #e3f1fb; color: #0b6cad; }

/* ============ Printable documents (Purchase Order print, etc.) ============
   Screen appearance: a plain white Letter-width sheet on the app's grey background, so it reads
   clearly as "this is the printed page" before the user ever hits Ctrl+P. Print appearance: the
   app chrome (sidebar/topbar/breadcrumb/actions) disappears entirely and only .print-doc remains,
   full width, no shadow/border — exactly what a real printer or "Save as PDF" should produce. */
.print-doc-wrap { background: var(--bg); padding: 24px; display: flex; justify-content: center; }
.print-doc { background: #fff; width: 850px; max-width: 100%; padding: 28px 34px; box-shadow: 0 1px 6px rgba(0,0,0,.12); border: 1px solid var(--border); font-size: 11.5px; color: #1a1a1a; }
.print-doc table { border-collapse: collapse; width: 100%; }
.print-doc .pd-letterhead { display: block; max-width: 340px; height: auto; margin-bottom: 10px; }
.print-doc .pd-title-box { background: var(--blue); color: #fff; padding: 10px 16px; text-align: center; }
.print-doc .pd-title-box .pd-title { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.print-doc .pd-ordno-row { margin-top: 6px; font-size: 13px; color: var(--blue); font-weight: 700; }
.print-doc .pd-ordno-row b { color: #111; font-size: 15px; margin-left: 6px; }
.print-doc .pd-notebox { border: 1px solid var(--border); padding: 4px 10px; font-size: 10px; color: #444; line-height: 1.4; }
.print-doc .pd-date-label { color: var(--blue); font-weight: 700; font-size: 11px; }
.print-doc .pd-hdrbar { background: var(--blue); color: #fff; font-weight: 700; font-size: 10.5px; padding: 3px 8px; letter-spacing: .3px; }
.print-doc .pd-addr { padding: 6px 8px; line-height: 1.5; vertical-align: top; }
.print-doc .pd-addr b { font-size: 11.5px; }
.print-doc .pd-label { color: var(--blue); font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.print-doc .pd-lineval { border-bottom: 1px solid var(--border); }
.print-doc .items-table th { background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; padding: 5px 6px; text-align: left; letter-spacing: .2px; }
.print-doc .items-table th.num, .print-doc .items-table td.num { text-align: right; }
.print-doc .items-table td { padding: 4px 6px; border-bottom: 1px solid #eef0f3; font-size: 10.5px; vertical-align: top; }
.print-doc .pd-items-wrap { min-height: 260px; }
.print-doc .pd-remarks { border: 1px solid var(--border); padding: 6px 8px; font-size: 10px; color: #444; vertical-align: top; }
.print-doc .pd-totals td { padding: 2px 8px; font-size: 11px; }
.print-doc .pd-totals .pd-total-row td { font-weight: 700; font-size: 12.5px; border-top: 1px solid var(--text); padding-top: 4px; }
.print-doc .pd-subject { font-size: 9.5px; color: #444; line-height: 1.5; margin-top: 6px; }
.print-doc .pd-reminder { font-size: 10px; color: #444; padding: 6px 0; border-top: 1px solid var(--border); }
.print-doc .pd-reminder b { color: var(--blue); }
.print-doc .pd-sig-row td { padding-top: 22px; vertical-align: top; }
.print-doc .pd-sig-label { color: var(--blue); font-weight: 700; font-size: 10px; display: block; margin-bottom: 16px; }
.print-doc .pd-sig-value { border-bottom: 1px solid #999; height: 26px; line-height: 13px; font-size: 10.5px; font-weight: 700; padding-bottom: 2px; overflow: hidden; }
.print-doc .pd-sig-role { font-size: 9.5px; color: #555; margin-top: 3px; }
.print-doc .pd-footer { text-align: center; font-size: 9.5px; font-style: italic; color: #555; margin-top: 16px; }
.print-doc .pd-pageno { text-align: right; font-size: 9.5px; color: #555; margin-top: 2px; }
.print-doc + .print-doc { margin-top: 24px; page-break-before: always; }

/* Purchase Receipt print — plain title (no blue box), key/value header block, branch address
   block, and a 3-way signature row where the name sits ABOVE the line and the label BELOW it
   (opposite of the PO print's signature block, matching the Receipt's own real layout) */
.print-doc .pd-receipt-title { font-size: 26px; font-weight: 700; color: #1a1a1a; text-align: right; margin-bottom: 6px; }
.print-doc .pd-kv td { padding: 1px 0; font-size: 10.5px; }
.print-doc .pd-kv .pd-kv-label { color: #1a1a1a; font-weight: 700; white-space: nowrap; padding-right: 10px; }
.print-doc .pd-kv .pd-kv-val { text-align: right; }
.print-doc .pd-branch-block { font-size: 10.5px; line-height: 1.5; margin: 2px 0 10px; }
.print-doc .pd-gl-name { font-size: 9px; color: #555; }
.print-doc .pd-remarks-line { font-size: 10px; color: #333; margin-top: 4px; }
.print-doc .pd-sig3-val { border-bottom: 1px solid #999; min-height: 16px; font-size: 10.5px; font-weight: 700; padding-bottom: 2px; }
.print-doc .pd-sig3-lbl { font-size: 10px; color: #1a1a1a; margin-top: 4px; }

@media print {
  @page { size: portrait; margin: 12mm; }
  #topbar, #sidebar, #screen-header, #screen-actions, #modal-root, #toast-root { display: none !important; }
  #main { margin: 0 !important; padding: 0 !important; }
  #screen-body { padding: 0 !important; }
  .print-doc-wrap { background: #fff !important; padding: 0 !important; display: block !important; }
  .print-doc { box-shadow: none !important; border: none !important; width: 100% !important; padding: 0 !important; }
}

/* Inquiry filter bar — the toolbar row of labelled pickers above an inquiry's grid. */
.filter-bar { background: #fff; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-field { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.filter-field input { width: 130px; }

/* Figures a report calls out: an overdue balance, and a profit that went the wrong way. */
.overdue { color: var(--red); font-weight: 700; }
.profit.up { font-weight: 700; color: var(--green); }
.profit.down { font-weight: 700; color: var(--red); }

/* Import scenarios: the expected header row, and the rows an import refused. */
.import-columns { margin: 8px 0 16px; font-family: monospace; font-size: 12px; line-height: 1.8;
  background: #f5f6f8; padding: 10px 12px; border-radius: 6px; }
.import-errors { margin: 10px 0 0 18px; font-size: 12px; color: var(--red); line-height: 1.7; }

/* Print preview: the document frame a print screen shows before it goes to the printer. */
.print-doc-wrap { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 0; }
.print-frame { width: 100%; height: calc(100vh - 190px); border: 0; display: block; }

/* The cash advance request form, laid out as the paper it is signed on. */
.print-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; margin: 14px 0; font-size: 13px; }
.print-purpose { margin: 10px 0 16px; font-size: 13px; line-height: 1.6; }
.print-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; font-size: 12px; text-align: center; }
.print-signatures .rule { display: block; border-top: 1px solid #444; margin-bottom: 6px; }

/* Company tree: the workgroup hierarchy beside the selected group's members. */
.tree-shell { display: flex; height: calc(100vh - 170px); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.tree-pane { width: 300px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #f7f8fa; }
.tree-root { padding: 6px 8px; font-weight: 600; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; border-bottom: 1px solid var(--border); }
.tree-body { overflow: auto; flex: 1; padding: 6px 4px; }
.tree-row { display: flex; align-items: center; padding: 4px 6px; cursor: pointer; border-radius: 3px; font-size: 12.5px; white-space: nowrap; }
.tree-row.active { background: #dbeafe; font-weight: 600; }
.tree-toggle { display: inline-block; width: 14px; text-align: center; flex: none; }
.tree-details { flex: 1; overflow: auto; padding: 14px 18px; }
.tree-details-title { font-weight: 600; font-size: 13px; margin-bottom: 12px; }

/* Production board status colours, shared by the zone list and the % complete column. */
.ok { color: var(--green); font-weight: 700; }
.warn { color: #e8a33d; font-weight: 700; }
.bad { color: var(--red); font-weight: 700; }

/* Journal Transactions: batch keys, branch / ledger / currency and the totals in three columns, then the line grid. */
.acu-gl-header { display: flex; flex-wrap: wrap; gap: 0 34px; padding: 8px 12px 6px; background: #f7f9fb; border-bottom: 1px solid var(--border); }
.acu-gl-header .acu-col { display: flex; flex-direction: column; --acu-label: 96px; --acu-input: 110px; }
.acu-gl-header .acu-col:nth-child(2) { --acu-label: 70px; --acu-input: 160px; }
.acu-gl-header .acu-col:nth-child(2) .acu-field.wide-input { --acu-input: 170px; }
.acu-gl-header .acu-col:nth-child(3) { --acu-label: 110px; --acu-input: 120px; }
.acu-gl-header .acu-gl-desc { flex-basis: 100%; margin-top: 10px; }
.acu-gl-header .acu-gl-desc .acu-field.wide-input { --acu-input: 520px; }
.acu-gl-header .acu-static { display: inline-block; padding: 2px 4px; }
.acu-gl-header input.acu-bad { color: var(--red); }
.acu-gl-currency { display: flex; gap: 4px; align-items: center; }
.acu-gl-currency select { width: 52px; }
.acu-gl-currency input { width: 56px; }
.acu-text-btn.boxed { border: 1px solid var(--border); padding: 1px 5px; background: #fff; }
.acu-gl-checks { display: flex; gap: 14px; }
.acu-gl-lines .acu-scroll { max-height: calc(100vh - 330px); }

/* Chart of Accounts: the editable account grid and the Manage Restriction Groups dialog. */
.acu-coa .acu-coa-grid { max-height: calc(100vh - 170px); }
.acu-coa table.acu-edit select.acu-link-select { color: #1a5bb8; text-decoration: underline; }
.acu-dialog-backdrop { position: fixed; inset: 0; background: rgba(20,35,50,.45); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.modal.acu-coa-groups { width: 640px; }
.acu-coa-groups .modal-body { padding: 8px 12px; }

/* Subaccounts: the editable subaccount grid. */
.acu-subs .acu-subs-grid { max-height: calc(100vh - 170px); }
.acu-subs table.acu-table th:nth-child(4) { cursor: pointer; }

/* Report forms (Fixed Assets Net Value): Template row, parameter tabs, dialogs and the report viewer. */
.acu-rpt { max-width: 720px; position: relative; }
.acu-rpt-template { display: flex; align-items: flex-start; gap: 18px; padding: 8px 12px 4px; background: #f7f9fb; }
.acu-rpt-template .acu-field.wide-input { --acu-label: 100px; --acu-input: 170px; }
.acu-rpt-template-pick { display: flex; align-items: center; gap: 2px; }
.acu-rpt-template-pick select { flex: 1; min-width: 0; }
.acu-rpt-clear { border: none; background: none; color: #6b7785; cursor: pointer; font-size: 14px; padding: 0 3px; }
.acu-rpt-template-flags { display: flex; gap: 14px; }
.acu-rpt-body > .acu-col { display: flex; flex-direction: column; padding: 6px 12px; --acu-label: 100px; --acu-input: 165px; }
.acu-rpt-body > .acu-col .acu-field.short { --acu-input: 60px; }
.acu-rpt-body > .acu-col .acu-field.wide-input { --acu-input: 260px; }
.acu-rpt-caption { font-weight: 600; color: #34404c; padding: 8px 6px 2px; }
.acu-rpt-dialog { position: absolute; top: 44px; left: 120px; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 30px rgba(0,20,40,.25); padding: 10px 14px; min-width: 340px; --acu-label: 110px; --acu-input: 180px; }
.acu-rpt-dialog.wide { min-width: 460px; }
.acu-rpt-dialog-head { font-weight: 700; margin-bottom: 8px; }
.acu-rpt-dialog-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.acu-rpt-note { font-size: 11px; margin-top: 4px; }
.acu-rpt-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.acu-rpt-viewer { background: #e9edf2; min-height: calc(100vh - 110px); }
.acu-rpt-page { background: #fff; margin: 10px auto; padding: 14px 18px; max-width: 1060px; box-shadow: 0 1px 4px rgba(0,20,40,.15); font-size: 11px; color: #1f2933; }
.acu-rpt-hidden { display: none; }
.acu-rpt-pager { padding: 0 6px; color: #34404c; }
.acu-rpt-head { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; gap: 12px; margin-bottom: 10px; }
.acu-rpt-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.acu-rpt-kv { display: grid; grid-template-columns: 90px 1fr; line-height: 16px; }
.acu-rpt-kv b { font-weight: 400; }
.acu-rpt-head-mid { padding-top: 21px; }
.acu-rpt-head-right .acu-rpt-kv { grid-template-columns: 50px 1fr; }
.acu-rpt-head-right .acu-rpt-kv b { text-align: right; }
table.acu-rpt-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.acu-rpt-table td, table.acu-rpt-table th { padding: 1px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.acu-rpt-table .num { text-align: right; }
table.acu-rpt-table tr.acu-rpt-band td { font-weight: 700; background: #eef3f8; border-top: 1px solid #4b6a8f; border-bottom: 1px solid #4b6a8f; padding: 4px; }
table.acu-rpt-table tr.acu-rpt-group td { font-weight: 700; background: #f4f6f8; padding: 6px 4px; }
table.acu-rpt-table tr.acu-rpt-heading th { font-weight: 700; text-align: left; border-bottom: 1px solid #1f2933; padding-top: 14px; }
table.acu-rpt-table tr.acu-rpt-heading th.num { text-align: right; }
table.acu-rpt-table tr.acu-rpt-subtotal td { font-weight: 700; border-top: 1px solid #1f2933; padding-bottom: 10px; }
table.acu-rpt-table tr.acu-rpt-total td { font-weight: 700; border-top: 2px solid #1f2933; padding-top: 4px; }
table.acu-rpt-table td.acu-rpt-total-label { text-align: right; padding-right: 12px; }

/* Profit & Loss by Branch (GL638000) prints as Acumatica draws it: the whole statement in the company blue, the
   company and the date it is drawn to at the head, the branch names over the columns, section headings flush left
   with their classes indented under them, and a rule over each section total. */
.acu-plb { color: #1f4e9c; padding: 22px 26px; }
.acu-plb .plb-head { margin-bottom: 18px; }
.acu-plb .plb-company { font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.acu-plb .plb-title { font-size: 12px; font-weight: 700; margin-top: 1px; }
.acu-plb .plb-asof { font-size: 10px; font-weight: 700; margin-top: 3px; }
.acu-plb .plb-asof span { margin-right: 14px; }
table.acu-plb-table { width: 100%; border-collapse: collapse; font-size: 11px; }
table.acu-plb-table th { font-weight: 700; text-align: right; padding: 0 6px 16px; white-space: nowrap; }
table.acu-plb-table td { padding: 1px 6px; white-space: nowrap; }
table.acu-plb-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.acu-plb-table tr.plb-section td { font-weight: 700; padding-top: 10px; }
table.acu-plb-table tr.plb-row td:first-child { padding-left: 18px; }
table.acu-plb-table tr.plb-total td.num { border-top: 1px solid #1f4e9c; font-weight: 700; padding-bottom: 4px; }
table.acu-plb-table tr.plb-computed td { font-weight: 700; padding-top: 10px; }
table.acu-plb-table tr.plb-computed td.num { border-top: 1px solid #1f4e9c; }
.acu-plb .plb-scope { font-size: 11px; font-weight: 700; margin-top: 2px; }
.acu-bss .bss-head { display: flex; justify-content: space-between; align-items: flex-start; }
.acu-bss .bss-user { font-size: 10px; font-weight: 700; }
.acu-bss .plb-title { font-size: 13px; }
.acu-bss .plb-company { font-size: 13px; }
table.acu-bss-table tr.bss-range th { padding: 0 6px 12px; font-weight: 700; }
table.acu-bss-table tr.plb-branches th { padding: 0 6px 0; }
table.acu-bss-table td.bss-indent-1 { padding-left: 20px; }
table.acu-bss-table td.bss-indent-2 { padding-left: 36px; }
table.acu-bss-table tr.bss-class td { font-weight: 700; padding-top: 4px; }
table.acu-bss-table tr.bss-class-total td.num { border-top: 1px solid #9db4d8; padding-bottom: 4px; }
table.acu-bss-table tr.bss-heading td { font-weight: 700; padding-top: 10px; }
table.acu-bss-table tr.bss-total td { font-weight: 700; }
table.acu-bss-table tr.bss-total td.num { border-top: 1px solid #9db4d8; }
table.acu-bss-table tr.plb-computed td.num { border-bottom: 1px solid #1f4e9c; }
.acu-rpt-page.acu-plp { max-width: 1560px; }
table.acu-plp-table { font-size: 10px; }
table.acu-plp-table tr.plp-groups th { font-weight: 700; text-align: center; padding: 0 6px 2px; }
table.acu-plp-table tr.plp-groups th.plp-scope { text-align: left; border-bottom: 0; }
table.acu-plp-table tr.plb-branches th.plp-scope { text-align: left; }
table.acu-kd-table .kd-sub { font-weight: 700; }
table.acu-kd-table tr.kd-support td { padding-top: 2px; }
.acu-rpt-page.acu-plp:has(.acu-kd-table) { max-width: 2200px; }
table.acu-plp-table tr.plp-groups th:not(:first-child) { border-bottom: 1px solid #1f4e9c; }
table.acu-plp-table tr.plb-branches th { padding: 2px 6px 10px; }
table.acu-plp-table td.plp-label { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.acu-plp-table td.plp-indent-1 { padding-left: 20px; }
table.acu-plp-table td.plp-indent-2 { padding-left: 36px; }
table.acu-plp-table tr.plp-group td { font-weight: 700; padding-top: 4px; }
table.acu-plp-table tr.plp-group-total td { font-weight: 700; }
table.acu-plp-table tr.plp-group-total td.num { border-top: 1px solid #9db4d8; }
@media print {
    .no-print { display: none !important; }
    .acu-rpt-hidden { display: block !important; }
    .acu-rpt-page { page-break-after: always; }
    .acu-rpt-viewer { background: #fff; }
    .acu-rpt-page { box-shadow: none; margin: 0; max-width: none; }
}

/* Fixed Asset List: one heading row between blue rules, blue figures, remarks wrapping. */
table.acu-rpt-table tr.acu-rpt-list-heading td { background: #fff; font-weight: 700; border-top: 1px solid #1b3f8b; border-bottom: 1px solid #1b3f8b; padding: 3px 4px; }
table.acu-rpt-table tr.acu-rpt-list-row td { color: #1b3f8b; vertical-align: top; border: none; }
table.acu-rpt-table td.acu-rpt-wrap { white-space: normal; }

/* Fixed Asset - Acquisition List: document and account figures in brown, subaccounts with a dotted rule. */
table.acu-rpt-table tr.acu-rpt-list-row td.acu-rpt-brown { color: #8a4b0f; }
table.acu-rpt-table tr.acu-rpt-list-row td.acu-rpt-dotted { color: #1f2933; text-decoration: underline dotted; text-underline-offset: 2px; }

/* Convert Purchases to Assets: the clearing account summary, and a credit no purchase took. */
.acu-convert-summary { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 5px 12px; background: #f7f9fb; border-bottom: 1px solid var(--border); font-size: 12px; }
.acu-convert-summary > div { display: flex; gap: 6px; align-items: baseline; }
.acu-convert-summary span { color: #5b6673; }
.acu-convert-summary b { font-weight: 600; }
.acu-convert-summary b.neg, .acu-convert-summary .warn b { color: var(--red); }
.acu-convert-summary .ok b { color: var(--green); }
table.acu-table tr.acu-row-credit td.num { color: var(--red); }

/* Trial Balance (GL301500): the import header in three columns, the green hold / release button, the line actions. */
.acu-green-btn { background: #2e9e4f; color: #fff; border: none; border-radius: 2px; padding: 3px 10px; font-size: 12px; font-weight: 600; margin: 0 4px; cursor: pointer; }
.acu-green-btn:hover { background: #268443; }
.acu-green-btn:disabled { background: #9ccfaa; cursor: default; }
.acu-grey-btn { background: #e3e7ec; color: #34404c; border: 1px solid #cbd2da; border-radius: 2px; padding: 1px 8px; font-size: 12px; margin: 0 2px; cursor: pointer; }
.acu-grey-btn:disabled { color: #9aa5b1; cursor: default; }
.acu-tb-header { display: flex; flex-wrap: wrap; gap: 0 34px; padding: 8px 12px 6px; background: #f7f9fb; border-bottom: 1px solid var(--border); }
.acu-tb-header .acu-col { display: flex; flex-direction: column; --acu-label: 90px; --acu-input: 110px; }
.acu-tb-header .acu-col:nth-child(2) { --acu-label: 100px; --acu-input: 170px; }
.acu-tb-header .acu-col:nth-child(3) { --acu-label: 80px; --acu-input: 120px; }
.acu-tb-header .acu-tb-desc { flex-basis: 100%; margin-top: -26px; padding-left: 224px; }
.acu-tb-header .acu-tb-desc .acu-field.wide-input { --acu-label: 100px; --acu-input: 360px; }
.acu-tb-header .acu-static { display: inline-block; padding: 2px 4px; }
.acu-tb-header input.acu-bad { color: var(--red); }
.acu-tb-action-label { margin-left: 6px; color: #34404c; font-size: 12px; }
.acu-tb-action { height: 22px; font-size: 12px; margin: 0 2px; min-width: 110px; }
.acu-tb-upload { position: relative; overflow: hidden; }
.acu-tb-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.acu-tb-upload.disabled { opacity: .45; pointer-events: none; }
.acu-tb-status.ok { color: var(--green); }
.acu-tb-status.bad { color: var(--red); font-weight: 600; }
table.acu-table tr.acu-row-error td { background: #fdf1f1; }
.acu-tb-error-count { color: var(--red); }
.acu-tb-note { font-size: 11px; margin-left: 8px; }

/* Account Summary (GL401000): the filter in two columns and the account grid with its totals. */
.acu-acct-summary-filter { display: flex; flex-wrap: wrap; gap: 0 40px; background: #f7f9fb; }
.acu-acct-summary-filter .acu-col { display: flex; flex-direction: column; --acu-label: 100px; --acu-input: 170px; }
.acu-acct-summary-grid { max-height: calc(100vh - 230px); }
table.acu-table tr.acu-acct-summary-total td { font-weight: 700; border-top: 1px solid #9aa5b1; background: #f7f9fb; position: sticky; bottom: 0; }

/* AcuSelector: Acumatica's searchable lookup — the box, its magnifier, and the list of IDs and descriptions. */
.acu-selector { position: relative; display: flex; align-items: center; width: 100%; }
.acu-selector > input[type=text] { width: 100%; padding-right: 22px; box-sizing: border-box; }
.acu-selector-btn { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); border: none; background: transparent; padding: 2px 3px; cursor: pointer; color: #34404c; display: flex; }
.acu-selector-btn svg { width: 13px; height: 13px; }
.acu-selector.disabled .acu-selector-btn { cursor: default; color: #9aa5b1; }
.acu-selector-backdrop { position: fixed; inset: 0; z-index: 40; }
.acu-selector-panel { position: absolute; top: calc(100% + 2px); left: 0; z-index: 41; min-width: 100%; width: max-content; max-width: 460px; max-height: 280px; overflow: auto; background: #fff; border: 1px solid #b8c2cc; border-radius: 2px; box-shadow: 0 6px 18px rgba(0,20,40,.18); }
.acu-selector-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.acu-selector-table th { position: sticky; top: 0; background: #f2f5f8; text-align: left; font-weight: 600; color: #5b6673; padding: 3px 8px; border-bottom: 1px solid #dde3e9; white-space: nowrap; }
.acu-selector-table td { padding: 3px 8px; white-space: nowrap; cursor: pointer; border-bottom: 1px solid #f0f2f5; }
.acu-selector-table tr.hl td { background: #dfeafa; }
.acu-selector-table tr.chosen td:first-child { font-weight: 600; }
.acu-selector-table tr.acu-selector-none td { color: #6b7785; cursor: default; }
.acu-selector-more { padding: 3px 8px; font-size: 11px; color: #6b7785; border-top: 1px solid #dde3e9; background: #fafbfc; }

/* Searchable dropdowns (ffc-select.js): the panel every select of an Acumatica-style screen opens. */
.ffc-select-backdrop { position: fixed; inset: 0; z-index: 900; }
.ffc-select-panel { position: fixed; z-index: 901; max-width: 520px; background: #fff; border: 1px solid #b8c2cc; border-radius: 2px; box-shadow: 0 6px 18px rgba(0,20,40,.2); display: flex; flex-direction: column; font-size: 12px; }
.ffc-select-search { margin: 4px; height: 22px; padding: 1px 6px; border: 1px solid #c9d1db; border-radius: 2px; font-size: 12px; outline: none; }
.ffc-select-search:focus { border-color: #1a5bb8; }
.ffc-select-list { max-height: 260px; overflow: auto; border-top: 1px solid #e3e7ec; }
.ffc-select-list table { border-collapse: collapse; width: 100%; }
.ffc-select-list td { padding: 3px 8px; white-space: nowrap; cursor: pointer; border-bottom: 1px solid #f0f2f5; color: #1f2933; }
.ffc-select-list td + td { color: #5b6673; }
.ffc-select-list tr.hl td { background: #dfeafa; }
.ffc-select-list tr.chosen td:first-child { font-weight: 600; }
.ffc-select-list tr.disabled td { color: #b3bdc9; cursor: default; }
.ffc-select-list tr.none td { color: #6b7785; cursor: default; }
.ffc-select-more { padding: 3px 8px; font-size: 11px; color: #6b7785; border-top: 1px solid #dde3e9; background: #fafbfc; }

/* Account Details (GL404000): the filter in four columns, the totals, and an unposted transaction. */
.acu-acct-details-filter { display: flex; flex-wrap: wrap; gap: 0 34px; background: #f7f9fb; align-items: flex-start; }
.acu-acct-details-filter .acu-col { display: flex; flex-direction: column; --acu-label: 105px; --acu-input: 150px; }
.acu-acct-details-filter .acu-col:nth-child(2) { --acu-label: 115px; --acu-input: 110px; }
.acu-acct-details-filter .acu-acct-details-checks { gap: 3px; padding-top: 2px; }
.acu-acct-details-filter .acu-acct-details-totals { --acu-label: 120px; --acu-input: 120px; }
.acu-acct-details-grid { max-height: calc(100vh - 250px); }
table.acu-table tr.acu-row-unposted td { font-style: italic; color: #6b7785; }
.acu-acct-details-dialog { top: 44px; left: 160px; }