/* LedgerX themes: what the engine's own styles leave unreadable in the dark theme, and the theme button.
   Added by the server to every LedgerX page (after the engine's styles, so these win). Rules are written as
   html[data-theme="dark"] … so they apply only in the dark theme, whether chosen or taken from the device. */

/* the Import & Export layout set its own light colours, which kept text dark on the dark theme's panels */
html[data-theme="dark"] body.trd {
  --ink: #e2eaf4; --muted: #a3b1c4; --line: #1e2d44; --bg: #080f1a;
  --vivid: #0277b6; --vivid-2: #03669c; --vivid-soft: #0c2240; --navy: #e2eaf4;
}
html[data-theme="dark"] body.trd table thead th { background: var(--sunk); }
/* …but a document shown as a white page (statements, trade documents) stays white in both themes */
html[data-theme="dark"] body.trd .fsdoc table thead th, html[data-theme="dark"] body.trd .trd-sheet table thead th { background: none; }
html[data-theme="dark"] body.trd .fsdoc th { color: #141414; }
html[data-theme="dark"] body.trd .trd-sheet .ts-lines th { background: #002147; color: #fff; }

/* Import & Export components that set light colours of their own */
html[data-theme="dark"] .trd-kpi, html[data-theme="dark"] .trd-gh, html[data-theme="dark"] .trd-chain,
html[data-theme="dark"] .trd-pipe, html[data-theme="dark"] .trd-st, html[data-theme="dark"] .trd-pl { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .trd-kpi:hover { border-color: var(--line-strong); }
html[data-theme="dark"] .trd-kpi.warn .s { color: var(--warn); }
html[data-theme="dark"] .trd-kpi.bad .v, html[data-theme="dark"] .trd-err { color: var(--bad); }
html[data-theme="dark"] .trd-chip { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
html[data-theme="dark"] .trd-chip.on { background: var(--vivid); border-color: var(--vivid); color: #fff; }
html[data-theme="dark"] .trd-st.on, html[data-theme="dark"] tr.sel td,
html[data-theme="dark"] .trd-pl li.on, html[data-theme="dark"] .trd-pl li:hover { background: var(--vivid-soft); color: var(--ink); }
html[data-theme="dark"] .trd-td:hover, html[data-theme="dark"] .trd-chain li > button:hover { background: var(--surface-2); }
html[data-theme="dark"] .trd-td b { background: var(--vivid-soft); color: #7dd3fc; }
html[data-theme="dark"] .trd-td.bad b { background: var(--bad-soft); color: var(--bad); }
html[data-theme="dark"] .trd-gtot td, html[data-theme="dark"] .trd-split tr.tot td, html[data-theme="dark"] .trd-split tr.tot th { background: var(--sunk); border-top-color: var(--line-strong); color: var(--ink); }
html[data-theme="dark"] .trd-chain li, html[data-theme="dark"] .trd-shst li { border-top-color: var(--line-strong); }
html[data-theme="dark"] .trd-chain li.on, html[data-theme="dark"] .trd-shst li.done { border-top-color: var(--good); }
html[data-theme="dark"] .trd-chain li.has:not(.on), html[data-theme="dark"] .trd-shst li.now { border-top-color: #38bdf8; }
html[data-theme="dark"] .trd-chain li:not(.has) .n { color: var(--faint); }
html[data-theme="dark"] .trd-pl { border-color: var(--line-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .trd-pl .c, html[data-theme="dark"] .trd-pl .q, html[data-theme="dark"] .trd-pl li.none { color: var(--muted); }
/* charts: the navy bars and dark labels would vanish on a dark card */
html[data-theme="dark"] .trd-leg .k1, html[data-theme="dark"] .trd-b1 { background: #93c5fd; fill: #93c5fd; }
html[data-theme="dark"] .trd-leg .k2, html[data-theme="dark"] .trd-b2 { background: #0ea5e9; fill: #0ea5e9; }
html[data-theme="dark"] .trd-axis { stroke: var(--line-strong); }
html[data-theme="dark"] .trd-bv { fill: var(--ink); }
html[data-theme="dark"] .trd-bl { fill: var(--muted); }

/* the theme button */
.lx-theme-b { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lx-theme-px { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: inherit; padding: 0; }
.lx-theme-px:hover { background: rgba(255, 255, 255, .08); }
.lx-theme-fixed { position: fixed; top: 14px; right: 16px; z-index: 50; border-color: var(--line-strong, #b4bed0); color: var(--ink, #0e1726); background: var(--surface, #fff); }
.lx-theme-b:focus-visible { outline: 2px solid var(--vivid, #0277b6); outline-offset: 2px; }

/* the "X" of the LedgerX mark: its light cyan is faint on the white top bar; LedgerX's own brand blue reads well */
html[data-theme="light"] header.top .brand .x { color: #0277b6; }

/* the "read only / someone is editing" notice in the top bar: it could shrink to one letter per line in a crowded
   bar (making the bar as tall as the window); it keeps a readable width and two lines, the whole text on hover */
#co .lxb-ro { flex: 0 1 auto; min-width: 200px; max-width: 360px; overflow-wrap: normal; word-break: normal; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.3; }
/* …and the period shown beside it gives way (cut short with "…") rather than running over the month-end button */
#co { min-width: 0; }
#co .cx { min-width: 0; overflow: hidden; }
#co .cx > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#co .cx > .cxl { flex-shrink: 0; overflow: visible; }
/* while such a notice is showing, it takes the place of the financial-year pill (the year is on every screen) */
#co:has(.lxb-ro) .cx { display: none; }
/* the company switcher also gives way: its list stays whole, only the name shown is shortened */
#co .conm { flex: 0 1 auto; min-width: 110px; overflow: hidden; }
#co .conm .cosw { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
#co:has(.lxb-ro) .conm .cxl { display: none; }
@media (max-width: 1180px) { #co .lxb-ro { min-width: 140px; } }

/* the "/" between the parts of the trail above each page's title: as light as the lines, it was hard to see */
html body .lxcrumb span { color: var(--faint); }

/* the organisation menu in LedgerX's top bar (server/orgs.js) */
.lx-orgs-menu { position: fixed; z-index: 80; min-width: 260px; max-width: min(360px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; padding: 6px;
  background: var(--surface, #fff); color: var(--ink, #0e1726); border: 1px solid var(--line, #d6dce6); border-radius: 12px; box-shadow: var(--shadow-lg, 0 10px 40px rgba(15,52,96,.14)); }
html[data-theme="dark"] .lx-orgs-menu { box-shadow: 0 12px 36px rgba(0, 0, 0, .55); border-color: var(--line-strong, #2a3f5e); }
.lx-orgs-h { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #4a5568); }
.lx-orgs-it { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.lx-orgs-it:hover, .lx-orgs-it:focus-visible { background: var(--sunk, #f6f8fb); }
.lx-orgs-it:focus-visible { outline: 2px solid var(--vivid, #0277b6); outline-offset: -2px; }
.lx-orgs-it.cur { cursor: default; }
.lx-orgs-it[disabled] { opacity: .6; }
.lx-orgs-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lx-orgs-n { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-orgs-s { font-size: 12.5px; color: var(--muted, #4a5568); }
.lx-orgs-ck { color: var(--good, #047857); display: inline-flex; }
.lx-orgs-sep { height: 1px; margin: 6px 4px; background: var(--line, #d6dce6); }
.lx-orgs-b.lx-orgs-solo { margin-left: auto; width: 38px; height: 38px; border: 1px solid var(--line, #d6dce6); border-radius: 10px; background: transparent; color: var(--ink, #0e1726); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }