/* =========================================================
   ISA ERP — Design Tokens & Base
   Premium glass SaaS · Apple / Linear / Stripe inspired
   ========================================================= */

:root {
  /* Brand */
  --isa-primary: #2563EB;
  --isa-primary-hover: #1D4ED8;
  --isa-primary-soft: rgba(var(--isa-primary-rgb), 0.12);
  --isa-primary-rgb: 37, 99, 235;
  --isa-secondary: #EAB308;
  --isa-secondary-soft: rgba(var(--isa-secondary-rgb), 0.14);
  --isa-secondary-rgb: 234, 179, 8;

  /* Semantic */
  --isa-success: #10B981;
  --isa-success-soft: rgba(16, 185, 129, 0.12);
  --isa-danger: #EF4444;
  --isa-danger-soft: rgba(239, 68, 68, 0.12);
  --isa-warning: #F59E0B;
  --isa-warning-soft: rgba(245, 158, 11, 0.12);
  --isa-info: #0EA5E9;
  --isa-info-soft: rgba(14, 165, 233, 0.12);

  /* Surfaces */
  --isa-bg: #F5F7FB;
  --isa-bg-accent: rgba(var(--isa-primary-rgb), 0.06);
  --isa-surface: rgba(255, 255, 255, 0.72);
  --isa-surface-solid: #FFFFFF;
  --isa-surface-strong: rgba(255, 255, 255, 0.88);
  --isa-glass-border: rgba(255, 255, 255, 0.55);
  --isa-border: rgba(15, 23, 42, 0.08);
  --isa-border-strong: rgba(15, 23, 42, 0.12);

  /* Text */
  --isa-text: #0F172A;
  --isa-text-secondary: #475569;
  --isa-text-muted: #94A3B8;
  --isa-text-inverse: #FFFFFF;

  /* Radius */
  --isa-radius-card: 20px;
  --isa-radius-btn: 14px;
  --isa-radius-input: 14px;
  --isa-radius-table: 20px;
  --isa-radius-pill: 999px;
  --isa-radius-sm: 10px;

  /* Brand gradients — full primary→secondary sweep, kept premium by a
     directional top-light overlay and a slightly darker bottom edge. */
  --isa-grad-brand:
    radial-gradient(130% 120% at 18% -12%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(15, 23, 42, 0.12)),
    linear-gradient(108deg, var(--isa-primary) 4%, var(--isa-secondary) 96%);
  --isa-grad-bar: linear-gradient(90deg, var(--isa-primary), var(--isa-secondary));

  /* Shadows */
  --isa-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --isa-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.05);
  --isa-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --isa-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --isa-shadow-primary: 0 10px 30px rgba(var(--isa-primary-rgb), 0.28);

  /* Glass */
  --isa-blur: blur(20px);
  --isa-blur-strong: blur(28px);

  /* Layout */
  --isa-sidebar-w: 280px;
  --isa-sidebar-collapsed: 88px;
  --isa-topbar-h: 72px;
  --isa-content-pad: 28px;
  --isa-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Motion */
  --isa-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --isa-duration: 0.28s;
}

/* Perceptual (oklab) mid-stops keep the brand sweep luminous — raw sRGB
   blends of distant hues dip into a muddy middle, which reads cheap. */
@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --isa-grad-brand:
      radial-gradient(130% 120% at 18% -12%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 52%),
      linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(15, 23, 42, 0.12)),
      linear-gradient(108deg,
        var(--isa-primary) 4%,
        color-mix(in oklab, var(--isa-primary) 62%, var(--isa-secondary)) 44%,
        color-mix(in oklab, var(--isa-primary) 30%, var(--isa-secondary)) 70%,
        var(--isa-secondary) 96%);
    --isa-grad-bar:
      linear-gradient(90deg,
        var(--isa-primary),
        color-mix(in oklab, var(--isa-primary) 50%, var(--isa-secondary)),
        var(--isa-secondary));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--isa-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--isa-text);
  background: var(--isa-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

body.app-body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(var(--isa-primary-rgb), 0.12), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(var(--isa-secondary-rgb), 0.10), transparent 50%),
    radial-gradient(800px 400px at 50% 100%, rgba(16, 185, 129, 0.06), transparent 45%),
    var(--isa-bg);
}

a {
  color: var(--isa-primary);
  text-decoration: none;
  transition: color var(--isa-duration) var(--isa-ease);
}

a:hover {
  color: var(--isa-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.35em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--isa-text);
}

h1 { font-size: 1.85rem; font-weight: 700; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p {
  margin-top: 0;
  color: var(--isa-text-secondary);
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

::selection {
  background: var(--isa-primary-soft);
  color: var(--isa-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: var(--isa-radius-pill);
}
::-webkit-scrollbar-track {
  background: transparent;
}

.isa-page-enter {
  animation: isaFadeUp 0.45s var(--isa-ease) both;
}

/* Opacity only — a leftover transform creates a containing block and
   throws off Bootstrap/Popper dropdowns that use position:fixed. */
@keyframes isaFadeUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes isaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes isaScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes isaPulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes isaShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}