/* SAP 72 (Apache-2.0, sourced from @sap-theming/theming-base-content).
   font-display: swap → render immediately in the fallback, then swap to SAP-72
   the moment it loads. The two main weights (Regular/Bold) are <link rel=preload>
   in base.html so they are almost always ready before first paint (no visible
   reflow); swap guarantees the SAP typeface is actually used rather than being
   permanently dropped (which `optional` did on most cold loads). */
@font-face {
  font-family: '72';
  src: url("../fonts/72-Regular.7d580f662f7b.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-Bold.135f3d677ed6.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-Light.305db443df40.woff2") format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-Italic.46c893d81928.woff2") format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-BoldItalic.b898664493eb.woff2") format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Fiori Horizon design tokens (subset). */
:root {
  --sapBrandColor: #0070F2;
  --sapBrandColor_Hover: #0061D1;
  --sapBrandColor_Active: #0050B3;
  --sapBackgroundColor: #F5F6F7;
  --sapShellColor: #354A5F;
  --sapTextColor: #1D2D3E;
  --sapTextColor_Subtle: #556B82;
  --sapNeutralBorderColor: #D5DADD;
  --sapField_BorderColor: #89919A;
  --sapField_Background: #FFFFFF;
  --sapField_Focus_BorderColor: #0070F2;
  --sapNegativeColor: #BB0000;
  --sapPositiveColor: #256F3A;
  --sapTile_Background: #FFFFFF;
  --sapBaseFontFamily: '72', '72full', -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  /* SAP Fiori type scale (Horizon). One scale, used everywhere. */
  --sapFontSmallSize:   0.75rem;   /* 12px — labels, table headers, captions   */
  --sapFontSize:        0.875rem;  /* 14px — body, table cells, inputs (base)   */
  --sapFontLargeSize:   1rem;      /* 16px — emphasised body                     */
  --sapFontHeader6Size: 0.875rem;  /* 14px */
  --sapFontHeader5Size: 1rem;      /* 16px */
  --sapFontHeader4Size: 1.125rem;  /* 18px */
  --sapFontHeader3Size: 1.25rem;   /* 20px — section heading                     */
  --sapFontHeader2Size: 1.375rem;  /* 22px — sub page title                      */
  --sapFontHeader1Size: 1.5rem;    /* 24px — page title                          */
  --sapContent_LineHeight: 1.4;
  --sapElement_BorderCornerRadius: 0.5rem;
  --sapShadow_2: 0 0.125rem 0.5rem rgba(22, 29, 37, 0.08);
  --sapShadow_4: 0 0.5rem 1.25rem rgba(22, 29, 37, 0.12);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--sapBackgroundColor);
  color: var(--sapTextColor);
  font-family: var(--sapBaseFontFamily);
  font-size: var(--sapFontSize);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

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

.fiori-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.fiori-shellbar {
  height: 2.75rem;
  background: var(--sapShellColor);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fiori-shellbar__title { flex: 1; }

.fiori-content {
  flex: 1;
  padding: 1.5rem;
}

/* ---------- Login layout ---------- */

.login-stage {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(0,112,242,0.10), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(53,74,95,0.10), transparent 55%),
    var(--sapBackgroundColor);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-card {
  width: 100%;
  max-width: 26rem;
  background: var(--sapTile_Background);
  border-radius: 0.75rem;
  box-shadow: var(--sapShadow_4);
  padding: 2rem 2rem 1.75rem;
}

.login-card__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.login-card__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  background: var(--sapBrandColor);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.login-card__brand-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sapShellColor);
}

.login-card__title {
  margin: 0 0 0.25rem;
  font-size: var(--sapFontHeader1Size);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login-card__subtitle {
  margin: 0 0 1.5rem;
  color: var(--sapTextColor_Subtle);
  font-size: var(--sapFontSize);
}

/* ---------- Form controls ---------- */

.fiori-form { display: flex; flex-direction: column; gap: 1rem; }

.fiori-field { display: flex; flex-direction: column; gap: 0.375rem; }

.fiori-label {
  font-size: var(--sapFontSmallSize);
  font-weight: 400;
  color: var(--sapTextColor_Subtle);
  text-transform: none;
  letter-spacing: 0.02em;
}

.fiori-input {
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: var(--sapFontSize);
  color: var(--sapTextColor);
  background: var(--sapField_Background);
  border: 1px solid var(--sapField_BorderColor);
  border-radius: var(--sapElement_BorderCornerRadius);
  outline: none;
  transition: border-color 80ms ease-in, box-shadow 80ms ease-in;
}

select.fiori-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sapTextColor_Subtle) 50%),
                    linear-gradient(135deg, var(--sapTextColor_Subtle) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 50%, calc(100% - 0.65rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
}

.fiori-input:focus {
  border-color: var(--sapField_Focus_BorderColor);
  box-shadow: 0 0 0 1px var(--sapField_Focus_BorderColor);
}

.fiori-input::placeholder { color: #93A0AC; }

/* Two-column row for company + finyear on wider screens */
.fiori-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 30rem) {
  .fiori-row { grid-template-columns: 1fr; }
}

/* ---------- PO / SPR line-entry cards (add a line to the basket) ----------
   Each PR/SPR line renders as a self-contained card: a compact item header
   (code · description · PR qty · PR rate · supplier · del) above an auto-fitting
   grid of entry fields (qty, rate, disc%, del date, budget, the three GST
   dropdowns, additional description) and a right-aligned action. Replaces the
   old layout that crammed the whole form into a narrow trailing table cell. */
.po-line-card {
  border: 1px solid #E2E6EA;
  border-radius: var(--sapElement_BorderCornerRadius, 0.5rem);
  background: var(--sapTile_Background, #FFFFFF);
  overflow: hidden;
}
.po-line-card + .po-line-card { margin-top: 0.75rem; }

.po-line-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: #F4F6F8;
  border-bottom: 1px solid #E2E6EA;
}
.po-line-head__main { flex: 1 1 14rem; min-width: 0; }
.po-line-head__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; font-size: var(--sapFontSize); color: var(--sapTextColor);
}
.po-line-head__desc {
  font-size: var(--sapFontSmallSize); color: var(--sapTextColor_Subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem;
}
.po-line-stat { text-align: right; }
.po-line-stat--left { text-align: left; }
.po-line-stat__l {
  display: block; font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--sapTextColor_Subtle);
}
.po-line-stat__v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600; font-size: var(--sapFontSize); color: var(--sapTextColor);
}

.po-line-body { padding: 0.875rem 1rem; }
.po-line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem 0.875rem;
  align-items: end;
}
.po-line-grid .po-line-desc { grid-column: 1 / -1; }
.po-line-grid .fiori-field { gap: 0.25rem; }
.po-line-grid .fiori-input { height: 2.125rem; }
.po-line-grid .fiori-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em;
  font-weight: 600;
}

.po-line-foot { margin-top: 0.875rem; display: flex; justify-content: flex-end; }

html[data-theme="dark"] .po-line-card { border-color: var(--sapNeutralBorderColor); }
html[data-theme="dark"] .po-line-head {
  background: #1F262D; border-bottom-color: var(--sapNeutralBorderColor);
}

/* ---------- Buttons ---------- */

.fiori-button {
  height: 2.5rem;
  padding: 0 1rem;
  font-family: inherit;
  font-size: var(--sapFontSize);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--sapElement_BorderCornerRadius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 80ms ease-in, color 80ms ease-in;
}

.fiori-button--emphasized {
  background: var(--sapBrandColor);
  color: #fff;
}
.fiori-button--emphasized:hover { background: var(--sapBrandColor_Hover); }
.fiori-button--emphasized:active { background: var(--sapBrandColor_Active); }

.fiori-button--full { width: 100%; }

/* ---------- Messages ---------- */

.fiori-alert {
  padding: 0.625rem 0.875rem;
  border-radius: var(--sapElement_BorderCornerRadius);
  font-size: var(--sapFontSize);
  border: 1px solid transparent;
}
.fiori-alert--error {
  background: #FFE5E5;
  border-color: #FFB8B8;
  color: var(--sapNegativeColor);
}

