/* =====================================================================
   SA WORKSTATION CHROME (Phase 1 + Phase 2)
   ---------------------------------------------------------------------
   Shared, scoped styling for the professional SA accounting workstation
   shell: top menu, toolbar, light-green left navigation, white working
   area, compact table-first content and status bar.

   Used by:
     * templates/sa_workstation.html  (Phase 1 root shell)
     * templates/bank_home.html       (Phase 2 Bank module)

   Director standard: light-green left nav, white workspace, dark-gray
   text, thin borders, compact tables. No dark/neon/glass, no animations,
   no KPI/cockpit/dashboard styling.
   ===================================================================== */

:root{
  /* Retro Accounting theme — based on the logo palette (deep green + gold).
     Light but NOT pale: strong green-tinted borders, deep-green workstation
     sidebar, near-black text. No dark mode, no glass, no washed-out grays. */

  /* Logo palette */
  --ra-green-deep: #3c6e4f;       /* medium logo green — sidebar (not too dark) */
  --ra-green-deeper: #2f5a40;     /* crisp sidebar edge / deepest green */
  --ra-green-divider: #2f5a40;    /* sidebar divider / pressed */
  --ra-gold: #d2b06e;             /* logo gold — active accent (brighter on green) */
  --sa-accent: #2a7048;           /* primary green — links / buttons / focus */

  /* Text — sharpened: ordinary text near-black, secondary text darkened so
     labels / helper / descriptions read clearly (no pale gray/blue). */
  --sa-text: #1b222a;             /* near-black, sharp (Chart-of-Accounts strength) */
  --sa-text-soft: #424c58;        /* secondary text — darker, clearly readable */

  /* Borders — clearly visible, green-tinted, never disappearing */
  --sa-border: #8a9f92;           /* primary border (sharper, professional) */
  --sa-border-soft: #aabbb0;      /* soft border — still clearly visible */

  /* Surfaces */
  --sa-bar: #eef2ee;              /* top menu / status bar */
  --sa-bar-alt: #eef3ef;
  --sa-work-bg: #e9efe9;          /* canvas base (also gradient on .sa-work) */
  --sa-card-bg: #ffffff;
  --sa-table-head: #d3e2d8;       /* visible, professional table header (crisper) */
  --sa-card-shadow: 0 1px 2px rgba(20,40,30,.10);   /* crisp, low-blur */

  /* Medium-green sidebar */
  --sa-nav-bg: #3c6e4f;
  --sa-nav-text: #eaf2ec;
  --sa-nav-text-muted: rgba(236,244,238,.84);
  --sa-nav-hover-bg: rgba(255,255,255,.12);
  --sa-nav-active-bg: rgba(255,255,255,.18);
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  /* Always reserve the scrollbar gutter so the shell never shifts horizontally
     when switching between a short page (no scrollbar) and a tall page (with
     scrollbar) — e.g. standalone Bank/Reports shells vs taller base pages. */
  scrollbar-gutter: stable;
}

body{
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 13px;
  color: var(--sa-text);
  background: #ffffff;
  /* Crisper, stronger text rendering — aligns the whole workstation with the
     Chart of Accounts clarity. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a{ color: var(--sa-accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Report/workstation pages load Bootstrap (in extra_head, after this file),
   whose Reboot recolors <a> to blue. Keep links in the workstation palette so
   no ordinary report text appears blue:
     * general content links use the brand accent (green), never Bootstrap blue;
     * in-table value links (e.g. account names) read DARK like ordinary cell
       text, turning accent only on hover.
   Buttons (.sa-tool-btn) and the report-home list links keep their own colors. */
.sa-work a:not(.sa-tool-btn):not(.sa-report-link){ color: var(--sa-accent); }
/* In-table value links (e.g. Trial Balance account code/name) read BLACK like
   ordinary cell text — matched at the same specificity as the accent rule
   above (two compound parts) and placed after it so dark wins. */
.sa-work .table a:not(.sa-tool-btn):not(.sa-report-link){ color: var(--sa-text); text-decoration: none; }
.sa-work .table a:not(.sa-tool-btn):not(.sa-report-link):hover,
.sa-work .table a:not(.sa-tool-btn):not(.sa-report-link):focus{ color: var(--sa-accent); text-decoration: underline; }

/* "Go to" navigation dropdown (.gl-goto, e.g. General Ledger journals).
   Menu items must read as DARK workstation text (not green) and right-align.
   Specificity here (.sa-work .gl-goto .dropdown-menu .dropdown-item = 0,4,0)
   outranks the general accent link rule above (0,3,1) so item text stays dark
   at rest; hover keeps a subtle background but dark, readable text. This only
   affects the Go-to menu — not green action buttons, sidebar/module links, or
   status colors. */
.sa-work .gl-goto .dropdown-menu .dropdown-item{
  color: var(--sa-text);
  text-align: right;
  text-decoration: none;
}
.sa-work .gl-goto .dropdown-menu .dropdown-item:hover,
.sa-work .gl-goto .dropdown-menu .dropdown-item:focus,
.sa-work .gl-goto .dropdown-menu .dropdown-item:active{
  background: #e6efe9;
  color: var(--sa-text);
}

/* ---- Top Menu row ---- */
.sa-topmenu{
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: var(--sa-bar);
  border-bottom: 1px solid var(--sa-border);
  /* Pin chrome font-size so pages that also load Bootstrap (which sets
     body{font-size:1rem; line-height:1.5}) keep the same compact top menu as the
     standalone Bank/Reports pages. line-height is pinned too so the bar height
     (and therefore the whole shell's vertical position) is identical whether or
     not the page loaded Bootstrap. */
  font-size: 13px;
  line-height: 1.4;
}
.sa-topmenu .sa-brand{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--sa-accent);
  margin-right: 14px;
  white-space: nowrap;
  text-decoration: none;   /* brand/logo, not an underlined link */
}
.sa-topmenu .sa-brand-mark{
  height: 18px;
  width: auto;
  display: block;
}
.sa-topmenu .sa-brand-name{
  font-weight: 600;
  color: #234f36;
  letter-spacing: .01em;
}
a.sa-brand:hover,
a.sa-brand:focus{ text-decoration: none; color: var(--sa-accent); }
.sa-topmenu .sa-menu-item{
  padding: 4px 10px;
  color: var(--sa-text);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: default;
  user-select: none;
  /* Normalize <button> triggers to look like the plain menu labels. */
  background: transparent;
  font: inherit;
  line-height: 1.2;
}
.sa-topmenu .sa-menu-item:hover{
  background: #ffffff;
  border-color: var(--sa-border-soft);
  text-decoration: none;
}

