/* FinLens Financials — dense ERP UI. White (#ffffff) everywhere, grayscale,
   zero border-radius, IBM Plex Sans text / JetBrains Mono numbers. */

* { box-sizing: border-box; border-radius: 0 !important; }
html, body { margin: 0; padding: 0; background: #ffffff; color: #111111; }
body { font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 13px; line-height: 1.45; }

h1 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
h2 { font-size: 14px; font-weight: 700; margin: 18px 0 6px; }
p { margin: 4px 0 10px; }
a { color: #111; }
code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: #ffffff; border: 1px solid #d9d9d9; padding: 0 3px; }
.muted { color: #555; }
.scopenote { color: #1a1a1a; background: #ffffff; border-left: 3px solid #1a1a1a; padding: 4px 8px; margin: 6px 0 10px; font-size: 12px; }
.scopenote:empty { display: none; }
.mono, .num { font-family: "JetBrains Mono", monospace; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* ---------- Focus & keyboard ---------- */
:focus { outline: none; }
:focus-visible, input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #000000; outline-offset: 0;
}

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px;
  background: #ffffff; border-bottom: 1px solid #1a1a1a; position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.whoami { color: #555; font-size: 12px; }
.inlineform { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #555; }

/* ---------- Break-glass banner ---------- */
.bgbanner { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #ffffff;
  border-bottom: 2px solid #c77d00; color: #c77d00; font-weight: 600; }

/* ---------- Shell / side nav ---------- */
.shell { display: flex; min-height: calc(100vh - 45px); background: #ffffff; }
.sidenav { width: 190px; flex: 0 0 190px; border-right: 1px solid #d9d9d9; padding: 8px 0; background: #ffffff; }
.sidenav a { display: block; padding: 6px 12px 6px 14px; text-decoration: none; color: #111; border-left: 3px solid transparent; }
.sidenav a:hover { background: #f2f2f2; }
.sidenav a.active { font-weight: 700; border-left-color: #000000; }
/* The page never scrolls sideways. A wide table — the journal list carries eleven
   columns and every cell is no-wrap by rule — scrolls inside the content pane, so the
   top bar and the menu stay where they are and the browser's own scrollbar is never
   needed. Sticky report headers keep working because their scroll box is unaffected. */
.content { flex: 1; padding: 14px 18px 40px; min-width: 0; max-width: 100%; background: #ffffff; }
html, body { overflow-x: hidden; }
.shell { max-width: 100vw; }
/* The bar is capped at the viewport width but must not clip: the user menu drops out of
   it, and overflow:hidden here swallowed that menu whole. The page already blocks sideways
   scroll at the html/body level, so the bar needs no overflow rule of its own. */
.topbar { max-width: 100vw; overflow: visible; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: #000000; color: #ffffff; border: 1px solid #000000; padding: 5px 12px; line-height: 1.3; }
.btn:hover { background: #262626; }
.btn.sec { background: #ffffff; color: #000000; border: 1px solid #000000; }
.btn.sec:hover { background: #f2f2f2; }
.btn.danger { background: #c62828; border-color: #c62828; color: #ffffff; }
.btn.danger:hover { background: #a82020; }
.btn.sm { padding: 2px 8px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
button.btn { -webkit-appearance: none; appearance: none; }
summary.btn { list-style: none; display: inline-block; }
summary.btn::-webkit-details-marker { display: none; }

/* ---------- Forms ---------- */
label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #555; margin: 8px 0 2px; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="file"], select, textarea {
  font: inherit; background: #ffffff; color: #111; border: 1px solid #444444; padding: 4px 6px; max-width: 100%;
}
select { padding: 3px 4px; }
textarea { width: 100%; font-family: "IBM Plex Sans", Arial, sans-serif; }
input.num { text-align: right; font-family: "JetBrains Mono", monospace; }
.chk { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: #111; margin: 0 6px 0 0; }
.formrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.formrow label { margin-top: 0; }
.formbtn { padding-bottom: 1px; }
.stackform { margin: 8px 0 0; max-width: 320px; }
.stackform .btn { margin-top: 10px; }
.panel { border: 1px solid #d9d9d9; padding: 10px 12px 12px; margin: 10px 0 16px; background: #ffffff; }
.panel h2 { margin-top: 0; }
.toolbar { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.inline-msg { font-size: 12.5px; }
.inline-msg.bad, .err { color: #c62828; }
.inline-msg.ok { color: #1b8a2a; }

/* ---------- Flash + chips ---------- */
.flash { border: 1px solid #444; border-left: 4px solid #444; padding: 6px 10px; margin: 0 0 10px; background: #ffffff; }
.flash.ok { border-color: #1b8a2a; color: #1b8a2a; }
.flash.warn { border-color: #c77d00; color: #c77d00; }
.flash.bad { border-color: #c62828; color: #c62828; }
.chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 0 6px;
  border: 1px solid #555; color: #555; background: #ffffff; }
.chip.ok { border-color: #1b8a2a; color: #1b8a2a; }
.chip.warn { border-color: #c77d00; color: #c77d00; }
.chip.bad { border-color: #c62828; color: #c62828; }

/* ---------- Tables (global, uniform) ---------- */
table.grid { border-collapse: collapse; width: 100%; max-width: 100%; margin: 6px 0 14px; background: #ffffff; }
table.grid th, table.grid td {
  border: 1px solid #d9d9d9; padding: 3px 8px; text-align: left; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; vertical-align: top;
}
table.grid thead th { background: #1a1a1a; color: #ffffff; border-color: #1a1a1a; font-weight: 600; position: sticky; top: 44px; z-index: 5; }
/* Inside a horizontal scroll box a sticky header anchors to the box, not the page, and
   ends up drawn over the first data row. Those tables get a plain header instead. */
.tablewrap table.grid thead th { position: static; }
table.grid tbody tr:nth-child(even) td { background: #f7f7f7; }
table.grid tbody tr:hover td { background: #efefef; }
table.grid td.num, table.grid th.num { text-align: right; font-family: "JetBrains Mono", monospace; }
table.grid tfoot td { font-weight: 700; border-top: 2px solid #1a1a1a; }
td.actions { white-space: nowrap; }
td.actions form { display: inline; }
.clip { max-width: 260px; }
.hash { max-width: 120px; }
.pager { display: flex; gap: 8px; align-items: center; margin: 8px 0 16px; color: #555; }

/* ---------- Report head + statement styling ---------- */
.rpthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.rptentity { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.rpttitle { margin: 0; }
.rptsub { color: #555; font-size: 12.5px; }
.rpttools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


table.rpt .notecol { width: 52px; text-align: center; color: #555; }
table.rpt thead th.notecol { color: #ffffff; }        /* header band is black — never grey on black */
table.grid thead th { color: #ffffff; }
/* A consolidated statement can carry eight or more money columns. A fixed minimum on
   each one pushed the table past the viewport and put a horizontal scrollbar under the
   whole page; the columns now give way instead, since the figures are what must fit. */
table.rpt .valcol { min-width: 0; }
.ind0 { padding-left: 8px; }
.ind1 { padding-left: 26px !important; }
.ind2 { padding-left: 44px !important; }
.ind3 { padding-left: 62px !important; }
tr.r-sec td { font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-top: 2px solid #1a1a1a; }
tr.r-group td { font-weight: 700; }
tr.r-total td { font-weight: 700; border-top: 1px solid #1a1a1a; }
tr.r-grand td { font-weight: 700; border-top: 2px solid #1a1a1a; border-bottom: 3px double #1a1a1a; }
tr.r-warn td { color: #c62828; font-weight: 700; }
tr.r-blank td { border-left: none; border-right: none; background: #ffffff !important; }
.notesec { margin-bottom: 20px; }
.editnote summary { cursor: pointer; font-weight: 600; }
.editnote { margin-top: 6px; }

/* ---------- Login ---------- */
.loginbody { display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; background: #ffffff; }
.loginbox { width: 340px; border: 1px solid #1a1a1a; padding: 22px 24px 26px; background: #ffffff; }
.loginbrand { font-size: 18px; font-weight: 700; }
.loginsub { color: #555; font-size: 12px; margin-bottom: 14px; }
.loginbox input { width: 100%; }

/* ---------- Dashboard flow list ---------- */
.flow { margin: 4px 0 0 18px; padding: 0; }
.flow li { margin: 3px 0; }


/* ---------- Header profile / dropdown menu ---------- */
.hmenu { position: relative; }
.hmenu > summary { list-style: none; cursor: pointer; padding: 5px 10px; border: 1px solid #1a1a1a;
  background: #ffffff; font-weight: 600; font-size: 12px; user-select: none; }
.hmenu > summary::-webkit-details-marker { display: none; }
.hmenu > summary:focus-visible { outline: 2px solid #000000; outline-offset: 1px; }
.hmenu[open] > summary { background: #1a1a1a; color: #ffffff; }
.hmenu-panel { position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px; background: #ffffff;
  border: 1px solid #1a1a1a; z-index: 40; }
.hmenu-head { padding: 8px 10px; border-bottom: 1px solid #d9d9d9; font-size: 12px; }
.hmenu-panel a { display: block; padding: 7px 10px; text-decoration: none; color: #111; border-bottom: 1px solid #eeeeee; }
.hmenu-panel a:last-child { border-bottom: 0; }
.hmenu-panel a:hover { background: #f2f2f2; }

.sidenav a:focus-visible { outline: 2px solid #000000; outline-offset: -2px; }

/* ---------- Section sub-navbar: horizontal bar under the header ---------- */
.subnav { display: flex; gap: 2px; flex-wrap: wrap; align-items: stretch; padding: 0 12px 0 209px;
  background: #ffffff; border-bottom: 2px solid #1a1a1a; }
.subnav a { padding: 6px 14px; text-decoration: none; color: #111; font-size: 12.5px; line-height: 20px; }
.subnav a:hover { background: #f2f2f2; }
.subnav a.active { font-weight: 700; background: #1a1a1a; color: #ffffff; }
.subnav a:focus-visible { outline: 2px solid #000000; outline-offset: -2px; }
@media (max-width: 900px) { .subnav { padding-left: 12px; } }

/* ---------- Print ---------- */
@media print {
  .topbar, .sidenav, .subnav, .rpttools, .toolbar, .bgbanner, .btn, .pager, .editnote { display: none !important; }
  .content { padding: 0; }
  table.grid thead th { position: static; }
  body { font-size: 11px; }
}

/* punch-list polish */
.subnav{margin:0 0 10px 0;border-bottom:2px solid #000}
td.note, .note-col, table.grid td:nth-child(2){color:#000;font-weight:600}

.far-sched th{white-space:nowrap}
.far-sched .rowtotal td{border-top:2px solid #000}

/* in-dropdown search (combobox) */
.combobox{position:relative;display:inline-block;min-width:160px}
.combobox select.cb-hidden{display:none}
.cb-btn{width:100%;text-align:left;background:#fff;border:1px solid #000;border-radius:0;padding:4px 22px 4px 8px;font:inherit;cursor:pointer;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-btn:after{content:'▾';position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.cb-btn:focus{outline:2px solid #000;outline-offset:0}
/* The panel is fixed to the viewport and appended to the body, so nothing clips it. */
.cb-panel{position:fixed;z-index:1000;min-width:320px;max-width:480px;background:#fff;border:1px solid #000;box-shadow:none}
.cb-panel[hidden]{display:none}
.cb-group{padding:5px 8px 2px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#666;border-top:1px solid #eee}
.cb-item.cur{outline:2px solid #000;outline-offset:-2px}
.cb-search{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid #000;border-radius:0;padding:5px 8px;font:inherit}
.cb-search:focus{outline:none;background:#f5f5f5}
.cb-list{max-height:300px;overflow:auto}
.cb-item{padding:4px 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-item:hover{background:#000;color:#fff}
.cb-item.sel{font-weight:600}
.cb-item.empty{color:#666;cursor:default}
.cb-item.empty:hover{background:#fff;color:#666}

/* ---------- Searchable combobox (mapping line picker) ---------- */
.combo-btn {
  width: 100%; text-align: left; font: inherit; font-size: 12px;
  background: #ffffff; color: #111; border: 1px solid #767676; border-radius: 0;
  padding: 3px 22px 3px 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
  background-position: calc(100% - 12px) 9px, calc(100% - 7px) 9px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.combo-btn:focus { outline: 2px solid #111; outline-offset: 0; }
.combo-panel {
  position: absolute; z-index: 50; display: none;
  background: #ffffff; border: 1px solid #111; border-radius: 0; box-shadow: none;
}
.combo-search {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12px;
  padding: 4px 6px; border: 0; border-bottom: 1px solid #111; border-radius: 0; background: #ffffff;
}
.combo-search:focus { outline: 2px solid #111; outline-offset: -2px; }
.combo-list { max-height: 260px; overflow-y: auto; }
.combo-group {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: #ffffff; background: #1a1a1a; padding: 3px 6px; position: sticky; top: 0;
}
.combo-item {
  padding: 3px 6px; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-item:nth-child(even) { background: #fafafa; }
.combo-item.cur, .combo-item:hover { background: #111; color: #ffffff; }
.combo-item.sel { font-weight: 600; }
.combo-none { padding: 6px; font-size: 12px; color: #555; }


/* ---------- (5) Button modifier alias ----------
   Views were split between .btn.sec and .btn.secondary; only .sec was defined, so
   "secondary" buttons (Download XLSX / Download Word) rendered as black primaries.
   One alias keeps every page consistent without touching each view. */
.btn.secondary { background: #ffffff; color: #000000; border: 1px solid #000000; }
.btn.secondary:hover { background: #f2f2f2; }
.btn.secondary[disabled] { opacity: .45; }

/* ---------- (3) Statement tables run edge to edge ----------
   The report grid sat inside the content padding, leaving a visible gutter on the
   right of a wide statement. Full-bleed the table only, so headings keep their
   alignment while the figures use the whole width. */
.content { padding: 14px 0 40px; }
.content > *:not(table):not(.fullbleed) { padding-left: 18px; padding-right: 18px; }
.content > table.grid { width: 100%; margin-left: 0; margin-right: 0; }
/* Statement tables: natural column widths inside a scroll box. Figures are never
   truncated and neither are captions; if the columns exceed the pane, the box scrolls. */
.rptscroll { max-width: 100%; overflow-x: auto; overflow-y: visible; }
table.rpt { table-layout: auto; width: max-content; min-width: 100%; }
table.rpt td:first-child, table.rpt th:first-child { min-width: 320px; max-width: 560px; white-space: normal; }
table.rpt .notecol, table.rpt td.note { width: 48px; }
table.rpt .valcol, table.rpt td.num { white-space: nowrap; }
table.rpt th.valcol { white-space: normal; line-height: 1.15; min-width: 96px; }
/* A sticky header inside a scroll box anchors to the box and overlaps the first row. */
.rptscroll table.rpt thead th { position: static; }
/* Let the caption column absorb the slack rather than the page. */
table.rpt td:first-child, table.rpt th:first-child { min-width: 0; word-break: normal; }
table.rpt th:first-child, table.rpt td:first-child { padding-left: 18px; }
table.rpt th:last-child, table.rpt td:last-child { padding-right: 18px; }

/* ---------- (4) Sidebar icons ---------- */
.sidenav a { display: flex; align-items: center; gap: 8px; }
.sidenav a .navico { flex: 0 0 14px; opacity: .8; }
.sidenav a.active .navico { opacity: 1; }
.subnav a .navico { display: none; }   /* report children stay text-only */

/* ---------- Notes: uniform amount columns across every schedule ----------
   Each note used to auto-size, so the figure columns landed in a different place in
   every table. Fixed layout pins Particulars to the remaining width and gives every
   amount column the same width, so the numbers line up down the whole page. */
table.grid.notetbl { table-layout: fixed; }
table.grid.notetbl th:first-child, table.grid.notetbl td:first-child { width: auto; }
table.grid.notetbl th.valcol, table.grid.notetbl td.num { width: 150px; }
.notefn { margin: 4px 0 10px; padding-left: 18px; font-size: 12px; color: #1a1a1a; max-width: 1100px; }
.fnedit { margin: 0 0 14px 18px; }
.fnedit[open] { border-left: 3px solid #1a1a1a; padding-left: 10px; }
.fnedit textarea { font: inherit; font-size: 12px; border: 1px solid #444; border-radius: 0; }

/* ---------- (7) Column headers must not truncate ----------
   "Consolidated 2025-26" was being clipped to "Consolidated 202…". Amount headers wrap
   onto a second line instead, so the full label is always readable. */
table.grid thead th.valcol, table.rpt thead th.valcol { white-space: normal; overflow: visible; text-overflow: clip; }
table.grid.notetbl th.valcol, table.grid.notetbl td.num { width: 130px; }

/* ---------- Note number links ----------
   The number in the Note column jumps to that schedule; scroll-margin keeps the
   heading clear of the sticky header when the anchor lands. */
.notelink { color: #111; text-decoration: underline; }
.notelink:hover { background: #111; color: #ffffff; text-decoration: none; }
.notesec[id] { scroll-margin-top: 90px; }
.notesec:target > h2 { background: #111; color: #ffffff; padding: 2px 6px; }

/* ---------- User company-access picker ---------- */
.coaccess { flex: 1 1 100%; }
.coaccess .chkrow { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0; }
.coaccess .chk { white-space: nowrap; }

/* ---------- SRP management P&L ---------- */
table.srp th.areahdr { background: #c55a11; color: #ffffff; text-align: center; }
table.srp td.greyed { background: #d9d9d9; }
table.srp td.ind1 { padding-left: 18px; }

/* ---------- SRP: header stays put while the statement scrolls ----------
   Everything down to the MRP CODE row is frozen, so the business-area columns stay
   labelled on a 200-row statement. */
/* The statement scrolls inside its own box so the page furniture — entity, basis,
   buttons — stays on screen; only the rows move. The header rows stick to the top of
   that box rather than to the page. */
.srpscroll { max-height: calc(100vh - 230px); overflow: auto; border: 1px solid #1a1a1a; }
table.srp thead th { position: sticky; z-index: 6; background: #1a1a1a; }
table.srp thead tr:first-child th { top: 0; }
table.srp thead tr:nth-child(2) th { top: 30px; }
table.srp tbody td:first-child,
table.srp tbody td:nth-child(2) { background: #ffffff; }
/* Only the rows the group prints bold are bold. */
table.srp tbody tr.r-total > td { font-weight: 700; }
table.srp tbody tr:not(.r-total) > td { font-weight: 400; }

/* ---------- Settings: form layout ----------
   A single grid so every label, field and hint lines up regardless of section, and
   fieldsets that group the signature block instead of a run of loose labels. */
.statbar { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #1a1a1a; margin: 0 0 14px; }
.statbar .stat { display: flex; flex-direction: column; gap: 2px; padding: 7px 14px;
  border-right: 1px solid #d9d9d9; min-width: 120px; }
.statbar .stat:last-child { border-right: 0; }
.statbar .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #666; }
.statbar .v { font-size: 13px; }
.statbar .of { color: #666; }

.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 18px; align-items: start; margin: 8px 0 4px; }
.formgrid > div { min-width: 0; }
.formgrid label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: #444; margin: 0 0 3px; }
.formgrid input, .formgrid select { width: 100%; box-sizing: border-box; }
.formgrid .muted, .formgrid .hint { font-size: 11px; margin: 3px 0 0; }

fieldset.fset { border: 1px solid #d9d9d9; padding: 8px 14px 12px; margin: 12px 0; }
fieldset.fset legend { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #1a1a1a; font-weight: 600; padding: 0 6px; }
h2.sechead { margin-top: 20px; padding-top: 14px; border-top: 1px solid #d9d9d9; }
h3.subhead { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #444; margin: 16px 0 6px; }
input::placeholder { color: #9a9a9a; }

/* Scroll box for lists that legitimately exceed the pane. The page stays 100% wide and
   the list scrolls within its own border, exactly as a spreadsheet pane would. */
.tablewrap { max-width: 100%; overflow-x: auto; }
.tablewrap > table.grid { width: max-content; min-width: 100%; }
.tablewrap td.clip { max-width: 360px; }