/* Invenzra brand theme — applies the marketing-site palette to the inner
   Universal Theme (Vita-Slate) app pages. Colors/fonts only: no layout,
   spacing, or structural overrides, so Interactive Grids/Reports/Dialogs
   keep working exactly as built. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --inv-bg: #F7F8FB;
  --inv-surface: #FFFFFF;
  --inv-border: rgba(13, 22, 38, .11);
  --inv-border-strong: rgba(13, 22, 38, .20);
  --inv-blue: #2563EB;
  --inv-violet: #6D4AFF;
  --inv-green: #0E9F6E;
  --inv-text: #0D1626;
  --inv-muted: #5B6880;
  --inv-gradient: linear-gradient(135deg, #2563EB, #6D4AFF);
  --inv-font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --inv-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Body + page background */
body.t-PageBody,
body.apex-page-region {
  background-color: var(--inv-bg);
  font-family: var(--inv-font-body);
  color: var(--inv-text);
}

/* Headings + page title use the display font */
.t-PageBody-title,
.t-Region-title,
.t-Breadcrumb,
h1, h2, h3 {
  font-family: var(--inv-font-heading);
  color: var(--inv-text);
}

/* Links — content area only, so the side/top navigation menu (also <a> tags)
   is never affected and keeps its own default theme color */
.t-Body-contentInner a:not(.t-Button):not(.zn),
.t-Region a:not(.t-Button):not(.zn) {
  color: var(--inv-blue);
}

/* Regions / cards: soft border + white surface to match landing page cards */
.t-Region {
  background-color: var(--inv-surface);
  border-color: var(--inv-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(23, 26, 36, .04);
}

/* Region title bar: light strip matching only the card's top corners */
.t-Region-header {
  background-color: #F7F8FC;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* ===== Form fields ("boxes") =====
   One consistent look for every entry field across every page: white fill,
   soft border, 6px corners, blue focus glow — matches the rest of the app. */
.apex-item-text,
.apex-item-textarea,
.apex-item-select,
.apex-item-popup-lov,
input[type="text"].apex-item-text,
input[type="number"].apex-item-text,
input[type="search"].apex-item-text,
input[type="date"].apex-item-text,
.apex-item-datepicker input,
.a-Form-textarea,
select.apex-item-select {
  background-color: var(--inv-surface);
  border: 1px solid #D7D5E2;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: var(--inv-font-body);
  color: var(--inv-text);
  min-height: 34px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.apex-item-text:focus,
.apex-item-textarea:focus,
.apex-item-select:focus,
.apex-item-popup-lov:focus,
.apex-item-datepicker input:focus,
.a-Form-textarea:focus,
select.apex-item-select:focus {
  border-color: var(--inv-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
  outline: none;
}

/* Field labels */
.t-Form-label,
label.a-Form-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--inv-text);
  font-family: var(--inv-font-body);
}

/* Side / top navigation active item accent */
.t-TreeNav-content.is-selected,
.t-TreeNav-content.is-active,
.a-Navigation .is-selected > .a-Navigation-link {
  border-left-color: var(--inv-blue);
}

/* Status / success badges reuse the same green as the landing page */
.t-Badge--success,
.a-Badge--success {
  background-color: var(--inv-green);
}

/* Login / register card headers, where used */
.login-brand-accent {
  background: var(--inv-gradient);
}

/* ===== Animation layer =====
   Entrance + hover motion only — no layout/size changes, so nothing
   Interactive Grids/Reports rely on for positioning is touched. */

@keyframes inv-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes inv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}

@keyframes inv-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes inv-shimmer {
  from { background-position: -200px 0; }
  to   { background-position: calc(200px + 100%) 0; }
}

/* Regions/cards fade+rise in as the page renders, staggered by position */
.t-Body-contentInner .t-Region,
.t-PageBody .t-Region {
  animation: inv-fade-up .45s ease-out both;
}
.t-Body-contentInner .t-Region:nth-of-type(2),
.t-PageBody .t-Region:nth-of-type(2) { animation-delay: .06s; }
.t-Body-contentInner .t-Region:nth-of-type(3),
.t-PageBody .t-Region:nth-of-type(3) { animation-delay: .12s; }
.t-Body-contentInner .t-Region:nth-of-type(4),
.t-PageBody .t-Region:nth-of-type(4) { animation-delay: .18s; }

/* Cards/regions lift gently on hover, matching the landing page's tactile feel */
.t-Region {
  transition: transform .18s ease, box-shadow .18s ease;
}
.t-Region:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 22, 38, .08);
}

/* All buttons get a quick, subtle press/hover transition */
.t-Button {
  transition: transform .12s ease, box-shadow .12s ease;
}
.t-Button:active {
  transform: scale(.97);
}

/* Badges pulse softly to draw the eye (e.g. low-stock / reorder alerts) */
.t-Badge--warning,
.a-Badge--warning {
  animation: inv-pulse 2s ease-in-out infinite;
}

/* Nav items slide their accent border in smoothly rather than snapping */
.t-TreeNav-content,
.a-Navigation-link {
  transition: border-color .15s ease, background-color .15s ease;
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .t-Body-contentInner .t-Region,
  .t-PageBody .t-Region,
  .t-Button--hot,
  .a-Button--hot,
  .t-Badge--warning,
  .a-Badge--warning {
    animation: none !important;
  }
  .t-Region,
  .t-Button,
  .t-TreeNav-content,
  .a-Navigation-link {
    transition: none !important;
  }
}