/* Park Tower chrome — trimmed from brm_FlowDS liability.css (native CSS nesting). */
:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --clr-bg: #f4f5f7; --clr-surface: #ffffff; --clr-border: #d1d5db; --clr-text: #111827;
  --clr-muted: #6b7280; --clr-primary: #1d4ed8; --clr-primary-h: #1e40af; --clr-danger: #dc2626;
  --clr-success: #16a34a; --clr-warning: #d97706; --clr-nav-bg: #1e3a5f; --radius-sm: 4px; --radius: 8px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .06); --shadow: 0 2px 8px rgb(0 0 0 / .10);
  --header-h: 38px; --footer-h: 28px; --lnav-w: 72px; --sidebar-w: 215px;
  --clr-accent: #2563eb; --clr-surface2: #eaecf0;
}
[data-theme="dark"]  { --clr-bg:#0f172a; --clr-surface:#1e293b; --clr-border:#334155; --clr-text:#e2e8f0; --clr-muted:#94a3b8; --clr-primary:#3b82f6; --clr-primary-h:#60a5fa; --clr-danger:#f87171; --clr-warning:#fbbf24; --clr-nav-bg:#0c1526; --clr-accent:#3b82f6; --clr-surface2:#263347; }
[data-theme="slate"] { --clr-bg:#f1f5f9; --clr-surface:#ffffff; --clr-border:#cbd5e1; --clr-text:#1e293b; --clr-muted:#64748b; --clr-primary:#475569; --clr-primary-h:#334155; --clr-danger:#dc2626; --clr-warning:#d97706; --clr-nav-bg:#1e293b; --clr-accent:#475569; --clr-surface2:#e2e8f0; }
[data-theme="dark"] body { color-scheme: dark; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--clr-surface); color: var(--clr-text); border-color: var(--clr-border); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* UI scale: every size below is rem, so this one knob scales the whole app (16px → 18px root). */
html { font-size: 112.5%; }
body { font-family: var(--font-sans); font-size: .8125rem; line-height: 1.5; color: var(--clr-text); background: var(--clr-bg);
       height: 100dvh; overflow: hidden; display: grid; grid-template-rows: var(--header-h) auto 1fr var(--footer-h); }
.embed-mode body { grid-template-rows: 0 0 1fr 0; }
.embed-mode .app-header, .embed-mode .module-tabs-bar, .embed-mode .left-nav, .embed-mode .app-footer { display: none !important; }

.app-header { background: var(--clr-primary); color: #fff; display: flex; align-items: center; padding: 0 1rem; box-shadow: var(--shadow);
  & .app-header__brand { display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .8rem; }
  & .app-header__logo { font-size: .9rem; }
  & .app-header__right { margin-left: auto; display: flex; align-items: center; gap: .5rem; } }
.theme-btn { font-family: var(--font-sans); font-size: .72rem; padding: .2rem .55rem; background: rgba(255 255 255 / .12); border: 1px solid rgba(255 255 255 / .25); border-radius: var(--radius-sm); color: #fff; cursor: pointer; white-space: nowrap; text-decoration: none; &:hover { background: rgba(255 255 255 / .25); } }
.app-body { display: flex; overflow: hidden; }
.left-nav { width: var(--lnav-w); flex-shrink: 0; background: var(--clr-nav-bg); display: flex; flex-direction: column; align-items: center; padding: .625rem 0; gap: .2rem; overflow-y: auto; }
.lnav-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .3rem; border-radius: var(--radius-sm); text-decoration: none; color: rgba(255 255 255 / .55); width: 58px; text-align: center; transition: background .15s, color .15s;
  &.active { color: #fff; background: rgba(255 255 255 / .15); }
  &:hover:not(.active) { color: rgba(255 255 255 / .85); background: rgba(255 255 255 / .08); } }
.lnav-icon { font-size: 1.1rem; line-height: 1; }
.lnav-label { font-size: .6rem; font-weight: 500; letter-spacing: .02em; }
.app-main { flex: 1; min-width: 0; overflow: hidden; padding: .4rem .5rem; display: flex; flex-direction: column; gap: .35rem; }
.app-footer { background: var(--clr-surface); border-top: 1px solid var(--clr-border); display: flex; align-items: center; justify-content: center; padding: .35rem .75rem; font-size: .8125rem; color: var(--clr-text); }
.error-banner { background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--radius); padding: .35rem .75rem; color: var(--clr-danger); display: flex; align-items: center; gap: .75rem; }
.loading-bar { height: 3px; background: var(--clr-border); overflow: hidden; flex-shrink: 0;
  & .loading-bar__fill { height: 100%; width: 40%; background: var(--clr-primary); animation: slide-loading 1.2s ease-in-out infinite; } }
@keyframes slide-loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.btn { font-family: var(--font-sans); font-size: .8125rem; font-weight: 500; padding: .3rem .7rem; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, opacity .15s; text-decoration: none; display: inline-block; line-height: 1.4;
  &:disabled { opacity: .45; cursor: not-allowed; }
  &.btn--primary { background: var(--clr-primary); color: #fff; &:hover:not(:disabled) { background: var(--clr-primary-h); } }
  &.btn--success { background: var(--clr-success); color: #fff; &:hover:not(:disabled) { filter: brightness(.9); } }
  &.btn--warning { background: var(--clr-warning); color: #fff; &:hover:not(:disabled) { filter: brightness(.9); } }
  &.btn--ghost { background: transparent; color: var(--clr-text); border: 1px solid var(--clr-border); &:hover:not(:disabled) { background: var(--clr-bg); } }
  &.btn--danger { background: var(--clr-danger); color: #fff; &:hover:not(:disabled) { background: color-mix(in srgb, var(--clr-danger) 80%, #000); } }
  &.btn--dup { background: #ffe100; color: #111; }
  &.btn--xs { padding: .18rem .45rem; font-size: .75rem; }
  &.btn--full { width: 100%; } }

/* ── Page skeleton: optional left search panel + grid area ─────────────── */
.page { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; gap: .2rem; }
.page-row { display: flex; flex: 1; min-height: 0; gap: .4rem; overflow: hidden; }
.side-panel { width: var(--sidebar-w); flex-shrink: 0; overflow-y: auto; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: .5rem; display: flex; flex-direction: column; gap: .3rem;
  & label { font-size: .7rem; color: var(--clr-muted); display: block; margin-top: .2rem; }
  & input, & select { width: 100%; font: inherit; padding: .2rem .35rem; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--clr-text); }
  & .btn { margin-top: .25rem; } }
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.grid-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .25rem .4rem; background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); flex-shrink: 0;
  & .grid-title { font-weight: 600; margin-right: .5rem; }
  & .spacer { flex: 1; } }
.grid-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grid-host rocket-tabulator { flex: 1; min-height: 0; display: block; }
.money { color: var(--clr-text); text-align: right; display: block; }
.moneyred { color: var(--clr-danger); text-align: right; display: block; }

/* ── Edit forms ────────────────────────────────────────────────────────── */
.form-page { flex: 1; min-height: 0; overflow: auto; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: .6rem .8rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem .9rem; }
.form-grid.form-grid--2 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .15rem;
  & label { font-size: .7rem; color: var(--clr-muted); }
  & input, & select, & textarea { font: inherit; padding: .28rem .4rem; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--clr-text); width: 100%; }
  & input[readonly], & input:disabled { background: var(--clr-surface2); color: var(--clr-muted); }
  &.field--wide { grid-column: 1 / -1; }
  & .req { color: var(--clr-danger); } }
.field--check { flex-direction: row; align-items: center; gap: .4rem; & input { width: auto; } }
.form-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.status-btns { display: flex; gap: .3rem; flex-wrap: wrap; & .btn { opacity: .55; } & .btn.on { opacity: 1; outline: 2px solid var(--clr-text); } }
h2.form-title { font-size: 1.05rem; margin-bottom: .5rem; }
h3.section-title { font-size: .9rem; margin: .6rem 0 .3rem; display: flex; align-items: center; gap: .6rem; }

/* line-item table */
table.lines { width: 100%; border-collapse: collapse; font-size: .78rem;
  & th, & td { border: 1px solid var(--clr-border); padding: .2rem .3rem; vertical-align: middle; }
  & th { background: var(--clr-surface2); text-align: left; font-weight: 600; }
  & td.num, & th.num { text-align: right; }
  & input, & select { font: inherit; width: 100%; padding: .15rem .3rem; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--clr-text); }
  & input.yellow { background: #fff9c4; color: #111; }
  & tr.editing td { background: color-mix(in srgb, var(--clr-primary) 6%, var(--clr-surface)); }
  & tfoot td { font-weight: 600; }
  & td:last-child { white-space: nowrap; }            /* Save/Edit + Delete stay on one row */
  & td:last-child .btn + .btn { margin-left: .25rem; } }
table.lines rocket-tom-select { display: block; min-width: 240px; }

/* dropzone */
.dropzone { border: 2px dashed var(--clr-success); border-radius: var(--radius); padding: .5rem .7rem; color: var(--clr-text); background: color-mix(in srgb, var(--clr-success) 6%, var(--clr-surface)); cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  & .dropzone__hint { color: var(--clr-muted); }
  & input[type=file] { font: inherit; font-size: .78rem; color: var(--clr-text); cursor: pointer; max-width: 100%; }
  & .dropzone__name { flex-basis: 100%; font-size: .78rem; font-weight: 600; color: var(--clr-success); }
  &.dragover { border-color: var(--clr-primary); background: color-mix(in srgb, var(--clr-primary) 10%, var(--clr-surface)); } }
.upload-grid { margin-top: .4rem; & .btn { align-self: flex-start; margin-top: .3rem; } }
.btn--info { background: #0ea5e9; color: #fff; &:hover { background: #0284c7; } }

/* dialogs */
dialog { border: 1px solid var(--clr-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0; background: var(--clr-surface); color: var(--clr-text); max-width: 95vw; }
dialog::backdrop { background: rgb(0 0 0 / .35); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .8rem; background: var(--clr-primary); color: #fff; font-weight: 600; & button { background: transparent; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; } }
.dlg-body { padding: .7rem .9rem; overflow: auto; max-height: 70vh; }
.dlg-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .5rem .9rem; border-top: 1px solid var(--clr-border); }
.pt-confirm { padding: 1rem 1.2rem; min-width: 300px; }
.pt-confirm__q { font-size: .95rem; margin-bottom: .9rem; white-space: pre-wrap; }
.pt-confirm__btns { display: flex; gap: .6rem; justify-content: flex-end; }

/* idle overlay */
.idle-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / .5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.idle-box { background: var(--clr-surface); padding: 1.2rem 1.6rem; border-radius: var(--radius); text-align: center; & h3 { margin-bottom: .5rem; } & p { margin-bottom: .8rem; } }

/* tom-select sizing inside forms */
rocket-tom-select { display: block; }
.ts-wrapper .ts-control { font-size: .8125rem; padding: .25rem .4rem; min-height: 30px; }
.ts-dropdown { font-size: .8rem; }
.ts-dropdown .option .sub { color: var(--clr-muted); font-size: .7rem; margin-left: .4rem; }

/* misc */
.muted { color: var(--clr-muted); }
.small { font-size: .72rem; }
.mono { font-family: var(--font-mono); }
a { color: var(--clr-accent); }
.welcome { padding: 1.5rem; & h2 { margin-bottom: .6rem; } & p { margin-bottom: .5rem; } }
.tabulator { font-size: 1rem; }  /* theme pins 16px; follow the root scale instead */
.tabulator-row .tabulator-cell a { color: var(--clr-accent); }

/* ── In-page record tabs (brm_FlowDS liability pattern) ─────────────────── */
.main-tabs-bar { display: flex; align-items: stretch; background: var(--clr-surface); border-bottom: 2px solid var(--clr-border); flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; }
.main-tab-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem; font-family: var(--font-sans); font-size: .775rem; font-weight: 500; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; color: var(--clr-muted); white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
  &:hover { color: var(--clr-text); background: var(--clr-bg); }
  &.main-tab-btn--active { color: var(--clr-primary); border-bottom-color: var(--clr-primary); font-weight: 600; }
  &.main-tab-btn--grid { border-right: 1px solid var(--clr-border); } }
.mtab-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.mtab-close { font-size: .6rem; padding: .1rem .2rem; border-radius: 2px; color: var(--clr-danger); transition: background .1s, color .1s; &:hover { background: var(--clr-danger); color: #fff; } }
.main-content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.main-grid-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ctab-panel { flex: 1; min-height: 0; overflow: auto; padding: .5rem .8rem; }
.panel-loading { color: var(--clr-muted); padding: 1rem; }

/* ── Vertical splitter (search panel ↔ main area) ─────────────────────── */
.splitter-v { flex-shrink: 0; width: 6px; cursor: col-resize; background: var(--clr-border); position: relative; border-radius: 3px;
  &::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 32px; width: 3px; border-left: 1px solid var(--clr-muted); border-right: 1px solid var(--clr-muted); }
  &:hover, &.splitter-v--active { background: var(--clr-primary); } }
.page-row { gap: .25rem; }

/* ── Narrow record forms ──────────────────────────────────────────────── */
.rec-form { max-width: 1080px; }
.rec-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .4rem .7rem; }
.rec-form .field textarea { min-height: 3.2em; }
.rec-form table.lines { font-size: .76rem; }
.form-page.rec-form { flex: 0 1 auto; }
/* Every close affordance is red (JJ): dialog ✕ buttons included. */
.dlg-head button { background: var(--clr-danger); color: #fff; border-radius: var(--radius-sm); padding: 0 .45rem; font-size: .9rem; line-height: 1.4; }
.dlg-head button:hover { filter: brightness(.85); }
/* ── PO/TWO form rows (JJ): pickers on one large row, bold labels ─────── */
.rec-form .form-row { display: flex; gap: .8rem; align-items: flex-end; margin-bottom: .55rem; flex-wrap: wrap; }
.rec-form .form-row > .field { flex: 1 1 200px; }
.rec-form .form-row > .field--status { flex: 0 0 auto; }
.rec-form .form-row > .field--date { flex: 0 0 170px; }
.rec-form .field label, .rec-form .section-title, .rec-form table.lines th { font-weight: 700; color: var(--clr-text); }
.rec-form .field label { font-size: .76rem; }
.rec-form .field label .small { font-weight: 500; }
.ts-lg .ts-wrapper .ts-control { font-size: 1.05rem; min-height: 44px; padding: .45rem .65rem; }
.ts-lg .ts-wrapper .ts-control input { font-size: 1.05rem; }
.ts-lg + .ts-dropdown, .ts-dropdown { font-size: .9rem; }
.rec-form .status-btns .btn { font-size: .78rem; padding: .3rem .55rem; }
.rec-form .form-row > .field--invnum { flex: 0 0 200px; }
.status-value { display: inline-flex; align-items: center; min-width: 78px; padding: .3rem .6rem; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface2); font-weight: 700; font-size: .8rem; }
/* Light-green action (Create PDF) */
.btn.btn--success-light { background: #bbf7d0; color: #14532d; border: 1px solid #86efac; }
.btn.btn--success-light:hover:not(:disabled) { background: #86efac; }
[data-theme="dark"] .btn.btn--success-light { background: #166534; color: #dcfce7; border-color: #22c55e; }
/* Search panel labels bold (JJ) */
.side-panel label { font-weight: 700; color: var(--clr-text); font-size: .72rem; }
.rec-form .form-row > .field--charge { flex: 0 0 auto; align-self: center; padding-bottom: .3rem; }
.rec-form .field--charge label { font-size: .78rem; cursor: pointer; }

/* ── Module tabs bar (one tab per opened page, Home pinned) ───────────── */
.module-tabs-bar { display: flex; align-items: stretch; gap: 2px; padding: 0 6px 0 var(--lnav-w); background: var(--clr-surface2); border-bottom: 1px solid var(--clr-border); min-height: 0; overflow-x: auto; scrollbar-width: none; }
.module-tabs-bar:empty { border-bottom: none; }
.mtab { display: inline-flex; align-items: center; gap: .3rem; padding: 3px .65rem 0; font-size: .76rem; white-space: nowrap; cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; background: transparent; color: var(--clr-muted); text-decoration: none; user-select: none; transition: background .12s, color .12s; }
.mtab:hover { background: var(--clr-surface); color: var(--clr-text); }
.mtab.active { background: var(--clr-surface); border-color: var(--clr-border); color: var(--clr-text); font-weight: 600; margin-top: 2px; }
.mtab .mtab-close { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: .7rem; border-radius: 50%; border: none; background: transparent; color: var(--clr-danger); cursor: pointer; padding: 0; opacity: .7; line-height: 1; }
.mtab .mtab-close:hover { background: var(--clr-danger); color: #fff; opacity: 1; }