/* ============================================================
   DEPL NetSuite Archive — full-bleed BESPOKE design system
   Ported 1:1 from mocks/depl-archive-v2.html.
   Loaded app-wide via theme css fileUrls (#APP_FILES#css/depl-archive.css).

   Approach (design pivot 2026-06-05): hide ALL Universal Theme chrome and
   render the mock's own topbar + sidebar + content in static regions.
   - Topbar / sidebar / filters live on PAGE 0 (gated) -> render on every
     authenticated page; position:fixed so DOM order is irrelevant.
   - Content pages render their markup in static regions inside <main>.
   - Login page (p09999, @/login) keeps its own look: chrome-hide is a no-op
     there and region resets are scoped with :not(.t-Login-region).

   Reusable building blocks (Phase 0 #8): .tile .tag.t-* .pill.* .notice.*
   .field .lineage/.lin-node .file-row
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@600;700;800&display=swap');

:root{
  --apex-blue:#0568C2; --apex-blue-dk:#004C8F; --apex-blue-lt:#E8F2FB;
  --accent:#FF6F00; --bg:#F1F3F6; --card:#FFFFFF; --border:#E1E5EA;
  --text:#1B2733; --muted:#586474; --muted-2:#76828F; --success:#2E7D32; --warn:#E65100;
  --err:#C62828; --info:#0277BD; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
  --topbar-h:49px; --sidebar-w:230px;
}

/* ============================================================
   HIDE UNIVERSAL THEME CHROME + neutralize content region wrappers
   ============================================================ */
.t-Header,#t_Header,.t-Body-nav,#t_Body_nav,.t-Footer,#t_Footer,
.t-Body-title,.t-BreadcrumbRegion,.t-Breadcrumb-region,.t-Body-info,#t_Body_info{
  display:none !important;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:14px/1.5 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.t-Body,.t-Body-main,.t-Body-content,#t_Body_content,.t-Body-contentInner,.t-Body-fullContent,.t-Body-wrap,
.t-Body-content .container,.t-Body-content .row,.t-Body-content [class*="col"]{
  margin:0 !important; padding:0 !important; background:transparent !important;
  max-width:none !important; width:auto !important; float:none !important;
}
/* App-shell layout: the UT content shell carries an unpredictable left offset (the
   responsive grid + hidden side-nav reservation). Pin the scroll container to the
   exact area right of the fixed sidebar and below the fixed top bar — deterministic,
   independent of UT's internal wrappers. */
#t_Body_content{
  position:fixed !important; top:var(--topbar-h) !important; left:var(--sidebar-w) !important;
  right:0 !important; bottom:0 !important; overflow-y:auto !important; overflow-x:hidden !important;
  background:var(--bg) !important;
}
/* content regions are transparent shells — the mock paints its own .card.
   Scope :not(.t-Login-region) so the login card keeps its box. */
.t-Region:not(.t-Login-region),
.t-Region:not(.t-Login-region) > .t-Region-bodyWrap,
.t-Region:not(.t-Login-region) > .t-Region-bodyWrap > .t-Region-body{
  margin:0 !important; padding:0 !important; background:transparent !important;
  border:0 !important; box-shadow:none !important;
}
a{color:var(--apex-blue);text-decoration:none} a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}

/* ============================================================
   TOP BAR (page-0 region #depl-topbar  +  filters region #depl-filters)
   ============================================================ */
#depl-topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:30;
  background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:8px 16px}
.brand{font-weight:700;color:var(--apex-blue);font-size:16px;letter-spacing:.3px;white-space:nowrap}
.brand .sub{font-weight:400;color:var(--muted);margin-left:6px;font-size:13px}
#depl-topbar .spacer{flex:1}
#depl-topbar .user{font-size:13px;color:var(--muted);white-space:nowrap;
  max-width:180px;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
#depl-topbar .signout-btn{
  flex:0 0 auto; font-size:12px; font-weight:600; white-space:nowrap;
  padding:5px 12px; border-radius:6px; text-decoration:none;
  color:var(--muted); border:1px solid var(--border);
  background:#fff; transition:color .15s,border-color .15s,background .15s;
}
#depl-topbar .signout-btn:hover{
  color:var(--err); border-color:var(--err); background:#FFF5F5; text-decoration:none;
}

/* filters region floated into the top bar, left of the user label.
   APEX wraps each item in grid `col col-N` divs (fixed widths + floats) — neutralize
   them so label + select flow inline with a clean gap. */
#depl-filters{position:fixed;top:0;height:var(--topbar-h);right:248px;z-index:31;
  display:flex;align-items:center;gap:10px;padding:8px 0}
#depl-filters .container{display:flex;align-items:center;gap:10px;margin:0;width:auto}
#depl-filters .col{width:auto !important;float:none !important;padding:0 !important;margin:0 !important;flex:0 0 auto}
#depl-filters .t-Form-fieldContainer{display:flex !important;align-items:center;gap:6px;margin:0;
  background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:0 10px;width:auto;min-height:32px}
#depl-filters .t-Form-labelContainer{width:auto !important;float:none !important;padding:0 !important;text-align:left}
#depl-filters .t-Form-label{font-size:11px;color:var(--muted);text-transform:none;white-space:nowrap;font-weight:600;margin:0}
#depl-filters .t-Form-inputContainer{width:auto !important;float:none !important;padding:0 !important}
#depl-filters .t-Form-itemWrapper{display:flex;align-items:center}
#depl-filters select{border:none !important;background:transparent !important;font:inherit;
  color:var(--text);outline:none;height:30px;min-width:120px;max-width:180px;box-shadow:none !important;padding:0}
/* drop APEX help icon + error/notification slots for the compact bar */
#depl-filters .t-Form-helpButton,
#depl-filters .a-Button--helpButton,
#depl-filters button[id$="_help"],
#depl-filters .t-Form-error,
#depl-filters .a-Form-error{display:none !important}

/* ---------- Read-Only pill ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;
  background:var(--apex-blue-lt);color:var(--apex-blue-dk);font-size:12px;font-weight:600}
.pill.warn{background:#FFF3E0;color:var(--warn)} .pill.err{background:#FFEBEE;color:var(--err)}
.pill.ok{background:#E8F5E9;color:var(--success)}

/* ============================================================
   SIDEBAR (page-0 region #depl-sidebar)
   ============================================================ */
#depl-sidebar{position:fixed;top:var(--topbar-h);left:0;width:var(--sidebar-w);
  height:calc(100vh - var(--topbar-h));overflow-y:auto;
  background:#fff;border-right:1px solid var(--border);padding:12px 0;z-index:20}
.nav-section{padding:10px 16px 4px;font-size:11px;font-weight:700;text-transform:uppercase;
  color:var(--muted);letter-spacing:.5px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;
  color:var(--text);font-size:13px;border-left:3px solid transparent;text-decoration:none}
.nav-item:hover{background:var(--apex-blue-lt);text-decoration:none}
.nav-item.active{background:var(--apex-blue-lt);border-left-color:var(--apex-blue);
  color:var(--apex-blue-dk);font-weight:600}