.login-card__footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: var(--sapFontSmallSize);
  color: var(--sapTextColor_Subtle);
}

/* ---------- Shell sidenav initial state (no-flicker on refresh) ----------
   A pre-Alpine inline script sets html.sn-open or html.sn-closed from
   localStorage so the aside's initial width matches its persisted state.
   Alpine then drives `:class` for subsequent toggles. */
html.sn-init aside[data-sidenav]  { width: 0; }
html.sn-init aside[data-sidenav]  > * { visibility: hidden; }
html.sn-open   aside[data-sidenav] { width: 14rem; }
html.sn-open   main[data-shellmain],
html.sn-open   footer[data-shellfooter] { padding-left: 14rem; }
html.sn-closed aside[data-sidenav] { width: 0; }
html.sn-closed main[data-shellmain],
html.sn-closed footer[data-shellfooter] { padding-left: 0; }

/* ---------- Sidebar nav rows (SAP Fiori Horizon)  ---------------------- */
/* All transitions trigger ONLY on hover/focus/click — never on page load,
   because x-cloak hides un-opened submenus before Alpine evaluates x-show.
   Timing follows Fiori Horizon: 150ms ease-out for colour, 200ms for
   transform. Active page gets a 2-px brand-coloured strip on the left
   (mirrors SAP Fiori Side Navigation "selected" state). */