/* ---- Phase 8 — top menu dropdowns (CSS-only, light, professional) ---- */
.sa-topmenu .sa-menu{
  position: relative;
}
.sa-menu-dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin-top: 1px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--sa-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(15,30,22,.16);
  display: none;
  z-index: 3000;
}
/* Open on hover or keyboard focus within the menu group. */
.sa-menu:hover > .sa-menu-dropdown,
.sa-menu:focus-within > .sa-menu-dropdown{
  display: block;
}
.sa-menu-link{
  display: block;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--sa-text);
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
}
.sa-menu-link:hover,
.sa-menu-link:focus{
  background: #f0f4f1;
  color: var(--sa-accent);
  text-decoration: none;
  outline: none;
}
/* Disabled menu item — visibly inactive, never navigates. */
.sa-menu-link.sa-menu-disabled{
  color: #9aa3ad;
  cursor: not-allowed;
  pointer-events: none;
}
.sa-menu-sep{
  height: 1px;
  background: var(--sa-border-soft);
  margin: 4px 2px;
}

/* ---- Side-opening submenus (e.g. Reports > Accounting / Custom) ---- */
.sa-menu-dropdown .sa-submenu{ position: relative; }
.sa-submenu-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: default;
}
.sa-submenu-caret{ color: var(--sa-text-soft); font-size: 14px; line-height: 1; }
.sa-submenu-panel{
  position: absolute;
  top: -5px;
  left: 100%;
  min-width: 210px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--sa-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(15,30,22,.16);
  display: none;
  z-index: 3100;
}
.sa-submenu:hover > .sa-submenu-panel,
.sa-submenu:focus-within > .sa-submenu-panel{ display: block; }
.sa-submenu:hover > .sa-submenu-toggle,
.sa-submenu-toggle:focus{
  background: #f0f4f1;
  color: var(--sa-accent);
  outline: none;
}

/* Logout button in the top menu row (functional — /logout).
   margin-left:auto pushes it to the far right edge of the header. */
.sa-topmenu .sa-logout{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-accent);
  background: #ffffff;
  border: 1px solid var(--sa-border);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.sa-topmenu .sa-logout svg{ width: 15px; height: 15px; }
.sa-topmenu .sa-logout:hover,
.sa-topmenu .sa-logout:focus{
  background: #e6efe9;
  border-color: var(--sa-accent);
  color: #1f5434;
  text-decoration: none;
}

/* ---- Toolbar row ---- */
.sa-toolbar{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--sa-bar-alt);
  border-bottom: 1px solid var(--sa-border);
}
/* Action buttons — filled in the left-modules green (logo color). */
.sa-tool-btn{
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 400;   /* Global action-button font-weight normalization — all action buttons use normal weight. */
  color: #ffffff;
  background: var(--ra-green-deep);
  border: 1px solid var(--ra-green-deep);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;   /* never underline (incl. <a> buttons under Bootstrap reboot) */
}
.sa-tool-btn:hover,
.sa-tool-btn:focus{
  background: #335d45;          /* slightly deeper module green on hover */
  border-color: #335d45;
  color: #ffffff;
  text-decoration: none;
}
/* Neutral (secondary) workstation button — e.g. Clear / Cancel. */
.sa-tool-btn.sa-tool-btn-neutral{
  color: var(--sa-text);
  background: #ffffff;
  border-color: var(--sa-border);
}
.sa-tool-btn.sa-tool-btn-neutral:hover,
.sa-tool-btn.sa-tool-btn-neutral:focus{
  background: #e6efe9;
  border-color: var(--sa-accent);
  color: var(--sa-accent);
}
/* Caution / destructive action — soft red TEXT on a light button (not a
   red-filled pill). For Delete / Dispose / Reverse / Void-type actions. */