.nav-item.disabled{color:#B0B0B0;cursor:default}
.nav-item.disabled:hover{background:transparent}
.nav-item .ico{width:16px;text-align:center}
.nav-item .ct{margin-left:auto;font-size:11px;color:var(--muted);font-weight:500}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
/* #t_Body_content is pinned to the content area, so main just fills it with padding. */
main{display:block;margin:0;padding:12px 20px 22px}
.crumbs{font-size:12px;color:var(--muted-2);margin-bottom:5px;font-weight:500}
h1{font-size:23px;font-weight:700;letter-spacing:-.2px;margin:0 0 4px;color:var(--text)}
h1 .lite{font-weight:500;color:var(--muted);font-size:16px;margin-left:8px}
h2{font-size:16px;font-weight:600;margin:22px 0 10px;display:flex;align-items:center;gap:8px;color:var(--text)}
h2 .badge{font-size:11px;padding:2px 8px;background:var(--bg);border-radius:10px;color:var(--muted);font-weight:500}
.subhead{color:var(--muted);font-size:13px;margin-bottom:16px}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);margin-bottom:14px}
.card-h{padding:10px 14px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px;color:var(--text);display:flex;align-items:center;gap:10px}
.card-h .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.card-h .badge{font-size:11px;padding:2px 8px;background:var(--bg);border-radius:10px;color:var(--muted);font-weight:500}
.card-b{padding:14px;overflow-x:auto}  /* wide detail tables (audit/GL/lines) scroll within the card; #t_Body_content is overflow-x:hidden */