.sap-nav-row {
  position: relative;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.sap-nav-row:hover { background-color: rgb(248 250 252); /* slate-50 */ }
.sap-nav-row:active { background-color: rgb(241 245 249); /* slate-100 */ }
/* Parent module currently expanded — subtle brand-tinted background */
.sap-nav-row--mod.is-open { background-color: rgb(239 246 255 / 0.6); /* blue-50 */ }
.sap-nav-row--mod.is-open > span:first-child { color: var(--sapBrandColor); }
/* Active page indicator — 2px left strip in brand colour */
.sap-nav-row[aria-current="page"] {
  color: var(--sapBrandColor);
  font-weight: 600;
  background-color: rgb(239 246 255); /* blue-50 */
}
.sap-nav-row[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background-color: var(--sapBrandColor);
  border-radius: 0 2px 2px 0;
}

/* ---------- Side-nav: 3-tier typographic hierarchy --------------------- */
/* Each menu level reads as a distinct, logical rank so the tree is scannable:
     Tier 1  Module (Sales, Design, Material …) — BOLD + darkest "anchor" colour
     Tier 2  Sub-group (MASTER / TRANSACTION …) — BOLD + brand colour (a clearly
             different, logical hue that marks a divider, not a destination)
     Tier 3  Leaf / page (Enquiry, Quotation …) — PLAIN weight + muted, so it is
             unmistakably subordinate. The active page overrides to brand+bold. */
.sap-nav-row--mod            { font-weight: 600; }
.sap-nav-row--mod .nav-label { color: #1A2733; }              /* SAP near-black */
.sap-nav-row--sub            { font-weight: 700; color: var(--sapBrandColor); }
.sap-nav-row--sub:hover      { color: var(--sapBrandColor_Hover); }
.sap-nav-row--leaf           { font-weight: 400; color: #5B6B7B; }

/* Never let a label wrap onto a second line: single line + ellipsis, with the
   full name preserved in the title= tooltip (set in core/_navigation.html). */
.sap-nav-row .nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Page entrance — single, fast, non-staggered ---------------- */
/* A single 280ms fade-in on the main content area on first paint, capped
   to one play per page load. No stagger, no per-tile cascade — that was
   the source of the user-reported "menu opening" cascade. HTMX swaps do
   NOT replay this because we apply it on <main>, not on swap targets. */
@keyframes sap-page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main[data-shellmain] > div { animation: sap-page-fade-in 280ms cubic-bezier(0.25, 0.8, 0.25, 1) both; }
/* Respect users who set prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  main[data-shellmain] > div { animation: none; }
  .sap-nav-row,
  .sap-list-row { transition: none; }
}

/* ---------- SAP-style list-row interaction --------------------------------
   Auto-applies to every <table> tbody row in the app — gives every list
   page the Fiori "Highlight on Hover" feedback. The body[class] qualifier
   raises specificity past tailwind's hover:* utilities so this wins. */
body main[data-shellmain] table tbody tr,
.sap-list-row,
.sap-table tr:not(.sap-table-header) {
  transition: background-color 120ms ease-out;
}
body main[data-shellmain] table tbody tr:hover,
.sap-list-row:hover,
.sap-table tr:not(.sap-table-header):hover {
  background-color: rgb(239 246 255); /* blue-50 — SAP "highlight on hover" */
}
.sap-list-row[aria-selected="true"],
.sap-table tr[aria-selected="true"] {
  background-color: rgb(219 234 254); /* blue-100 */
}

/* ---------- Top page-progress loader (Fiori "Busy Indicator" for navigation)
   Hidden by default. JS adds .is-loading when a link/form/HTMX request fires.
   The bar fills 0%→90% over 600ms — fakes progress so the user sees instant
   feedback. The new page's HTML doesn't have .is-loading, so the bar resets.
   z-index above shellbar (30) and palette overlay (50). */
.sap-page-loader {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--sapBrandColor), #5899DA);
  z-index: 60;
  pointer-events: none;
  transition: width 600ms cubic-bezier(0.1, 0.7, 0.1, 1),
              opacity 200ms ease-out 600ms;
  opacity: 0;
}
.sap-page-loader.is-loading {
  width: 90%;
  opacity: 1;
  transition: width 600ms cubic-bezier(0.1, 0.7, 0.1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sap-page-loader { transition: none; }
}

/* ---------- Action button / clickable card press feedback ---------------
   Apply to anything that wants a "press" affordance (slight scale-down +
   quick opacity dip). Auto-applies to <a> and <button> within tile grids
   and to anything tagged .sap-press. */
.sap-press,
.fiori-tile,
.fiori-numeric-tile {
  cursor: pointer;
}
.sap-press:active,
.fiori-tile:active,
.fiori-numeric-tile:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 60ms;
}

/* fiori-enter kept as a no-op so existing template usages don't error. */
.fiori-enter { }

/* ---------- Tile press feedback (Fiori "tile" affordance) -------------- */
.fiori-tile { transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.fiori-tile:hover  { transform: translateY(-2px); }
.fiori-tile:active { transform: translateY(0); transition-duration: 60ms; }
.fiori-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sapBrandColor), var(--sapShadow_4);
}

/* ---------- Shellbar button feedback (Fiori) ---------------------------
   Subtle press-down + ripple-style background, used on the hamburger,
   search trigger, density/theme toggles, user menu and notification bell.
   Tagged via [data-shellbtn] so we don't accidentally apply to anything. */
header [data-shellbtn],
header button:not(.no-shellbtn) {
  transition: background-color 120ms ease-out, transform 80ms ease-out;
}
header button:not(.no-shellbtn):active { transform: scale(0.96); }

/* ---------- Skeleton loader (Fiori "Busy Indicator" alternative) -------
   Drop-in <div class="sap-skel sap-skel--text"></div> placeholder for
   slow-loading rows or KPI tiles. Shimmer is reduced for prefers-reduced-
   motion. */
@keyframes sap-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.sap-skel {
  background: linear-gradient(90deg,
    rgb(241 245 249) 0%,
    rgb(226 232 240) 50%,
    rgb(241 245 249) 100%);
  background-size: 200% 100%;
  animation: sap-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.sap-skel--text  { height: 0.75rem; width: 100%; }
.sap-skel--title { height: 1.25rem; width: 60%; }
.sap-skel--tile  { height: 5rem; }
@media (prefers-reduced-motion: reduce) {
  .sap-skel { animation: none; background: rgb(241 245 249); }
}

/* Disabled "pending migration" affordance — must beat .fiori-button--emphasized */
.fiori-button:disabled,
.fiori-button[disabled],
.fiori-button--emphasized:disabled,
.fiori-button--emphasized[disabled] {
  background: #C8CDD3 !important;
  color: #fff !important;
  cursor: not-allowed;
  box-shadow: none;
}
.fiori-button:disabled:hover,
.fiori-button[disabled]:hover { background: #C8CDD3 !important; }

/* ---------- Fiori semantic tones (Horizon palette subset) -------------- */
:root {
  --sapInformative: #0070F2;
  --sapInformativeBg: #E5F0FF;
  --sapPositiveBg:   #E9F5EC;
  --sapCriticalBg:   #FFF4E5;
  --sapNegativeBg:   #FFECEC;
  --sapNeutralBg:    #EFF1F2;
}

/* ---------- KPI "Numeric tile" (Fiori dynamic tile aesthetic) ---------- */
.fiori-numeric-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sapNeutralBorderColor);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.fiori-numeric-tile:hover { transform: translateY(-2px); box-shadow: var(--sapShadow_4); }
.fiori-numeric-tile::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tile-accent, var(--sapBrandColor));
}
.fiori-numeric-tile__value { color: var(--tile-accent, var(--sapTextColor)); }
.fiori-numeric-tile--brand    { --tile-accent: var(--sapBrandColor);   }
.fiori-numeric-tile--positive { --tile-accent: var(--sapPositiveColor);}
.fiori-numeric-tile--warning  { --tile-accent: #B8590D;                }
.fiori-numeric-tile--critical { --tile-accent: var(--sapNegativeColor);}
.fiori-numeric-tile--neutral  { --tile-accent: #556B82;                }

/* ---------- Alert rows --------------------------------------------------*/
.fiori-alert-row {
  border-left: 4px solid transparent;
  background: var(--row-bg, var(--sapNeutralBg));
}
.fiori-alert-row__icon {
  width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--row-accent, var(--sapInformative));
  color: #fff; font-weight: 700; font-size: 0.75rem;
}
.fiori-alert-row--info     { --row-bg: var(--sapInformativeBg); --row-accent: var(--sapInformative); border-left-color: var(--sapInformative); }
.fiori-alert-row--positive { --row-bg: var(--sapPositiveBg);    --row-accent: var(--sapPositiveColor); border-left-color: var(--sapPositiveColor); }
.fiori-alert-row--warning  { --row-bg: var(--sapCriticalBg);    --row-accent: #B8590D; border-left-color: #B8590D; }
.fiori-alert-row--critical { --row-bg: var(--sapNegativeBg);    --row-accent: var(--sapNegativeColor); border-left-color: var(--sapNegativeColor); }

/* ---------- Density: cozy (default) / compact -------------------------- */
html[data-density="compact"] .fiori-numeric-tile { padding: 0.625rem; }
html[data-density="compact"] .fiori-numeric-tile__value { font-size: 1.5rem; }
html[data-density="compact"] .fiori-tile { padding: 0.75rem; min-height: 5.25rem; }
html[data-density="compact"] .fiori-alert-row { padding: 0.5rem 0.75rem; }
html[data-density="compact"] section.rounded-xl { padding: 0.75rem 1rem; }

/* ---------- Theme: dark mode (Fiori Horizon Evening Horizon subset) ---- */
html[data-theme="dark"] {
  --sapBackgroundColor:  #12171C;
  --sapShellColor:       #0B0F13;
  --sapTextColor:        #EAEEF1;
  --sapTextColor_Subtle: #A6B2BF;
  --sapNeutralBorderColor: #2A323A;
  --sapTile_Background:  #1B2128;
  --sapField_Background: #1B2128;
  --sapField_BorderColor: #3A4651;
  --sapInformativeBg: rgba(0,112,242,0.12);
  --sapPositiveBg:    rgba(37,111,58,0.18);
  --sapCriticalBg:    rgba(184,89,13,0.18);
  --sapNegativeBg:    rgba(187,0,0,0.18);
  --sapNeutralBg:     #1F262D;
}
html[data-theme="dark"] body { background: var(--sapBackgroundColor); color: var(--sapTextColor); }
html[data-theme="dark"] .bg-white { background-color: var(--sapTile_Background) !important; color: var(--sapTextColor); }
html[data-theme="dark"] .text-sap-text { color: var(--sapTextColor) !important; }
html[data-theme="dark"] .text-sap-subtle { color: var(--sapTextColor_Subtle) !important; }
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200 { border-color: var(--sapNeutralBorderColor) !important; }
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100 { background-color: #1F262D !important; }
html[data-theme="dark"] .bg-sap-bg { background-color: var(--sapBackgroundColor) !important; }
html[data-theme="dark"] .ring-slate-200 { --tw-ring-color: var(--sapNeutralBorderColor) !important; }
html[data-theme="dark"] .divide-slate-100 > * + * { border-color: var(--sapNeutralBorderColor) !important; }
html[data-theme="dark"] .fiori-numeric-tile { border-color: var(--sapNeutralBorderColor); }
html[data-theme="dark"] .fiori-input {
  background: var(--sapField_Background);
  border-color: var(--sapField_BorderColor);
  color: var(--sapTextColor);
}

/* ---------- Bars (volume chart) ----------------------------------------*/
.fiori-bar { transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.fiori-bar--brand    { background: var(--sapBrandColor); }
.fiori-bar--positive { background: var(--sapPositiveColor); }
.fiori-bar--warning  { background: #B8590D; }
.fiori-bar--critical { background: var(--sapNegativeColor); }
.fiori-bar--neutral  { background: #8497AB; }

/* =======================================================================
   SAP Fiori typography baseline — ONE proportionate scale for every page.
   ----------------------------------------------------------------------
   Each module/page was built separately and used ad-hoc Tailwind text-*
   sizes, so headings/labels/tables drifted between pages ("irregularised").
   This layer pins the SAP Fiori type scale on the standard semantic
   elements inside the app content. Selectors are qualified with
   `body main[data-shellmain]` (specificity 0,0,2,2) so they win over a
   single Tailwind utility class (0,0,1,0) for these elements — without
   `!important`, so a page can still opt out with a more specific rule.
   Dashboard KPI tiles / chart numbers use <div> + .fiori-* classes and are
   intentionally NOT matched here, so they keep their display sizing.
   ===================================================================== */
body main[data-shellmain] { font-size: var(--sapFontSize); line-height: var(--sapContent_LineHeight); }

/* Page title — h1 is reliably the page heading across the app; pin it to the
   Fiori page-title size. h2/h3 are deliberately NOT globally sized here because
   different pages (esp. the dashboard widgets) use them at intentionally varied
   sizes — those opt in via .sap-page-title / utility classes instead. */
body main[data-shellmain] h1 {
  font-size: var(--sapFontHeader1Size); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--sapTextColor);
}

/* Tables — 12px subtle header, 14px cells (SAP "Responsive Table") */
body main[data-shellmain] table thead th {
  font-size: var(--sapFontSmallSize); font-weight: 600;
  color: var(--sapTextColor_Subtle); letter-spacing: 0.03em;
}
body main[data-shellmain] table tbody td { font-size: var(--sapFontSize); }

/* Form controls — 12px subtle label, 14px field text (matches .fiori-input) */
body main[data-shellmain] label { font-size: var(--sapFontSmallSize); color: var(--sapTextColor_Subtle); }
body main[data-shellmain] input:not([type=checkbox]):not([type=radio]):not([type=range]),
body main[data-shellmain] select,
body main[data-shellmain] textarea { font-size: var(--sapFontSize); }

/* A reusable page-title helper so templates can opt in explicitly. */
.sap-page-title { font-size: var(--sapFontHeader1Size); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.sap-object-subtitle { font-size: var(--sapFontSmallSize); color: var(--sapTextColor_Subtle); }

/* =======================================================================
   SAP Fiori data tables — uniform, single-line rows with ellipsis.
   ----------------------------------------------------------------------
   The list pages let long values (customer name, supplier, address, the
   "created by") WRAP to 2–3 lines, giving ragged, unprofessional rows with
   no column-width discipline. SAP "Responsive/Grid Table" keeps every row a
   single line and truncates overflow with an ellipsis (full text on hover).
   We reproduce that for every content table:
     • table-layout: fixed  → columns honour their <th> width and share the
       rest evenly, instead of stretching to fit the longest cell.
     • cells truncate on one line (…) unless they opt into wrapping via
       `.sap-wrap` (use for genuinely multi-line content like remarks).
   Dashboard widgets use <div>/SVG, not <table>, so they're untouched.
   ===================================================================== */
body main[data-shellmain] table { table-layout: fixed; width: 100%; border-collapse: collapse; }
/* Data cells: single line, truncate long values with an ellipsis. */
body main[data-shellmain] table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/* Headers: WRAP (never truncate a column label to "GEN. DA…"); short 2-line
   captions are the SAP norm for narrow columns. */
body main[data-shellmain] table th {
  white-space: normal;
  vertical-align: middle;
  line-height: 1.2;
}
/* Opt-out for cells that should wrap (remarks, descriptions, address blocks). */
body main[data-shellmain] table th.sap-wrap,
body main[data-shellmain] table td.sap-wrap,
body main[data-shellmain] table .sap-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Right/centre alignment helpers survive truncation. */
body main[data-shellmain] table td[align="right"],
body main[data-shellmain] table th[align="right"] { text-align: right; }

/* Comfortable, uniform row rhythm (SAP "cozy"); compact density tightens it. */
body main[data-shellmain] table tbody td { height: 2.75rem; padding-top: 0; padding-bottom: 0; }
html[data-density="compact"] body main[data-shellmain] table tbody td { height: 2.25rem; }
body main[data-shellmain] table thead th {
  height: 2.5rem; padding-top: 0; padding-bottom: 0;
  position: sticky; top: 0; background: #F7F8F9; z-index: 1;
  border-bottom: 1px solid var(--sapNeutralBorderColor);
}
html[data-theme="dark"] body main[data-shellmain] table thead th { background: #1F262D; }

/* ======================================================================== */
/* PRINT LAYER — one dense, ink-frugal layout for EVERY print page.         */
/* The ERP's *_print.html pages render through the normal app shell; this    */
/* @media block strips the chrome and tightens spacing so every printout     */
/* (and Ctrl+P of any page) is compact and consistent. It also covers the    */
/* print pages that never had their own @media print block (they used to     */
/* print WITH the sidebar/header). Server-side PDF prints (PO / quotation /   */
/* WO / item BOM) are generated by reportlab and are unaffected by this CSS. */
/* ======================================================================== */
@media print {
  /* 1 — hide all interactive / navigational chrome */
  aside[data-sidenav], header, nav,
  .fiori-button, button, [role="button"],
  .sap-no-print, [data-no-print] { display: none !important; }

  /* 2 — use the full sheet: drop the app's scroll containers + insets */
  html, body { background: #fff !important; }
  main, body main[data-shellmain] {
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
  }
  .overflow-y-auto, .overflow-x-auto {
    overflow: visible !important; max-height: none !important; height: auto !important;
  }

  /* 3 — dense, black typography */
  body, body main[data-shellmain] {
    font-size: 10px !important; line-height: 1.25 !important; color: #000 !important;
  }
  h1 { font-size: 15px !important; margin: 0 0 4px !important; }
  h2 { font-size: 12px !important; margin: 0 0 3px !important; }

  /* 4 — strip decorative card chrome (shadow / rounding / tint waste ink) */
  .shadow-tile, .shadow, .shadow-md, .shadow-lg { box-shadow: none !important; }
  [class*="rounded"] { border-radius: 0 !important; }
  .bg-white, .bg-sap-bg, [class*="bg-slate-"] { background: #fff !important; }

  /* 5 — tight, fully-printed, bordered tables (content-sized, never clipped) */
  table { width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; }
  th, td {
    padding: 2px 5px !important; font-size: 9px !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    border: 0.5pt solid #888 !important; vertical-align: top !important; height: auto !important;
  }
  thead th {
    background: #ececec !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    position: static !important;          /* drop the sticky screen header */
  }
  thead { display: table-header-group !important; }   /* repeat header on each page */
  tr, td, th, img { page-break-inside: avoid !important; }

  /* 6 — compact card spacing */
  .space-y-4 > * + *, .space-y-3 > * + *, .space-y-2 > * + * { margin-top: 5px !important; }
  .p-6, .p-4, .p-3 { padding: 6px !important; }

  /* 7 — page setup */
  @page { size: A4; margin: 10mm; }
}