/* SAP 72 (Apache-2.0, sourced from @sap-theming/theming-base-content).
   font-display: optional → if the font isn't cached and ready within ~100ms,
   the browser permanently uses the system fallback for this page load and
   never swaps. That eliminates the page-wide text reflow (visible to the
   user as the page "jumping/refreshing") that `swap` was causing on every
   refresh. Once the font is cached, subsequent loads use SAP-72 from the
   first paint with no swap. */
@font-face {
  font-family: '72';
  src: url("../fonts/72-Regular.7d580f662f7b.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-Bold.135f3d677ed6.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: optional;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-Light.305db443df40.woff2") format('woff2');
  font-weight: 300; font-style: normal; font-display: optional;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-Italic.46c893d81928.woff2") format('woff2');
  font-weight: 400; font-style: italic; font-display: optional;
}
@font-face {
  font-family: '72';
  src: url("../fonts/72-BoldItalic.b898664493eb.woff2") format('woff2');
  font-weight: 700; font-style: italic; font-display: optional;
}

/* 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;
  --sapFontSmallSize: 0.75rem;
  --sapFontSize: 0.875rem;
  --sapFontHeader1Size: 1.625rem;
  --sapFontHeader2Size: 1.25rem;
  --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; }
}

/* ---------- 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;
}

/* ---------- 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; }