.sa-tool-btn.sa-tool-btn-danger{
  background: #ffffff;
  color: #b3564a;
  border-color: #d8b4ad;
}
.sa-tool-btn.sa-tool-btn-danger:hover,
.sa-tool-btn.sa-tool-btn-danger:focus{
  background: #fbeeec;
  border-color: #b3564a;
  color: #9d4a3f;
}
/* Disabled / not-yet-wired controls — visibly inert, never pretend to act. */
.sa-tool-btn.sa-disabled,
.sa-tool-btn:disabled,
.sa-btn.sa-disabled,
.sa-btn:disabled{
  color: #9aa3ad;
  background: #f5f6f7;
  border-color: var(--sa-border-soft);
  cursor: not-allowed;
  pointer-events: none;
}
.sa-tool-sep{
  width: 1px;
  align-self: stretch;
  background: var(--sa-border-soft);
  margin: 2px 4px;
}
.sa-tool-search{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sa-tool-search input{
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--sa-border);
  border-radius: 3px;
  color: var(--sa-text);
  min-width: 180px;
}
/* Inactive search field reads as visibly inactive (no fake affordance). */
.sa-tool-search input:disabled{
  background: #f5f6f7;
  color: #9aa3ad;
  cursor: not-allowed;
}

/* ---- Body: left nav + working area ---- */
.sa-body{
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* ---- Deep-green workstation sidebar (logo color) ---- */
.sa-nav{
  width: 196px;
  flex: 0 0 196px;
  background: var(--sa-nav-bg);
  border-right: 1px solid var(--ra-green-deeper);
  padding: 8px 0;
  overflow-y: auto;
  /* Full-height distribution: a flex column whose module links share the
     available height evenly (space-between feel) so the list spreads down the
     whole sidebar instead of bunching at the top. Title pinned at the top. */
  display: flex;
  flex-direction: column;
  /* Pin line-height so the nav title / items don't inherit Bootstrap's body
     line-height (1.5) on base pages vs ~1.2 on standalone pages. */
  line-height: 1.4;
}
.sa-nav-title{
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sa-nav-text-muted);
  padding: 6px 16px;
}
.sa-nav a{
  display: flex;
  align-items: center;
  /* Each module link grows equally to fill the sidebar height, spreading the
     list evenly top-to-bottom. min-height keeps the original compact size when
     the viewport is short (then overflow-y:auto scrolls). */
  flex: 1 1 auto;
  min-height: 33px;
  padding: 8px 16px;
  color: var(--sa-nav-text);
  border-left: 3px solid transparent;
  /* Pin size + kill underline so the sidebar stays identical across pages.
     line-height, weight and white-space are LOCKED here so item height never
     depends on whether the page loaded Bootstrap (whose reboot sets a different
     body line-height) and a long/bold label can never wrap to a 2nd line — the
     sidebar therefore does not shift when changing pages. */
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.sa-nav a:hover,
.sa-nav a:focus{
  background: var(--sa-nav-hover-bg);
  border-left-color: var(--ra-gold);
  color: #ffffff;
  text-decoration: none;
}
.sa-nav a.active{
  background: var(--sa-nav-active-bg);
  /* Layout-neutral gold marker: the left border stays 3px (same as the
     transparent default) so text x-position is unchanged, and an inset
     box-shadow thickens the visual bar. No padding/height/width change vs
     inactive items — the active state never moves or resizes the row. */
  border-left: 3px solid var(--ra-gold);
  box-shadow: inset 2px 0 0 0 var(--ra-gold);
  color: #ffffff;
  font-weight: 600;
}

.sa-work{
  flex: 1 1 auto;
  /* Soft professional canvas (subtle green-tinted gradient, not flat pale) —
     white panels lift off it via their borders + shadow. */
  background: linear-gradient(165deg, #f1f5f1 0%, #e6ece7 100%);
  background-color: var(--sa-work-bg);   /* fallback */
  padding: 16px 20px;
  overflow-y: auto;
  /* Reserve the work-area scrollbar gutter on every page so the content width
     stays constant whether or not the page overflows — prevents the main
     content from shifting width between modules. */
  scrollbar-gutter: stable;
  /* Unified content size/colour so Bank / Customers / Finance / Reports read
     with the same Chart-of-Accounts clarity (tables stay compact at 13px). */
  font-size: 14px;
  color: var(--sa-text);
}

/* ---- Module header ---- */
.sa-module-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--sa-accent);
  padding-bottom: 8px;
  margin-bottom: 14px;
  /* Pin line-height so the module-header (and thus the content top position) is
     the same height with or without Bootstrap. */
  line-height: 1.4;
}
.sa-module-header h1{
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--sa-text);
}
.sa-module-header .sa-sub{
  font-size: 12px;
  color: var(--sa-text-soft);
}
/* Right-side header action area: description + Back / Go-to live here so
   Back/Go buttons sit upper-right (global rule), never on the left. */
.sa-module-header .sa-header-right{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sa-module-header .sa-header-right .sa-sub{ text-align: right; }

/* ---- Sections / tables ---- */
.sa-section{ margin-bottom: 20px; }
.sa-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sa-section-head h2{
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: var(--ra-green-deep);   /* branded section title */
}
.sa-section-head .sa-link{ font-size: 12px; }

/* Phase 5 — compact "Continue Working" strip (not a dashboard widget). */
.sa-continue-strip{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  margin-bottom: 14px;
  font-size: 12px;
}
.sa-continue-item{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--sa-border-soft);
  border-radius: 6px;
  background: #fbfcfb;
}
.sa-continue-label{ color: var(--sa-text-soft); }
.sa-continue-val{ font-weight: 600; color: var(--sa-text); }