/* ---------- KPI tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.tile{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px 14px;box-shadow:var(--shadow)}
.tile .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.tile .val{font-size:24px;font-weight:700;letter-spacing:-.4px;margin:5px 0 4px;color:var(--text);font-variant-numeric:tabular-nums}
.tile .sub{font-size:11.5px;color:var(--muted-2)}
.tile.accent{border-top:3px solid var(--apex-blue)}
.tile.warn{border-top:3px solid var(--warn)}
.tile.err{border-top:3px solid var(--err)}
.tile.ok{border-top:3px solid var(--success)}

/* ---------- Tables ---------- */
main table{width:100%;border-collapse:collapse;font-size:13px}
main th{text-align:left;font-weight:600;background:var(--bg);padding:8px 10px;border-bottom:1px solid var(--border);
  font-size:12px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
main td{padding:8px 10px;border-bottom:1px solid #EFEFEF;vertical-align:top}
main tr:hover td{background:#FAFAFA}
main td.num,main th.num{text-align:right;font-variant-numeric:tabular-nums}
main td.mono{font-family:Consolas,Monaco,monospace;font-size:12px}
/* Audit trail: let long Old/New values (system-note JSON blobs with no spaces) wrap
   instead of forcing the table absurdly wide. Cols: 1 When 2 Set By 3 Context 4 Type
   5 Field 6 Old Value 7 New Value. */
table.audit td:nth-child(6),table.audit td:nth-child(7){min-width:200px;max-width:440px;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word}
table.audit td:nth-child(1){white-space:nowrap}

/* ---------- Transaction-type tags ---------- */
.tag{display:inline-block;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:600;letter-spacing:.2px}
.tag.t-bill{background:#E3F2FD;color:#1565C0} .tag.t-pmt{background:#E8F5E9;color:#2E7D32}
.tag.t-po{background:#FFF3E0;color:#E65100} .tag.t-pr{background:#F3E5F5;color:#7B1FA2}
.tag.t-jrn{background:#ECEFF1;color:#37474F} .tag.t-inv{background:#FFEBEE;color:#C62828}
.tag.t-cust{background:#E0F2F1;color:#00695C}

/* ---------- Layout grids / charts ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1100px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
.chart-wrap{position:relative;height:260px}

/* ---------- Notice strips ---------- */
.notice{padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start}
.notice.info{background:#E1F5FE;border-left:4px solid var(--info);color:#01579B}
.notice.warn{background:#FFF3E0;border-left:4px solid var(--warn);color:#BF360C}
.notice.err{background:#FFEBEE;border-left:4px solid var(--err);color:#B71C1C}
.notice.ok{background:#E8F5E9;border-left:4px solid var(--success);color:#1B5E20}
.hint{font-size:11px;color:var(--muted);font-style:italic}

/* ---------- 360 field rows (later phases) ---------- */
.field{padding:6px 0;border-bottom:1px dashed #EFEFEF}
.field .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:600}
.field .val{font-size:14px;color:var(--text);margin-top:2px;word-break:break-word}
.field .lbl .cf-code{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted-2);font-size:10px;margin-left:6px}

/* ---------- Expense Report Summary box (NetSuite-style header summary) ---------- */
.ns-summary .ns-summary-h{background:#607c3c;color:#fff;border-bottom:none}
.ns-summary .card-b{padding:4px 14px 10px}
table.ns-sum{width:100%;border-collapse:collapse}
table.ns-sum td{padding:7px 2px;border-bottom:1px solid #EFEFEF;vertical-align:middle}
table.ns-sum td.l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:600}
table.ns-sum td.v{text-align:right;font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:14px}
table.ns-sum tr.tot td{border-top:2px solid var(--border);border-bottom:none;padding-top:9px}
table.ns-sum tr.tot td.l{color:var(--text);font-size:12px}
table.ns-sum tr.tot td.v{font-weight:700;font-size:15px}
table.ns-sum tr:last-child td{border-bottom:none}
table.ns-sum td.l.indent{padding-left:16px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}

/* ---------- Lineage strip (later phases) ---------- */
/* Horizontal scroll for long lineage chains (PR -> PO -> Bill -> many Payments).
   Nodes never shrink (flex:0 0 auto) so the strip overflows and scrolls instead of
   squishing, and the scrollbar is forced always-visible so users discover the scroll
   without zooming out (Windows/Chrome auto-hide it otherwise). Wheel->horizontal is JS. */
.lineage{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:14px 14px 8px;background:#FAFAFA;border:1px solid var(--border);border-radius:4px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior-x:contain}
.lineage::-webkit-scrollbar{height:10px}
.lineage::-webkit-scrollbar-track{background:#ECEFF3;border-radius:6px}
.lineage::-webkit-scrollbar-thumb{background:#B4BDC8;border-radius:6px;border:2px solid #ECEFF3}
.lineage::-webkit-scrollbar-thumb:hover{background:#94A0AE}
.lineage{scrollbar-width:thin;scrollbar-color:#B4BDC8 #ECEFF3}
/* ROOT CAUSE of the no-scroll (same as .ir-wide / .gl-led): the p3 detail region sits in
   a flex grid cell .col whose default min-width:auto lets it grow to the strip's intrinsic
   width, so the strip is never narrower than its content and overflow-x:auto never engages
   (the page just overflows + is clipped by #t_Body_content). Shrink the .col + main to
   min-width:0 so the strip's own overflow-x:auto scrolls instead. */
#t_Body_content .col:has(#d-detail){min-width:0 !important;max-width:100% !important}
#d-detail{min-width:0 !important;max-width:100% !important}
.lin-node{flex:0 0 auto;background:#fff;border:1px solid var(--border);border-radius:4px;padding:8px 12px;min-width:140px;box-shadow:var(--shadow)}
.lin-node.cur{border-color:var(--apex-blue);border-width:2px;background:var(--apex-blue-lt)}
.lin-node .t{font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:600;letter-spacing:.3px}
.lin-node .n{font-size:13px;font-weight:600;color:var(--apex-blue-dk);margin:2px 0}
.lin-node .d{font-size:11px;color:var(--muted)}
.lineage .arrow{flex:0 0 auto;color:var(--muted);font-size:18px}

/* ---------- File rows (later phases) ---------- */
.file-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed #EFEFEF}
.file-ico{width:32px;height:32px;background:var(--apex-blue-lt);color:var(--apex-blue-dk);border-radius:3px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.file-meta{min-width:0;flex:1 1 auto}
.file-name{font-weight:500;color:var(--text);word-break:break-word}
.file-sub{font-size:11px;color:var(--muted)}
.file-act{margin-left:auto;display:flex;gap:6px;flex:0 0 auto;align-items:center}
.file-na{font-size:12px;color:var(--muted-2)}

/* ============================================================
   PHASE 2 — All Transactions (Interactive Report) page
   These pages have no <main> wrapper (the IR is a native APEX region), so the
   page gutter is applied to the region roots and the IR table is skinned to the
   mock look. Reusable for every later IR page (GL, Masters, Custom Records).
   ============================================================ */
/* page gutter: inset the region roots from the pinned #t_Body_content edges */
#txn-shell{padding:12px 20px 0 !important}
#txn-filterbar{margin:8px 20px 0 !important}
#txn-ir{margin:10px 20px 22px !important}

/* ---------- filter bar ---------- */
#txn-filterbar{background:var(--card) !important;border:1px solid var(--border) !important;
  border-radius:6px !important;box-shadow:var(--shadow) !important;padding:10px 12px !important}
/* flatten APEX's grid (body > container > row > col) into one wrapping flex row so the
   filter reads as a single compact bar regardless of startNewRow placement */
#txn-filterbar .t-Region-bodyWrap{padding:0 !important;margin:0 !important}
#txn-filterbar .t-Region-body{display:flex !important;flex-wrap:wrap;align-items:flex-end;gap:8px 14px;padding:0 !important;margin:0 !important}
#txn-filterbar .container{display:contents}
#txn-filterbar .row{display:flex !important;flex-wrap:wrap;align-items:flex-end;gap:8px 14px;margin:0 !important;width:auto !important}
#txn-filterbar .col{width:auto !important;float:none !important;padding:0 !important;margin:0 !important;flex:0 0 auto}
#txn-filterbar .t-Form-fieldContainer{margin:0}
#txn-filterbar .t-Form-labelContainer{width:auto !important;float:none !important;padding:0 0 3px !important;text-align:left}
#txn-filterbar .t-Form-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin:0}
#txn-filterbar .t-Form-inputContainer{width:auto !important;float:none !important;padding:0 !important}
/* page-39 GL Account(s) shuttle: give it its OWN full-width row (so From/To/State/
   buttons wrap cleanly below it instead of floating beside it) and keep it compact */
#txn-filterbar .col:has(#P39_ACCOUNTS_CONTAINER),
#txn-filterbar #P39_ACCOUNTS_CONTAINER{flex:0 0 100% !important;max-width:100% !important;width:100% !important}
#P39_ACCOUNTS_CONTAINER .t-Form-inputContainer{max-width:840px}
#P39_ACCOUNTS_CONTAINER select{height:124px !important;min-width:300px}
#txn-filterbar select,#txn-filterbar input[type=text],#txn-filterbar input.apex-item-text,#txn-filterbar input.apex-item-datepicker{
  border:1px solid var(--border) !important;background:#fff !important;border-radius:4px;height:32px;padding:0 8px;
  font:inherit;color:var(--text);width:150px !important;box-shadow:none !important}
#txn-filterbar input.apex-item-text[id$="SEARCH"]{width:220px !important}
#txn-filterbar .apex-item-group--popup-lov,#txn-filterbar .apex-item-datepicker{width:150px !important}
#txn-filterbar .t-Form-helpButton,#txn-filterbar button[id$="_help"]{display:none !important}
#txn-filterbar .t-Button{height:32px;border-radius:4px;font-size:13px;font-weight:600;padding:0 16px}
#txn-filterbar .t-Button--hot{background:var(--apex-blue) !important;border-color:var(--apex-blue) !important;color:#fff !important}
#txn-filterbar .t-Button:not(.t-Button--hot){background:#fff !important;border:1px solid var(--border) !important;color:var(--text) !important}

/* ---------- interactive report card + table skin ---------- */
#txn-ir{background:var(--card) !important;border:1px solid var(--border) !important;
  border-radius:6px !important;box-shadow:var(--shadow) !important;overflow:hidden}
#txn-ir .t-Region-bodyWrap,#txn-ir .t-Region-body{padding:0 !important;margin:0 !important;background:transparent !important}
/* wide report tables (TB year-wise, GL dump, ledgers, Inventory Activity 23-col)
   overflow the viewport; the page-level overflow-x:hidden would clip the right
   columns + the pagination. Give the report body its own horizontal scrollbar.
   CRITICAL: .a-IRR-content is a FLEX ITEM (parent .a-IRR-fullView is flex). Its
   default min-width:auto makes it grow to the table's intrinsic width (e.g. 3822px
   for the 23-col report) and overflow the page instead of scrolling. min-width:0 on
   the flex chain lets it shrink to the region width so overflow-x:auto engages. */
#txn-ir .a-IRR-container,#txn-ir .a-IRR,#txn-ir .a-IRR-fullView,#txn-ir .a-IRR-content,#txn-ir .a-IRR-reportView,#txn-ir .a-IRR-tableContainer{min-width:0 !important}
#txn-ir .t-Region-body,#txn-ir .a-IRR-content,#txn-ir .a-IRR-tableContainer,#txn-ir .a-IRR-table-container,#txn-ir .a-IRR{overflow-x:auto !important;max-width:100% !important}
#txn-ir .a-IRR-toolbar{background:#fff;border:0;border-bottom:1px solid var(--border);padding:8px 12px}
/* width:auto + min-width:100% so a wide report (18 cols) grows to its natural width
   and the wrapper scrolls horizontally, instead of cramming/clipping the right columns. */
#txn-ir .a-IRR-table{width:auto;min-width:100%;border-collapse:collapse;font-size:13px}
#txn-ir .a-IRR-table th,#txn-ir .a-IRR-table td{padding:8px 10px;border-bottom:1px solid #EFEFEF;vertical-align:top;text-align:left}
#txn-ir .a-IRR-table th{background:var(--bg);border-bottom:1px solid var(--border);font-size:12px;
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;font-weight:600}
#txn-ir .a-IRR-table th a,#txn-ir .a-IRR-table th .a-IRR-headerLink{color:var(--muted) !important;font-weight:600}
#txn-ir .a-IRR-table tbody tr:hover td{background:#FAFAFA}
#txn-ir .a-IRR-table td a{color:var(--apex-blue)}
#txn-ir .a-IRR-table td[headers="TOTAL"],#txn-ir .a-IRR-table td.u-tD{text-align:right;font-variant-numeric:tabular-nums}
/* Pagination (e.g. "1 - 50 of 6,877" + next/prev): APEX right-aligns the bottom
   pagination bar, so on a wide horizontally-scrolling table it ends up off the
   right edge / clipped. Pin the bottom bar to the LEFT and make it sticky so the
   "of N" indicator + controls are always visible regardless of table width. */
#txn-ir .a-IRR-paginationWrap--bottom{position:sticky;left:0;display:flex;
  justify-content:flex-start !important;text-align:left !important;
  padding:10px 12px;border-top:1px solid var(--border);background:#fff}
#txn-ir .a-IRR-pagination{float:none !important;justify-content:flex-start !important;
  text-align:left !important;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
#txn-ir .a-IRR-pagination .u-pullRight{float:none !important}
/* neutral status pill (no ok/warn/err class) -> grey, not the read-only blue */
#txn-ir .pill:not(.ok):not(.warn):not(.err){background:var(--bg);color:var(--muted)}

/* ---- Very wide IRs (e.g. p26 PO Status, 43 cols): bounded scroll panel ----
   The page-level overflow-x:hidden + the table's own horizontal scrollbar sitting
   at the BOTTOM of 50 rows made the right columns unreachable (you couldn't see
   or get to the scrollbar). Scope ONLY to regions tagged .ir-wide so normal-width
   reports (p2 etc.) are untouched. Make .a-IRR-tableContainer a fixed-height panel
   so BOTH scrollbars are always in view; disable the absolutely-positioned sticky
   header clone (it fights the inner scroll) and keep the real header visible via
   position:sticky inside the panel. */
/* ROOT CAUSE of the no-scroll: the UT grid cell .col is a flex item (parent .row
   is display:flex) with the default min-width:auto, so it EXPANDS to the table's
   intrinsic width (~6200px) instead of shrinking to the flex row (viewport) width.
   Everything below it inherits that width, so no overflow:auto ever has content to
   scroll. Forcing the .col that holds this report to min-width:0 lets it shrink to
   the viewport, and the inner overflow:auto panels finally engage. */
#t_Body_content .col:has(.ir-wide){min-width:0 !important;max-width:100% !important}
#txn-ir.ir-wide .a-IRR-tableContainer{overflow:auto !important;max-height:calc(100vh - 250px) !important;position:relative}
/* Once the container is viewport-constrained, a width:auto table COMPRESSES its 43
   columns to fit (unreadable). Force the table to its natural content width so it
   overflows the container and scrolls; cap each cell so long text (description,
   project) wraps instead of making one giant column. */
#txn-ir.ir-wide .a-IRR-table{width:max-content !important;min-width:100% !important}
#txn-ir.ir-wide .a-IRR-table td{max-width:300px;white-space:normal !important;overflow-wrap:anywhere;vertical-align:top}
/* fht's .t-fht-wrapper is overflow:hidden and clips the wide table, so the scroll
   container (.a-IRR-tableContainer) never sees the overflow. Let the wrapper grow to
   the table's content width and not clip, so the container scrolls. */
#txn-ir.ir-wide .t-fht-wrapper,#txn-ir.ir-wide .t-fht-tbody{overflow:visible !important;width:max-content !important}
/* In fht mode APEX renders NO <thead>; the column header is a separate
   absolutely-positioned table (.t-fht-thead) that its JS re-pins on PAGE scroll.
   That breaks inside an INNER scroll panel. Convert it to position:sticky so it
   sticks to the panel top on vertical scroll yet rides along on horizontal scroll
   (only `top` is pinned), keeping it column-aligned with the body. */
#txn-ir.ir-wide .t-fht-thead.js-stickyTableHeader{position:sticky !important;top:0 !important;
  z-index:4;background:var(--bg)}
/* fht reserves header space with a 51px placeholder for the (was-absolute) header;
   the header is now sticky/in-flow, so that placeholder is just an empty gap. */
#txn-ir.ir-wide .js-stickyWidget-placeholder{display:none !important}

/* ============================================================
   PHASE 2 — Transaction Detail (page 3, bespoke dynamicContent)
   Tabs + buttons + raw-json + clickable lineage nodes. Tables reuse `main table`.
   ============================================================ */
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:14px;gap:4px}
.tab{padding:8px 14px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none}
.tab:hover{color:var(--text)}
.tab.active{color:var(--apex-blue-dk);border-bottom-color:var(--apex-blue)}
.tab .ct{font-size:11px;color:var(--muted);margin-left:5px;font-weight:400}
.tab.active .ct{color:var(--apex-blue-dk)}
.tabpane{display:none}
.tabpane.active{display:block}
.btn{padding:5px 12px;background:var(--apex-blue);color:#fff;border:none;border-radius:3px;font-size:13px;font-weight:500;text-decoration:none;display:inline-block}
.btn:hover{background:var(--apex-blue-dk);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--apex-blue);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--apex-blue-lt);color:var(--apex-blue-dk)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.disabled,.btn[disabled]{opacity:.5;pointer-events:none}
.crumbs a{color:var(--apex-blue)}
.crumbs a:hover{text-decoration:underline}
.d-back{margin:2px 0 12px}
.lin-node[data-href]{cursor:pointer}
.lin-node[data-href]:hover{border-color:var(--apex-blue)}
.raw-json{font-family:Consolas,Monaco,monospace;font-size:12px;background:#272822;color:#F8F8F2;
  padding:14px;border-radius:4px;overflow-x:auto;line-height:1.45;white-space:pre-wrap;word-break:break-word;max-height:640px;overflow-y:auto}
.cf-kind{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:1px 6px;margin-left:6px}

/* ---------- GL & Trial Balance (page 5) ---------- */
.muted{color:var(--muted-2)}
.empty-state{padding:34px 18px;text-align:center;color:var(--muted);font-size:13px}
.gl-scroll{overflow-x:auto}
main table tfoot th{background:var(--bg);font-weight:700;border-top:2px solid var(--border);
  border-bottom:none;padding:8px 10px;font-size:12px;text-transform:none;letter-spacing:0;white-space:nowrap}
main table tfoot th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.gl-open td{color:var(--muted);background:#FAFBFC}
table.gl-stmt{max-width:560px}
table.gl-stmt td{padding:7px 10px}
table.gl-stmt td.num{text-align:right;font-variant-numeric:tabular-nums}
table.gl-stmt tr.gl-sub td{border-top:1px solid var(--border)}
table.gl-stmt tr.gl-tot td{border-top:2px solid var(--border);border-bottom:none;
  background:var(--bg);font-size:14px}
.gl-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gl-search{padding:6px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;
  font-family:inherit;min-width:280px;color:var(--text);background:#fff}
.gl-search:focus{outline:none;border-color:var(--apex-blue);box-shadow:0 0 0 2px var(--apex-blue-lt)}
.gl-count{font-size:12px;color:var(--muted)}
/* Trial Balance: credit values shown negative in red (customer feedback item 5) */
.cr-neg{color:var(--err);font-variant-numeric:tabular-nums}

/* GL page (p5) Trial Balance + Account Ledger horizontal scroll (same root cause as
   .ir-wide / .gl-led): the bespoke #gl-main region sits in a flex grid cell .col whose
   default min-width:auto expands it to the table's content width, so the table overflows
   the pinned #t_Body_content (overflow-x:hidden) and the right column (Closing / Running
   balance) is clipped instead of scrollable. Shrink the .col so the .gl-scroll panel's
   overflow:auto engages; force the table to its natural width so it overflows + scrolls,
   and pin the header so it rides along. Scoped to #gl-main so other pages are untouched. */
#t_Body_content .col:has(#gl-main){min-width:0 !important;max-width:100% !important}
#gl-main{min-width:0 !important;max-width:100% !important}
#gl-main .gl-scroll{overflow:auto !important;max-width:100%;max-height:calc(100vh - 300px)}
#gl-main .gl-scroll table{width:max-content !important;min-width:100% !important}
#gl-main .gl-scroll thead th{position:sticky;top:0;z-index:2}

/* ---------- General Ledger - Item Wise (report 008, page 39) ----------
   Wide 12-col GL detail statement: account-group headers, running-balance
   detail lines, rolled-up totals. Distinct from the narrow page-5 .gl-stmt. */
.gl-cap{margin:2px 0 10px;color:var(--muted);font-size:13px}
.gl-led-scroll{overflow:auto;max-width:100%;max-height:calc(100vh - 250px);
  border:1px solid var(--border);border-radius:6px;background:#fff}
/* Wide-table horizontal scroll (same root cause as .ir-wide / .tb-tree): the bespoke
   dynamicContent region sits in a flex grid cell .col whose default min-width:auto lets
   it grow to the table's max-content width and overflow the page-level overflow-x:hidden
   instead of scrolling. Shrink the .col (and the block wrappers) to min-width:0 so the
   .gl-led-scroll overflow:auto engages. */
#t_Body_content .col:has(.gl-led){min-width:0 !important;max-width:100% !important}
#gl-detail,#gl-detail .gl-led-scroll{min-width:0 !important;max-width:100% !important}
#fd-bal,#fd-bal .gl-led-scroll{min-width:0 !important;max-width:100% !important}
table.gl-led{border-collapse:collapse;width:max-content;min-width:100%;font-size:12.5px}
table.gl-led thead th{position:sticky;top:0;z-index:2;background:#f4f6f9;text-align:left;
  padding:7px 10px;border-bottom:1px solid var(--border);white-space:nowrap;font-weight:600;color:var(--text)}
table.gl-led th.num,table.gl-led td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.gl-led td{padding:5px 10px;border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap}
table.gl-led tr.gl-h td{background:#eef2f7;font-weight:600;border-top:1px solid var(--border)}
table.gl-led tr.gl-t td{background:#f6f8fa;font-weight:700;border-top:2px solid var(--border)}
table.gl-led tr.gl-grand td{background:#e8edf3;border-top:2px solid var(--text)}
table.gl-led td:last-child{max-width:420px;white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
/* Fixed Deposit Balances (page 46): 4-col balance tree. The amount is the last
   column so undo the gl-led muted/wrapping last-child rule for it. */
table.fd-led{font-size:13px}
table.fd-led td:last-child{max-width:none;white-space:nowrap;overflow-wrap:normal;color:var(--text);font-variant-numeric:tabular-nums}
table.fd-led tr.gl-grand td{font-weight:700}
/* simple report letterhead (matches the NetSuite export header block) */
.letterhead{margin:2px 0 12px;padding:0 0 10px;border-bottom:2px solid var(--border)}
.letterhead .lh-name{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.letterhead .lh-title{font-size:18px;font-weight:700;color:var(--text);margin-top:2px;letter-spacing:-0.01em}
.letterhead .lh-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
/* expand / collapse of account groups (report 008, page 39) */
.gl-toolbar2{margin:0 0 8px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gl-toolbar2 a{font-size:12px;color:var(--apex-blue);text-decoration:none;cursor:pointer;user-select:none}
.gl-toolbar2 a:hover{text-decoration:underline}
.gl-toolbar2 .gl-hint{font-size:11px;color:var(--muted)}
table.gl-led tr.gl-h{cursor:pointer}
table.gl-led tr.gl-h .gl-cr{display:inline-block;width:12px;color:var(--muted-2);font-size:9px;line-height:1}
table.gl-led tr.gl-h .gl-cr::before{content:'\25BE'}
table.gl-led tr.gl-h.gl-collapsed .gl-cr::before{content:'\25B8'}
table.gl-led tr.gl-hidden{display:none}

/* ============================================================
   Income Statement (Detailed) — report 001, page 24
   Account-tree P&L: section headers, indented nodes, subtotals.
   ============================================================ */
table.is-stmt{width:100%;min-width:560px;border-collapse:collapse}
table.is-stmt th,table.is-stmt td{padding:6px 10px;font-size:13px;border-bottom:1px solid var(--border)}
table.is-stmt thead th{background:var(--bg);font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);font-weight:700}
table.is-stmt td.num,table.is-stmt th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.is-stmt tr.is-sec td{background:var(--bg);font-weight:700;color:var(--text);
  text-transform:uppercase;font-size:11px;letter-spacing:.5px;border-top:2px solid var(--border)}
table.is-stmt tr.is-row td{color:var(--text)}
table.is-stmt tr.is-row:hover td{background:#FAFBFC}
.is-acct{display:inline-flex;align-items:baseline;gap:6px}
.is-acct a{color:var(--text);text-decoration:none}
.is-acct a:hover{color:var(--apex-blue);text-decoration:underline}
.is-caret{cursor:pointer;color:var(--muted);font-size:11px;user-select:none;
  margin-left:-14px;width:12px;display:inline-block}
.is-caret:hover{color:var(--apex-blue)}
table.is-stmt tr.is-tot td{font-weight:700;background:#F7F9FB;border-top:1px solid var(--border)}
table.is-stmt tr.is-gp td{font-weight:700;background:var(--bg);border-top:2px solid var(--border)}
table.is-stmt tr.is-net td{font-weight:700;font-size:14px;color:#fff;background:var(--apex-blue)}
table.is-stmt tr.is-net td.num{color:#fff}
td.memo-cell{max-width:280px;white-space:normal;overflow-wrap:anywhere;color:var(--muted)}

/* NetSuite-format Trial Balance tree (p36) */
.tb-head{text-align:center;margin:2px 0 14px}
.tb-head .tb-co{font-weight:700;font-size:15px;color:var(--text);letter-spacing:-.01em}
.tb-head .tb-rt{font-weight:700;font-size:13px;color:var(--text);margin-top:2px}
.tb-head .tb-dt{font-size:12px;color:var(--muted);margin-top:1px}
table.tb-tree{width:max-content;min-width:100%;border-collapse:collapse}
/* same root cause as .ir-wide: the bespoke region sits in a flex .col whose
   min-width:auto expands to the table's intrinsic width and overflows the pinned
   #t_Body_content (clipped). Shrink the .col so .gl-scroll's overflow-x:auto engages. */
#t_Body_content .col:has(.tb-tree){min-width:0 !important;max-width:100% !important}
.card-b:has(.tb-tree){overflow-x:hidden}
.gl-scroll:has(.tb-tree){overflow-x:auto;max-width:100%;max-height:calc(100vh - 280px)}
table.tb-tree th,table.tb-tree td{padding:5px 10px;font-size:13px;border-bottom:1px solid var(--border)}
table.tb-tree thead th{background:var(--bg);font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:600;position:sticky;top:0;z-index:1}
table.tb-tree td.num,table.tb-tree th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tb-tree td.acct{white-space:nowrap}
table.tb-tree td.acct .mono{color:var(--muted-2)}
table.tb-tree tr.tbt-h td{font-weight:700;color:var(--text)}
table.tb-tree tr.tbt-l:hover td{background:#FAFBFC}
table.tb-tree tr.tbt-l a{color:var(--apex-blue);text-decoration:none}
table.tb-tree tr.tbt-l a:hover{text-decoration:underline}
table.tb-tree tr.tbt-t td{font-weight:700;background:#F7F9FB;border-top:1px solid var(--border)}
table.tb-tree tr.tbt-g td{font-weight:700;font-size:14px;color:#fff;background:var(--apex-blue);
  border-top:2px solid var(--apex-blue-dk)}
table.tb-tree tr.tbt-g td .cr-neg{color:#fff}

/* "Preparing your Excel" download overlay */
.is-dl-ov{display:none;position:fixed;inset:0;z-index:9999;background:rgba(20,28,38,.45);
  align-items:center;justify-content:center}
.is-dl-box{background:#fff;border-radius:10px;padding:26px 34px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:18px;min-width:280px}
.is-dl-txt{font-size:14px;font-weight:600;color:var(--text);line-height:1.4}
.is-dl-txt span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.is-dl-spin{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--apex-blue);
  border-radius:50%;animation:is-dl-rot .8s linear infinite;flex:none}
@keyframes is-dl-rot{to{transform:rotate(360deg)}}

/* Vendor Statement letterhead card (page 38 — NetSuite Vendor Statement format) */
.stmt-head .card-b{padding:14px 16px}
.stmt-head .sh-org{font-size:15px;font-weight:700;color:var(--text)}
.stmt-head .sh-vendor{font-size:14px;font-weight:600;color:var(--text);margin-top:8px}
.stmt-head .sh-addr{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:1px}
.stmt-head .sh-cin{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.stmt-head .sh-period{font-size:12px;color:var(--muted-2);margin-top:8px}
.stmt-head .sh-tot{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.stmt-head .sh-tot span{font-size:12px;color:var(--muted)}
.stmt-head .sh-tot b{display:block;font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

/* ============================================================
   PHASE 4a — Reports Hub (page 6, bespoke dynamicContent launchpad)
   A catalog of report cards grouped Finance / SCM / AR & Billing.
   ============================================================ */
.rpt-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.rpt-sec::after{content:'';flex:1;height:1px;background:var(--border)}
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:12px}
.rpt-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:6px;box-shadow:var(--shadow);padding:14px 15px;text-decoration:none;color:var(--text);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.rpt-card:hover{text-decoration:none;border-color:var(--apex-blue);
  box-shadow:0 2px 6px rgba(5,104,194,.14);transform:translateY(-1px)}
.rpt-card.soon{opacity:.72;cursor:default;pointer-events:none}
.rpt-card .rpt-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rpt-card .rpt-ico{width:30px;height:30px;flex:0 0 auto;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-size:15px;background:var(--apex-blue-lt);color:var(--apex-blue-dk)}
.rpt-card .rpt-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.25}
.rpt-card .rpt-desc{font-size:12px;color:var(--muted);line-height:1.45;flex:1;margin-bottom:10px}
.rpt-card .rpt-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rpt-card .rpt-badge{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg);
  border-radius:10px;padding:2px 9px;font-variant-numeric:tabular-nums}
.rpt-card .rpt-go{font-size:12px;font-weight:600;color:var(--apex-blue)}
.rpt-card.soon .rpt-badge{background:#FFF3E0;color:var(--warn)}

/* ---------- shared report-page bits (pages 7-17) ---------- */
#txn-shell .d-back{margin:2px 0 10px}
#txn-shell .notice{margin-bottom:0}
.rpt-note{font-size:12px;color:var(--muted);margin:8px 20px 0}

/* ============================================================
   LOGIN PAGE (p9999, @/login) — bespoke split-screen redesign
   Ported from the Stitch "Secure Archive Access" design.
   Scoped under body.t-PageBody--login (server-set, no FOUC) so it
   never affects the authenticated app pages.
   ============================================================ */
body.t-PageBody--login{
  --lg-navy:#003a5b; --lg-navy-2:#02527d; --lg-tint:#22638f; --lg-teal:#006783;
  --lg-bg:#F4F7FB; --lg-card:#FFFFFF; --lg-border:#E2E8F0;
  --lg-heading:#0F172A; --lg-body:#334155; --lg-mute:#94A3B8;
  overflow:hidden;
}

/* The app pins #t_Body_content past a 230px sidebar; on login there is no
   sidebar (gated). Re-purpose it as the RIGHT-half "stage" that paints the
   industrial-grid background. The card itself is pinned directly (below),
   so we don't fight the UT grid-wrapper chain. */
body.t-PageBody--login #t_Body_content{
  position:fixed !important; top:0 !important; bottom:0 !important;
  left:50% !important; right:0 !important; overflow:auto !important;
  background-color:var(--lg-bg) !important;
  background-image:
    linear-gradient(to right, rgba(2,82,125,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,82,125,.06) 1px, transparent 1px);
  background-size:38px 38px;
}

/* ---- Left brand panel (injected by the login-skin region) ---- */
body.t-PageBody--login .depl-brand{
  position:fixed; top:0; bottom:0; left:0; width:50%; z-index:5; color:#fff;
  background-color:var(--lg-tint);           /* fallback while img loads */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
/* photo layer: full-bleed, opacity-80, mix-blend-overlay (exactly Stitch) */
body.t-PageBody--login .depl-brand-bg{
  position:absolute; inset:0; z-index:0;
}
body.t-PageBody--login .depl-brand-bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.80; mix-blend-mode:overlay;
}
/* left-to-right tint gradient over the photo (surface-tint/90 → surface-tint/60) */
body.t-PageBody--login .depl-brand::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(34,99,143,.90), rgba(34,99,143,.60));
}
/* content sits above both layers */
body.t-PageBody--login .depl-brand-inner{
  position:relative; z-index:2;
  padding:0 40px; max-width:480px; width:100%;
}
body.t-PageBody--login .depl-brand h1{
  font-family:'Hanken Grotesk','Inter',sans-serif; font-weight:700; font-size:36px;
  line-height:1.2; letter-spacing:-.02em; margin:0 0 24px; color:#fff;
}
body.t-PageBody--login .depl-brand p{
  font-size:18px; line-height:1.6; color:rgba(204,229,255,.90); margin:0 0 32px;
}
body.t-PageBody--login .depl-brand-badge{
  display:inline-flex; align-items:center; gap:16px;
  color:rgba(147,204,254,.90);
}
body.t-PageBody--login .depl-brand-badge svg{
  width:20px; height:20px; flex:0 0 auto;
}
body.t-PageBody--login .depl-brand-badge span{
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
body.t-PageBody--login .depl-brand-foot{
  position:absolute; left:40px; right:40px; bottom:28px; z-index:2;
  font-size:11.5px; letter-spacing:.03em; color:rgba(191,214,235,.58); text-align:left;
}

/* ---- Login card (the APEX .t-Login-region) ----
   Pinned to the centre of the right half — deterministic, independent of the
   UT content-wrapper chain (left:75% = midpoint of the 50%..100% stage). */
body.t-PageBody--login .t-Login-region{
  position:fixed !important; top:50% !important; left:75% !important;
  transform:translate(-50%,-50%) !important;
  width:420px; max-width:calc(50vw - 72px);
  max-height:calc(100vh - 40px); overflow:auto; margin:0; z-index:6;
  background:var(--lg-card); border:1px solid var(--lg-border); border-radius:14px;
  box-shadow:0 18px 50px rgba(2,82,125,.14), 0 2px 8px rgba(2,82,125,.06);
  padding:44px 38px 34px;
}
body.t-PageBody--login .t-Login-region::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #02527d, #006783 60%, #22638f);
}

/* Header (logo + title + injected subtitle) */
body.t-PageBody--login .t-Login-header{ text-align:center; margin-bottom:30px; }
body.t-PageBody--login span.t-Login-logo{ display:none !important; }
body.t-PageBody--login img.t-Login-logo{
  display:block; height:64px; width:auto; max-width:160px;
  object-fit:contain; margin:0 auto 32px;
}
body.t-PageBody--login .t-Login-title{
  font-family:'Hanken Grotesk','Inter',sans-serif; font-weight:700; font-size:24px;
  color:var(--lg-heading); letter-spacing:-.01em; margin:0;
}
body.t-PageBody--login .depl-sub{
  margin:9px 0 0; font-size:13.5px; line-height:1.5; color:var(--lg-body);
}

/* Form fields — reuse APEX's native item-icon, just reskin */
body.t-PageBody--login .t-Login-body .t-Form-fieldContainer{ margin-bottom:18px; }
body.t-PageBody--login .t-Login-body .t-Form-labelContainer{ padding:0 0 6px; }
body.t-PageBody--login .t-Login-body .t-Form-label{
  font-size:13px; font-weight:600; color:var(--lg-heading); letter-spacing:.01em;
}
body.t-PageBody--login .t-Login-region input.apex-item-text{
  width:100%; box-sizing:border-box; height:auto;
  padding:12px 14px; border:1px solid var(--lg-border); border-radius:9px;
  background:#fff; font-size:14px; color:var(--lg-body);
  transition:border-color .18s, box-shadow .18s;
}
body.t-PageBody--login .t-Login-region .t-Form-itemWrapper{ position:relative; }
body.t-PageBody--login .t-Login-region input.apex-item-has-icon{ padding-left:42px; }
body.t-PageBody--login .t-Login-region input.apex-item-text::placeholder{ color:var(--lg-mute); }
body.t-PageBody--login .t-Login-region input.apex-item-text:focus{
  outline:none; border-color:var(--lg-teal);
  box-shadow:0 0 0 3px rgba(0,103,131,.16);
}
body.t-PageBody--login .t-Login-region .apex-item-icon{
  color:var(--lg-mute); font-size:16px; width:42px; z-index:2;
}
/* Password field: APEX wraps input + reveal toggle in .apex-item-group--password.
   Make the GROUP the bordered field; input + toggle sit borderless inside it. */
body.t-PageBody--login .t-Login-region .apex-item-group--password{
  display:flex; align-items:stretch; width:100%;
  border:1px solid var(--lg-border); border-radius:9px; background:#fff;
  transition:border-color .18s, box-shadow .18s;
}
body.t-PageBody--login .t-Login-region .apex-item-group--password:focus-within{
  border-color:var(--lg-teal); box-shadow:0 0 0 3px rgba(0,103,131,.16);
}
body.t-PageBody--login .t-Login-region input.apex-item-password{
  flex:1; border:0 !important; box-shadow:none !important;
  background:transparent; padding-left:42px;
}
body.t-PageBody--login .t-Login-region .t-Button--passwordVisibility{
  border:0; background:transparent; box-shadow:none; color:var(--lg-mute);
  padding:0 12px; min-height:0; height:auto;
}
body.t-PageBody--login .t-Login-region .t-Button--passwordVisibility:hover{ color:var(--lg-teal); }

/* "Keep me signed in" — single-checkbox renders its own visible label inline */
body.t-PageBody--login #P9999_REMEMBER_CONTAINER{ margin:2px 0 2px; text-align:left; }
body.t-PageBody--login #P9999_REMEMBER_CONTAINER .t-Form-labelContainer{ display:none; }
body.t-PageBody--login #P9999_REMEMBER_CONTAINER .t-Form-inputContainer{ width:100%; padding:0; }
body.t-PageBody--login .t-Login-region .apex-item-single-checkbox{
  display:flex; align-items:center; gap:8px;
}
body.t-PageBody--login .t-Login-region .apex-item-single-checkbox label.u-checkbox{
  margin:0; font-size:13px; font-weight:500; color:var(--lg-body); cursor:pointer;
}
body.t-PageBody--login #P9999_REMEMBER{
  width:16px; height:16px; accent-color:var(--lg-navy-2); cursor:pointer; margin:0;
}

/* Sign In button */
body.t-PageBody--login .t-Login-buttons{ margin-top:22px; }
body.t-PageBody--login .t-Login-buttons .t-Button--hot{
  width:100%; justify-content:center; gap:8px;
  background:var(--lg-navy-2); border:0; border-radius:9px; padding:13px 18px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; letter-spacing:.01em;
  color:#fff; box-shadow:0 6px 16px rgba(2,82,125,.22);
  transition:background .18s, box-shadow .18s, transform .18s;
}
body.t-PageBody--login .t-Login-buttons .t-Button--hot:hover{
  background:#014063; box-shadow:0 8px 22px rgba(2,82,125,.30);
}
body.t-PageBody--login .t-Login-buttons .t-Button--hot:active{ transform:translateY(1px); }
body.t-PageBody--login .t-Login-buttons .t-Button-label::after{
  content:'\2192'; margin-left:9px; display:inline-block;
  transition:transform .18s; font-weight:700;
}
body.t-PageBody--login .t-Login-buttons .t-Button--hot:hover .t-Button-label::after{
  transform:translateX(3px);
}

/* Footer link (injected) + APEX's own login links area */
body.t-PageBody--login .depl-foot{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--lg-border);
  text-align:center; font-size:13px; color:var(--lg-body);
}
body.t-PageBody--login .depl-foot a{
  color:var(--lg-teal); font-weight:600; text-decoration:none;
}
body.t-PageBody--login .depl-foot a:hover{ text-decoration:underline; }
body.t-PageBody--login .t-Login-links:empty,
body.t-PageBody--login .t-Login-subRegions:empty{ display:none; }

/* Error / success notifications ------------------------------------------------
   APEX renders #APEX_ERROR_MESSAGE / #APEX_SUCCESS_MESSAGE as <span>s in the
   normal page flow (inside main.t-Login-containerBody), and toggles .u-hidden
   on/off. When visible they float in the gap between the two fixed panels.
   Fix: pin them as fixed overlays centred in the right half, above the card. */
body.t-PageBody--login #APEX_ERROR_MESSAGE.u-hidden,
body.t-PageBody--login #APEX_SUCCESS_MESSAGE.u-hidden{ display:none !important; }

body.t-PageBody--login #APEX_ERROR_MESSAGE:not(.u-hidden),
body.t-PageBody--login #APEX_SUCCESS_MESSAGE:not(.u-hidden){
  position:fixed !important; top:24px !important;
  left:75% !important; transform:translateX(-50%) !important;
  width:420px; max-width:calc(50vw - 48px);
  z-index:30 !important; display:block !important;
}
/* Strip the default APEX alert chrome; replace with clean inline banner */
body.t-PageBody--login #APEX_ERROR_MESSAGE .t-Alert,
body.t-PageBody--login #APEX_SUCCESS_MESSAGE .t-Alert{
  all:unset; display:flex !important; align-items:flex-start; gap:10px;
  border-radius:10px; padding:12px 16px;
  font-size:13px; font-weight:500; line-height:1.45;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
body.t-PageBody--login #APEX_ERROR_MESSAGE .t-Alert{
  background:#FEF2F2; border:1px solid #FECACA; color:#991B1B;
}
body.t-PageBody--login #APEX_SUCCESS_MESSAGE .t-Alert{
  background:#F0FDF4; border:1px solid #BBF7D0; color:#166534;
}
/* Hide the icon box (keeps content clean) */
body.t-PageBody--login #APEX_ERROR_MESSAGE .t-Alert-icon,
body.t-PageBody--login #APEX_SUCCESS_MESSAGE .t-Alert-icon{ display:none; }
body.t-PageBody--login #APEX_ERROR_MESSAGE .t-Alert-content,
body.t-PageBody--login #APEX_SUCCESS_MESSAGE .t-Alert-content{
  flex:1; font:inherit; color:inherit;
}
body.t-PageBody--login #APEX_ERROR_MESSAGE .t-Alert-content p,
body.t-PageBody--login #APEX_SUCCESS_MESSAGE .t-Alert-content p{ margin:0; }
/* Dismiss button */
body.t-PageBody--login #APEX_ERROR_MESSAGE .t-Button--closeAlert,
body.t-PageBody--login #APEX_SUCCESS_MESSAGE .t-Button--closeAlert{
  all:unset; cursor:pointer; opacity:.6; font-size:16px; line-height:1;
  flex:0 0 auto; padding:0 2px; color:inherit;
}
body.t-PageBody--login #APEX_ERROR_MESSAGE .t-Button--closeAlert:hover,
body.t-PageBody--login #APEX_SUCCESS_MESSAGE .t-Button--closeAlert:hover{ opacity:1; }

/* Also catch any old-style .t-Body-alert that APEX might insert */
body.t-PageBody--login .t-Body-alert{
  position:fixed !important; top:24px !important;
  left:75% !important; transform:translateX(-50%) !important;
  width:420px; max-width:calc(50vw - 48px);
  z-index:30 !important;
}

/* ---- Responsive: stack to a single centred card under 860px ---- */
@media (max-width:860px){
  body.t-PageBody--login .depl-brand{ display:none; }
  body.t-PageBody--login #t_Body_content{ left:0 !important; right:0 !important; }
  body.t-PageBody--login .t-Login-region{
    left:50% !important; width:min(420px, calc(100vw - 32px)); max-width:none;
  }
}

/* ===================================================================
   Phase 5 - Master Data + 360 pages
   =================================================================== */
/* 360 entity banner (vendor name / customer name headline) */
.v-banner{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 16px}
.v-banner h2{font-size:21px;font-weight:700;letter-spacing:-.4px;color:var(--text);margin:0}
.v-banner .lite{font-size:13px;color:var(--muted)}
.v-banner .pill{vertical-align:middle}

/* Master Data tabbed IRs: each IR region carries .mtab + .mtab-<key>;
   the JS switcher in #m-tabbar shows one at a time. */
#m-tabbar{margin-bottom:6px}
.mtab{display:none}
.mtab.mtab-on{display:block}
/* the in-page tab buttons reuse .tabs/.tab; ct count chip already styled */

/* Reuse the flat #txn-ir IR skin for the masters IRs (they carry .mtab) */
.mtab.t-Region{background:var(--card) !important;border:1px solid var(--border) !important;
  border-radius:6px;box-shadow:var(--shadow);margin:10px 20px 22px !important}
.mtab .t-Region-bodyWrap,.mtab .t-Region-body{padding:0 !important;margin:0 !important;
  background:transparent !important}
.mtab .t-Region-body{overflow-x:auto !important}
.mtab .a-IRR-toolbar{background:#fff;border:0;border-bottom:1px solid var(--border);padding:8px 12px}
.mtab .a-IRR-table{width:100%;border-collapse:collapse;font-size:13px}
.mtab .a-IRR-table th,.mtab .a-IRR-table td{padding:8px 10px;border-bottom:1px solid #EFEFEF;
  vertical-align:top;text-align:left}
.mtab .a-IRR-table th{background:var(--bg);border-bottom:1px solid var(--border);font-size:12px;
  text-transform:uppercase;letter-spacing:.4px}
.mtab .a-IRR-table th a,.mtab .a-IRR-table th .a-IRR-headerLink{color:var(--muted) !important;font-weight:600}
.mtab .a-IRR-table tbody tr:hover td{background:#FAFAFA}
.mtab .a-IRR-table td a{color:var(--apex-blue)}
.mtab .a-IRR-paginationWrap--bottom{position:sticky;left:0;display:flex;
  justify-content:flex-start !important;text-align:left !important}
.mtab .a-IRR-pagination{float:none !important;justify-content:flex-start !important;text-align:left !important}
.mtab .pill:not(.ok):not(.warn):not(.err){background:var(--bg);color:var(--muted)}

/* ============================================================
   GLOBAL SEARCH (page 42) - result sections + hit cards
   ============================================================ */
#search-page .srch-sec{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 9px;display:flex;align-items:baseline;gap:8px}
#search-page .srch-count{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted-2);font-size:12px}
#search-page .srch-list{display:flex;flex-direction:column;gap:7px}
#search-page .srch-hit{display:flex;align-items:center;gap:13px;padding:11px 14px;background:var(--card);
  border:1px solid var(--border);border-radius:6px;text-decoration:none;color:var(--text);
  box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s}
#search-page a.srch-hit:hover{border-color:var(--apex-blue);text-decoration:none;
  box-shadow:0 2px 6px rgba(16,24,40,.10)}
#search-page .srch-hit.nolink{cursor:default}
#search-page .srch-ico{font-size:17px;width:26px;text-align:center;color:var(--muted-2);flex:none}
#search-page .srch-main{flex:1;min-width:0}
#search-page .srch-title{font-weight:600;font-size:13.5px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#search-page .srch-title .tag{margin-right:6px}
#search-page .srch-sub{font-size:12px;color:var(--muted);margin-top:2px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#search-page .srch-meta{text-align:right;font-size:12px;color:var(--muted-2);white-space:nowrap;flex:none}
#search-page .srch-meta .srch-amt{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#search-page .srch-meta .srch-dl{color:var(--apex-blue);font-weight:600}