/* Row of small action buttons/links inside a section head. */
.sa-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

table.sa-table{
  width: 100%;
  border-collapse: collapse;
  /* Phase 9H-1 — harmonized table readability (was 12px) so Bank / Finance /
     Customers / Suppliers match the Chart of Accounts clarity. Density stays
     compact via the 6px/10px cell padding below. */
  font-size: 13px;
  color: var(--sa-text);
  line-height: 1.4;          /* readable rows, matching Chart of Accounts */
  background: var(--sa-card-bg);   /* white sheet on the toned canvas */
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  box-shadow: var(--sa-card-shadow);
}
table.sa-table th,
table.sa-table td{
  text-align: left;
  padding: 6px 10px;
  border: 1px solid var(--sa-border-soft);
}
table.sa-table tbody td{
  color: var(--sa-text);     /* consistent near-black, readable body text */
}
/* Key first column reads semi-bold, like the Chart of Accounts code column. */
table.sa-table tbody td:first-child{ font-weight: 500; }
table.sa-table thead th{
  background: var(--sa-table-head);
  font-weight: 600;
  font-size: 13px;          /* consistent header size/weight across modules */
  color: var(--ra-green-deep);   /* branded deep-green header text */
  border-bottom: 2px solid var(--sa-accent);
}
/* Subtle branded zebra striping for lively, readable rows. */
table.sa-table tbody tr:nth-child(even){ background: #f4f9f5; }
table.sa-table tbody tr:hover{ background: #e7f1ea; }
table.sa-table td.sa-num{ text-align: right; }
.sa-empty{
  padding: 10px;
  color: var(--sa-text-soft);
  font-style: italic;
  border: 1px solid var(--sa-border-soft);
  border-top: none;
}

/* Compact, neutral status pill (no neon). */
.sa-pill{
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  border-radius: 10px;
  border: 1px solid var(--sa-border);
  color: var(--sa-text-soft);
  background: #fbfcfb;
}
.sa-pill-ok{
  color: #2f7d4f;
  border-color: #bcd9c4;
  background: #f0f7f2;
}
.sa-pill-open{
  color: #8a6d1f;
  border-color: #e3d6a8;
  background: #faf6e8;
}

/* Small inline action link inside a table row (real action -> stays green). */
.sa-row-action{
  font-size: 12px;
  color: var(--sa-accent);
}
/* Name/record links inside table body read dark like Chart of Accounts
   (green only on hover) so ordinary name text is consistent across modules.
   Real action links (.sa-row-action) keep their green. */
table.sa-table tbody td a:not(.sa-row-action){
  color: var(--sa-text);
  font-weight: 500;
  text-decoration: none;
}
table.sa-table tbody td a:not(.sa-row-action):hover,
table.sa-table tbody td a:not(.sa-row-action):focus{
  color: var(--sa-accent);
  text-decoration: underline;
}

/* ---- Phase 7 — Reports landing (three professional columns) ---- */
.sa-reports-cols{
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1199.98px){
  .sa-reports-cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px){
  .sa-reports-cols{ grid-template-columns: 1fr; }
}

.sa-report-panel{
  border: 1px solid var(--sa-border-soft);
  border-radius: 4px;
  padding: 12px 14px;
  background: #ffffff;
}
.sa-report-group-title{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sa-text-soft);
  margin: 0 0 8px 0;
}
.sa-report-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.sa-report-list li{ margin: 0; }
.sa-report-link{
  display: block;
  padding: 7px 8px;
  font-size: 13px;
  color: var(--sa-text);
  border-bottom: 1px solid var(--sa-border-soft);
  text-decoration: none;
}
.sa-report-list li:last-child .sa-report-link{ border-bottom: none; }
.sa-report-link:hover{
  background: #f5f7f6;
  color: var(--sa-accent);
  text-decoration: none;
}
/* Disabled report row — visibly inactive, no navigation. */
.sa-report-link.sa-report-disabled{
  color: #9aa3ad;
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
}

.sa-report-block{ font-size: 13px; }
.sa-report-note{
  margin: 0 0 8px 0;
  color: var(--sa-text-soft);
  font-size: 12px;
}
/* Related sub-action inside a report panel (e.g. Export Reports under Management). */
.sa-report-subgroup{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sa-border-soft);
}
.sa-report-subtitle{
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
  margin-bottom: 4px;
}
.sa-report-fields{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.sa-field-chip{
  display: inline-block;
  padding: 2px 8px;
  font-size: 11.5px;
  color: var(--sa-text);
  border: 1px solid var(--sa-border-soft);
  border-radius: 10px;
  background: #fbfcfb;
}
.sa-report-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sa-report-preview{
  min-height: 160px;
  border: 1px dashed var(--sa-border);
  border-radius: 4px;
  padding: 16px;
  color: var(--sa-text-soft);
  background: #fcfdfc;
}
.sa-report-preview p{ margin: 0 0 6px 0; }

/* ===== Reusable panel / card standard (one look across all pages) =====
   White card with a slim branded green top accent (logo color) + soft shadow. */
.sa-card,
.sa-panel{
  border: 1px solid var(--sa-border);
  border-top: 3px solid var(--sa-accent);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--sa-card-bg);
  box-shadow: var(--sa-card-shadow);
}
.sa-panel p{ margin: 0 0 8px 0; color: var(--sa-text-soft); }
.sa-panel-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Secondary panel (e.g. compact create form) — same card standard. */
.sa-secondary{
  border: 1px solid var(--sa-border);
  border-top: 3px solid var(--sa-accent);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--sa-card-bg);
  box-shadow: var(--sa-card-shadow);
}
.sa-secondary h2{
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: var(--ra-green-deep);   /* branded section title */
}
.sa-form-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.sa-field{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sa-field label{
  font-size: 12px;
  font-weight: 500;
  color: var(--sa-text);   /* dark, readable — same token as Chart of Accounts */
}
.sa-field input{
  padding: 5px 8px;
  font-size: 13px;   /* Phase 9H-1 — match table/body readability (was 12px) */
  border: 1px solid var(--sa-border);
  border-radius: 3px;
  color: var(--sa-text);
  background: #ffffff;
  min-width: 130px;
}
.sa-field input:focus{
  outline: none;
  border-color: var(--sa-accent);
}

/* ===== Global form standard for Bootstrap-based workstation pages =====
   (Chart of Accounts / Sales / profiles load Bootstrap; these rules give
   their .form-control/.form-select/.form-label/textarea the same dark,
   readable, consistent look as the .sa-field standard — no per-page CSS.) */
.sa-work .form-label{
  font-size: 12px;
  font-weight: 500;
  color: var(--sa-text);
  margin-bottom: .35rem;
}
.sa-work .form-control,
.sa-work .form-select,
.sa-work textarea.form-control{
  background: #ffffff;
  color: var(--sa-text);
  border: 1px solid var(--sa-border);
  border-radius: 5px;
  min-height: 38px;
  font-size: 13px;
  box-shadow: none;
}
/* Textareas keep a fixed size (not user-resizable) for a consistent layout. */
.sa-work textarea,
.sa-work textarea.form-control{ resize: none; }
.sa-work .form-control::placeholder{ color: #9aa6ad; }
.sa-work .form-control:focus,
.sa-work .form-select:focus{
  background: #ffffff;
  color: var(--sa-text);
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 .15rem rgba(47,125,79,.13);
}
.sa-work .form-control:disabled,
.sa-work .form-select:disabled{
  background: #f3f5f4;
  color: var(--sa-text-soft);
}
/* readonly = display/view value — pure white, dark/readable. */
.sa-work .form-control[readonly]{
  background: #ffffff;
  color: var(--sa-text);
}
/* Global rule: all editable inputs/selects/textareas have a clean white
   background (no pale green/gray). Disabled keeps the muted grey above. */
.sa-work input:not(:disabled),
.sa-work select:not(:disabled),
.sa-work textarea:not(:disabled){ background-color: #ffffff; }

/* ============================================================================
   GLOBAL SELECT / DROPDOWN HARD STANDARD — Invoice/Sales direction selector.
   ----------------------------------------------------------------------------
   Applies to EVERY real form <select> on EVERY page (with or without Bootstrap's
   .form-select), NOT only inside .sa-work, so standalone shells are covered too.
   `appearance:none` + a custom green-grey caret removes native browser chrome —
   the actual source of the leftover blue focus ring and mismatched native arrows
   that earlier .form-select-only rules could not reach. !important wins over the
   per-page colour overrides (which are colour-only). Multiple/size list-boxes and
   the top menu's custom sa-dd (button) controls are NOT <select> and are excluded.
   NOTE: the OPEN option-list highlight is painted by the OS for native selects and
   is not reliably CSS-controllable (documented browser limit). Colours / border /
   focus / caret only — option values, names, and form actions are unchanged.
   ========================================================================== */
select:not([multiple]):not([size]),
select.form-select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  color: var(--sa-text, #1f2937) !important;
  border: 1px solid var(--sa-border, #c9d6c9) !important;
  border-radius: 5px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  padding: .35rem 2rem .35rem .6rem !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6b5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  background-size: 14px 10px !important;
}
select:not([multiple]):not([size]):focus,
select.form-select:focus{
  background-color: #ffffff !important;
  color: var(--sa-text, #1f2937) !important;
  border-color: var(--sa-accent, #2a7048) !important;
  box-shadow: 0 0 0 .15rem rgba(42,112,72,.13) !important;  /* green focus ring */
  outline: none !important;                                  /* kill native / Bootstrap blue */
}
select:disabled,
select.form-select:disabled{
  background-color: #f3f5f4 !important;
  color: var(--sa-text-soft, #5c6b5f) !important;
}
/* Compact filter selects stay compact, but share the same border / focus / caret. */
select.form-select-sm{
  min-height: 30px !important;
  font-size: 12px !important;
  padding-top: .15rem !important;
  padding-bottom: .15rem !important;
}
/* Selected option highlight — green where the browser honors it (native open
   lists on some OSes ignore this; that is a browser limitation, not a bug). */
select option:checked,
select.form-select option:checked{
  background-color: #e7f3ec !important;
  color: var(--sa-text, #1f2937) !important;
}

/* PHASE 2 — a <select> placed inside a COMPACT .sa-field row (the Customers /
   Suppliers "New" forms) must match the sibling .sa-field <input> height and
   proportions, so the Default Currency dropdown is no longer visually larger than
   its neighbours. It keeps the ONE shared caret from the global select standard
   above (single arrow, appearance:none) — only the box metrics are compacted to
   the .sa-field scale (padding/radius/height), with right padding reserved so the
   caret never clips the value. Scoped to .sa-field only; other pages unchanged. */
.sa-field select,
.sa-field select.form-select{
  min-height: 0 !important;
  padding: 5px 26px 5px 8px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  background-position: right .5rem center !important;
  min-width: 130px;
}

/* ============================================================================
   QUICK UI FIX — one dropdown caret for the whole app.
   ----------------------------------------------------------------------------
   The accepted reference is the small grey chevron used by the native
   <select class="form-select"> controls on Payments and Accruals & Prepayments
   (painted by the "GLOBAL SELECT / DROPDOWN HARD STANDARD" above: SVG chevron,
   stroke #5c6b5f, 14x10). Several pages instead use CUSTOM Bootstrap dropdown
   BUTTONS (not <select>) whose caret span holds a large black ▼ / &#9660; glyph.
   This rule hides that glyph and paints the IDENTICAL grey chevron, so every
   dropdown looks like the same component. UI-only: no markup, JS, field names,
   submitted values, validation or behaviour change; the button height / border /
   radius / focus already match the select standard (min-height:38px, same border,
   green focus); native <select> controls and non-dropdown inputs are untouched.
   ========================================================================== */
.invoice-dd-btn > span:last-child,
.sales-dd-btn > span:last-child,
.procurement-dd-btn > span:last-child,
.inventory-dd-btn > span:last-child,
.hr-dd-btn > span:last-child,
.assets-dd-btn > span:last-child,
.tax-dd-btn > span:last-child{
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  display: inline-block !important;
  width: 14px !important;
  height: 10px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6b5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 14px 10px !important;
}

/* ============================================================================
   RETRO CUSTOM SELECT (sa-csel) — green opened option list.
   ----------------------------------------------------------------------------
   sa-ui.js wraps each native <select> in .sa-csel and renders a button trigger
   + a custom panel so the OPENED list is Retro green (native open lists paint
   the selected/hover row OS-blue and are not CSS-themeable). The native <select>
   stays in the DOM, visually hidden, for value/name/required/submit/validation.
   ========================================================================== */
.sa-csel{ position: relative; display: inline-block; width: 100%; max-width: 100%; vertical-align: middle; }
/* Native select hidden but present (not display:none → constraint validation
   can still focus it; pointer-events off so the trigger receives clicks). */
.sa-csel > select.sa-csel-native{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Trigger — same closed look as the Invoice/Sales select. */
.sa-csel-trigger{
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; min-height: 38px;
  padding: .35rem .6rem;
  background: #ffffff; color: var(--sa-text, #1f2937);
  border: 1px solid var(--sa-border, #c9d6c9); border-radius: 6px;
  font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer;
}
.sa-csel-sm .sa-csel-trigger{ min-height: 30px; font-size: 12px; padding: .15rem .55rem; }
.sa-csel-trigger:focus,
.sa-csel-trigger:focus-visible,
.sa-csel.open .sa-csel-trigger{
  outline: none;
  border-color: var(--sa-accent, #2a7048);
  box-shadow: 0 0 0 .15rem rgba(42,112,72,.13);   /* green focus ring */
}
.sa-csel-trigger:disabled{ background: #f3f5f4; color: var(--sa-text-soft, #5c6b5f); cursor: not-allowed; }
.sa-csel-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-csel-label.sa-csel-placeholder{ color: #9aa6ad; }
.sa-csel-chevron{
  flex: 0 0 14px; width: 14px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6b5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px 10px;
  transition: transform .12s ease;
}
.sa-csel.open .sa-csel-chevron{ transform: rotate(180deg); }
/* Opened panel — EXACT Sales customer-dropdown standard (.sales-dd-menu): white,
   light border, 6px radius, soft shadow, NO inner padding, options edge-to-edge
   and clipped to the rounded corners. Above page chrome (top menu 3000/3100),
   below page modals (5000). */
.sa-csel-panel{
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 3500; display: none;
  background: #ffffff; border: 1px solid var(--sa-border, #c9d6c9); border-radius: 6px;
  box-shadow: 0 8px 22px rgba(15,30,22,.16);
  padding: 0; max-height: 240px; overflow: hidden; overflow-y: auto;
}
.sa-csel.open .sa-csel-panel{ display: block; }
.sa-csel-group{
  padding: .5rem .8rem .2rem; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--sa-text-soft, #5c6b5f);
}
/* Option rows — Sales spacing, dark text, transparent, full-bleed (no radius). */
.sa-csel-opt{
  padding: .5rem .8rem; font-size: 13px; color: var(--sa-text, #1f2937);
  background: transparent; border: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hover / keyboard row = soft pale-green, dark text (Sales :hover). */
.sa-csel-opt:hover,
.sa-csel-opt.active{ background: #e6efe9; color: var(--sa-text, #1f2937); }
/* SELECTED row = Sales .active-choice: subtle — transparent background, dark text,
   weight 500. NO pale-green bar, NO green text, NO white-on-green. */
.sa-csel-opt.selected{ background: transparent; color: var(--sa-text, #1f2937); font-weight: 500; }
.sa-csel-opt.selected:hover,
.sa-csel-opt.selected.active{ background: #e6efe9; color: var(--sa-text, #1f2937); }
.sa-csel-opt.disabled{ color: rgba(31,41,55,.4); cursor: not-allowed; background: transparent; }

/* ===== Global Bootstrap-table standard (matches .sa-table on CoA/Sales) ===== */
.sa-work .table{
  color: var(--sa-text);
  font-size: 13px;
  background: var(--sa-card-bg);
}
.sa-work .table thead th{
  background: var(--sa-table-head);
  color: var(--ra-green-deep);   /* branded deep-green header text */
  border-bottom: 2px solid var(--sa-accent);
  font-weight: 600;
}
.sa-work .table td,
.sa-work .table th{ border-color: var(--sa-border-soft); }
.sa-work .table tbody td:first-child{ font-weight: 500; }  /* CoA-style key column */
.sa-work .table-hover > tbody > tr:hover > *{ background-color: #eef4f0; }

/* Consistent muted/secondary text token across workstation pages. */
.sa-muted{ color: var(--sa-text-soft); }

/* Inline flash messages (standalone pages have no base.html toast JS). */
.sa-flash{
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--sa-border-soft);
}
.sa-flash-success{
  color: #2f7d4f;
  background: #f0f7f2;
  border-color: #bcd9c4;
}
.sa-flash-danger{
  color: #9a3434;
  background: #f9f0f0;
  border-color: #e0c2c2;
}

/* ---- Status bar ---- */
/* Status bar — same green as the left modules sidebar, light text. */
.sa-statusbar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 5px 10px;
  background: var(--sa-nav-bg);
  border-top: 1px solid var(--ra-green-divider);
  font-size: 11.5px;
  line-height: 1.4;   /* pin so status-bar height is Bootstrap-independent */
  color: var(--sa-nav-text-muted);
}
.sa-statusbar .sa-status-cell{
  padding: 0 12px;
  border-right: 1px solid rgba(255,255,255,.16);
  white-space: nowrap;
}
.sa-statusbar .sa-status-cell:last-child{ border-right: none; }
.sa-statusbar .sa-status-cell b{
  color: #ffffff;
  font-weight: 600;
}

/* ===================== GLOBAL TOAST NOTIFICATIONS ===================== */
.sa-toast-container {
  position: fixed;
  top: 58px;
  right: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}
.sa-toast {
  pointer-events: auto;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--sa-border, #c9d6c9);
  background: #ffffff;
  color: var(--sa-text, #1f2937);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(15, 30, 22, 0.16);
  opacity: 0;
  transform: translateY(-6px);
  animation: saToastIn 0.2s ease forwards;
}
.sa-toast-out {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sa-toast-success {
  background: var(--sa-accent, #2a7048);
  border-color: #1f5636;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(42, 112, 72, 0.32);
}
.sa-toast-danger {
  background: #c0392b;
  border-color: #99291d;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(192, 57, 43, 0.32);
}
.sa-toast-info {
  border-color: #cdd9d0;
  background: #eef3f0;
  color: var(--sa-text, #1f2937);
}
@keyframes saToastIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-toast { animation: none; opacity: 1; transform: none; }
  .sa-toast-out { transition: opacity 0.2s linear; }
}

/* ============================================================================
   GLOBAL DATE PICKER (flatpickr) — RETRO GREEN STANDARD
   ----------------------------------------------------------------------------
   ONE source of truth for every date picker in the app. It targets flatpickr's
   own base classes (no extra theme class or JS needed) and uses !important so
   it wins over flatpickr's default (blue) CSS regardless of load order. The
   calendar is appended to <body>, so this themes EVERY instance globally and
   removes flatpickr/Bootstrap blue everywhere. Colors only — date format,
   parsing, validation and behavior are unchanged.
   ========================================================================== */
.flatpickr-calendar {
  border: 2px solid #2f5a40 !important;          /* darker-green popup border */
  box-shadow: 0 14px 30px rgba(20,40,30,.18) !important;
  border-radius: 10px !important;
}
/* Connector arrow tip matches the green border / white body. */
.flatpickr-calendar.arrowTop:before    { border-bottom-color: #2f5a40 !important; }
.flatpickr-calendar.arrowTop:after     { border-bottom-color: #ffffff !important; }
.flatpickr-calendar.arrowBottom:before { border-top-color: #2f5a40 !important; }
.flatpickr-calendar.arrowBottom:after  { border-top-color: #ffffff !important; }

/* Header (month / year) + weekday row. */
.flatpickr-months,
.flatpickr-weekdays { background: #ffffff !important; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months,
span.flatpickr-weekday {
  color: #2a7048 !important;
  fill: #2a7048 !important;
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: #1f2937 !important; }

/* Prev / next arrows — green, darker-green on hover. */
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #2a7048 !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #1f5436 !important; }

/* Days. */
.flatpickr-day { color: #1f2937 !important; border-radius: 8px !important; }
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(42,112,72,.12) !important;
  border-color: rgba(42,112,72,.12) !important;
  color: #1f5436 !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled { color: rgba(31,41,55,.32) !important; }

/* Today — green ring. */
.flatpickr-day.today { border-color: #2a7048 !important; }
.flatpickr-day.today:hover { background: rgba(42,112,72,.12) !important; color: #1f5436 !important; }

/* Selected day / range ends — solid Retro green, white text. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #2a7048 !important;
  border-color: #2a7048 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
/* ---- Retro confirmation modal (.gl-confirm-*) ----
   THE CANONICAL DEFINITION, MOVED HERE FROM THE PAGES.

   Seven templates each carried a byte-identical private copy of this block
   (General Ledger journals and entry detail, Purchases, Planning, Users,
   Operations). Fixed Assets used the same class names and shipped no copy, so
   its credit-review dialog had no fixed positioning, no backdrop and no
   z-index: it rendered as ordinary content in the page flow. A component whose
   look is optional is a component that will eventually be used without it, so
   the look now lives with the shell.

   This is the SAME design, not a second one. The page-level copies load after
   this file and still win at equal specificity, so nothing they style changes.

   THE CONTRACT: the overlay is display:none and is opened by adding `.open`.
   Never drive it with element.style.display — an inline value outranks the
   class, and clearing it only falls back to the `none` below. */
.gl-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(15,30,22,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
  /* Above the top menu, sidebar and status bar — the dialog owns the screen. */
  z-index: 5000; padding: 16px;
}
.gl-confirm-overlay.open { display: flex; }
.gl-confirm-modal {
  background: #ffffff; border: 1px solid var(--sa-border, #c9d6c9); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15,30,22,.22); max-width: 470px; width: 100%; padding: 20px;
  border-top: 3px solid var(--sa-accent, #2a7048);
}
.gl-confirm-title { font-size: 1.05rem; font-weight: 700; color: var(--sa-text, #1f2937); margin-bottom: .5rem; }
.gl-confirm-body { font-size: 13px; color: var(--sa-text-soft, #5c6b5f); line-height: 1.5; margin-bottom: 1rem; }
.gl-confirm-body strong { color: var(--sa-text, #1f2937); }
.gl-confirm-note { margin-top: .5rem; font-size: 12px; }
.gl-confirm-meta { margin-top: .7rem; border-top: 1px solid var(--sa-border, #c9d6c9); padding-top: .55rem; font-size: 12.5px; }
.gl-confirm-meta-row { display: flex; justify-content: space-between; gap: 1rem; padding: .12rem 0; }
.gl-confirm-meta-label { color: var(--sa-text-soft, #5c6b5f); }
.gl-confirm-meta-val { color: var(--sa-text, #1f2937); font-weight: 500; text-align: right; word-break: break-word; }
.gl-confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* In-range fill — soft green. */
.flatpickr-day.inRange {
  background: rgba(42,112,72,.16) !important;
  border-color: rgba(42,112,72,.16) !important;
  color: #1f5436 !important;
  box-shadow: -5px 0 0 rgba(42,112,72,.16), 5px 0 0 rgba(42,112,72,.16) !important;
}

/* Month / year number input + dropdown focus → green ring. */
.flatpickr-current-month input.cur-year:focus,
.flatpickr-monthDropdown-months:focus {
  outline: none !important;
  box-shadow: 0 0 0 .12rem rgba(42,112,72,.20) !important;
}
.numInputWrapper:hover { background: rgba(42,112,72,.08) !important; }
.numInputWrapper span:hover { background: rgba(42,112,72,.12) !important; }
.numInputWrapper span.arrowUp:after { border-bottom-color: #2a7048 !important; }
.numInputWrapper span.arrowDown:after { border-top-color: #2a7048 !important; }

/* Time picker (when enabled). */
.flatpickr-time input:hover, .flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus {
  background: rgba(42,112,72,.10) !important;
}

/* Date INPUT field focus — green border + green shadow (invoice standard). */
input.flatpickr-input:focus,
input.flatpickr-input.active,
.sales-date-field:focus {
  border-color: #2a7048 !important;
  box-shadow: 0 0 0 .15rem rgba(42,112,72,.13) !important;
  outline: none !important;
}


/* ---------------------------------------------------------------------------
   COMBINED-CURRENCY REPORT — FX RATE SELECTOR (shared, one rule for all reports)
   ---------------------------------------------------------------------------
   Used by every combined-currency report FX selector (Trial Balance, Profit &
   Loss, Balance Sheet, Management Summary). Each of those templates previously
   capped its own selector at 110px, which truncated the rate text in the closed
   and opened state ("0.8650000..."). The control now sizes to its content with a
   floor wide enough for a full 8-decimal rate plus its effective date, and never
   exceeds its container on narrow screens. Presentation only. */
.fx-rate-select {
  width: auto;
  min-width: 17rem;
  max-width: 100%;
}

/* The FX toolbar wraps instead of overflowing once the card gets narrow. */
.fx-rate-toolbar {
  flex-wrap: wrap !important;
  row-gap: .35rem;
}


/* OWNERSHIP CORRECTION — the title-adjacent "Inventory related" /
   "Manufacturing related" ownership notes (.sa-module-title / .sa-context-note)
   were removed: they made one editable workflow read as though it belonged to two
   modules. A page's module ownership is now shown only by its canonical sidebar
   module, and any cross-module dependency is stated plainly in the page's ordinary
   description text. No pill/badge/chip replacement was introduced. */