@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --background: 210 30% 95%;
  --foreground: 222 47% 11%;
  --card: 210 30% 93%;
  --card-foreground: 222 47% 11%;
  --popover: 210 30% 93%;
  --popover-foreground: 222 47% 11%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 30% 89%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 30% 89%;
  --muted-foreground: 215 25% 45%;
  --accent: 221 83% 53%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 221 83% 53%;
  --chart-1: 221 83% 53%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --success: 142 71% 45%;
  --warning: 38 92% 50%;
  --radius: 0.75rem;
  --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sidebar-background: 210 30% 93%;
  --sidebar-foreground: 222 47% 11%;
  --sidebar-primary: 221 83% 53%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 30% 89%;
  --sidebar-accent-foreground: 222 47% 11%;
  --sidebar-border: 214 32% 91%;
  --sidebar-ring: 221 83% 53%;
}

.dark {
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;
  --card: 222 47% 11%;
  --card-foreground: 210 40% 98%;
  --popover: 222 47% 11%;
  --popover-foreground: 210 40% 98%;
  --primary: 199 93% 60%;
  --primary-foreground: 0 0% 0%;
  --secondary: 222 47% 18%;
  --secondary-foreground: 210 40% 98%;
  --muted: 222 47% 18%;
  --muted-foreground: 214 20% 65%;
  --accent: 222 47% 18%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 222 47% 20%;
  --input: 222 47% 20%;
  --ring: 199 93% 60%;
  --chart-1: 199 93% 60%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --success: 142 71% 45%;
  --warning: 38 92% 50%;
  --sidebar-background: 222 47% 11%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-primary: 199 93% 60%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 222 47% 18%;
  --sidebar-accent-foreground: 210 40% 98%;
  --sidebar-border: 222 47% 20%;
  --sidebar-ring: 199 93% 60%;
}

/* ── Utility classes (framework-agnostic, no Tailwind required) ── */

.bento-card {
  background-color: hsl(var(--card) / 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1rem;
  border: 1px solid hsl(0 0% 100% / 0.6);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.dark .bento-card {
  background-color: hsl(222 47% 11% / 0.6);
  border-color: hsl(0 0% 100% / 0.08);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.4);
}
.bento-card:hover {
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.35);
}
.dark .bento-card:hover {
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.5);
}

.bento-card-glass {
  background-color: hsl(0 0% 100% / 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 1rem;
  border: 1px solid hsl(214 32% 91% / 0.4);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.06);
}
.dark .bento-card-glass {
  background-color: hsl(222 47% 11% / 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: hsl(0 0% 100% / 0.06);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.3);
}

.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, hsl(221 83% 53%), hsl(199 93% 60%));
}
.dark .gradient-text {
  background-image: linear-gradient(to right, hsl(199 93% 60%), hsl(243 75% 59%));
}

/* Hero background */
.nexus-hero-bg {
  background-color: #0d3a95;
  background-image: url("https://media.base44.com/images/public/6a3726dc7dd8208ff70c98dd/6a27315c3_generated_image.png");
  background-size: cover;
  background-position: center;
}
.nexus-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: transparent;
}
.dark .nexus-hero-overlay {
  background-color: rgba(0,0,0,0.5);
}

/* ── Page-level content classes (use these instead of local Tailwind bg/blur) ── */
/* Satellites apply these class names; the CC controls what they look like.     */
/* When the CC updates glassmorphism, every page on every satellite updates.     */

.nexus-page {
  padding: 24px;
  min-height: 100%;
  background: transparent;
}
@media (min-width: 768px) { .nexus-page { padding: 32px; } }

.nexus-page-header { margin-bottom: 24px; background: transparent; }
.nexus-page-title {
  font-size: 30px; font-weight: 800; color: #ffffff; margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
}
.nexus-page-subtitle {
  font-size: 14px; color: rgba(255,255,255,0.8); margin-top: 4px;
  font-family: var(--font-body);
}

/* Card — the ONE class every card container should use */
/* ALWAYS white translucent on the blue wallpaper, regardless of theme mode. */
/* Matches the ERP reference design: white glass cards, dark text.            */
.nexus-card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15) !important;
  padding: 24px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.nexus-card:hover {
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.25);
}
.nexus-card-header { margin-bottom: 16px; }
.nexus-card-title {
  font-size: 16px; font-weight: 600; color: #1f2937; margin: 0;
  font-family: var(--font-heading);
}
.nexus-card-body { color: #374151; }

/* ═══════════════════════════════════════════════════════════════════════
   CARD COMPLIANCE ENFORCEMENT — !important overrides
   The MSP platform keeps writing local dark card CSS instead of using
   .nexus-card. This forces ANY card-like element in the content area to
   render as white translucent glass, matching the ERP reference design,
   regardless of local Tailwind classes on the element.
   ═══════════════════════════════════════════════════════════════════════ */
.nexus-content [class*="card"]:not(.nexus-header):not(.nexus-sidebar):not(.nexus-footer),
.nexus-content [class*="Card"]:not(.nexus-header):not(.nexus-sidebar):not(.nexus-footer),
.nexus-content [class*="kpi"]:not(.nexus-header):not(.nexus-sidebar):not(.nexus-footer),
.nexus-content [class*="Kpi"]:not(.nexus-header):not(.nexus-sidebar):not(.nexus-footer),
.nexus-content [class*="widget"]:not(.nexus-header):not(.nexus-sidebar):not(.nexus-footer),
.nexus-content [class*="metric"]:not(.nexus-header):not(.nexus-sidebar):not(.nexus-footer),
.nexus-content [class*="directive"]:not(.nexus-header):not(.nexus-sidebar):not(.nexus-footer) {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15) !important;
  color: #1f2937 !important;
}

/* Force dark text on headings/labels inside cards — white text on white = invisible */
.nexus-content [class*="card"] h1,
.nexus-content [class*="card"] h2,
.nexus-content [class*="card"] h3,
.nexus-content [class*="card"] h4,
.nexus-content [class*="card"] p,
.nexus-content [class*="card"] span,
.nexus-content [class*="card"] label,
.nexus-content [class*="Card"] h1,
.nexus-content [class*="Card"] h2,
.nexus-content [class*="Card"] h3,
.nexus-content [class*="Card"] h4,
.nexus-content [class*="Card"] p,
.nexus-content [class*="Card"] span,
.nexus-content [class*="Card"] label,
.nexus-content [class*="kpi"] h1,
.nexus-content [class*="kpi"] h2,
.nexus-content [class*="kpi"] h3,
.nexus-content [class*="kpi"] h4,
.nexus-content [class*="kpi"] p,
.nexus-content [class*="kpi"] span,
.nexus-content [class*="kpi"] label,
.nexus-content [class*="Kpi"] h1,
.nexus-content [class*="Kpi"] h2,
.nexus-content [class*="Kpi"] h3,
.nexus-content [class*="Kpi"] h4,
.nexus-content [class*="Kpi"] p,
.nexus-content [class*="Kpi"] span,
.nexus-content [class*="Kpi"] label,
.nexus-content [class*="directive"] h1,
.nexus-content [class*="directive"] h2,
.nexus-content [class*="directive"] h3,
.nexus-content [class*="directive"] h4,
.nexus-content [class*="directive"] p,
.nexus-content [class*="directive"] span,
.nexus-content [class*="directive"] label,
.nexus-content [class*="metric"] h1,
.nexus-content [class*="metric"] h2,
.nexus-content [class*="metric"] h3,
.nexus-content [class*="metric"] h4,
.nexus-content [class*="metric"] p,
.nexus-content [class*="metric"] span,
.nexus-content [class*="metric"] label,
.nexus-content [class*="widget"] h1,
.nexus-content [class*="widget"] h2,
.nexus-content [class*="widget"] h3,
.nexus-content [class*="widget"] h4,
.nexus-content [class*="widget"] p,
.nexus-content [class*="widget"] span,
.nexus-content [class*="widget"] label {
  color: #1f2937 !important;
}

/* Responsive auto-grid for cards */
.nexus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .nexus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nexus-grid { grid-template-columns: repeat(3, 1fr); } }

/* Stat / metric card */
.nexus-stat {
  font-size: 28px; font-weight: 800; color: #1f2937; margin: 0;
  font-family: var(--font-heading);
}
.nexus-stat-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b7280; margin: 0;
}
.nexus-stat-delta {
  font-size: 12px; color: hsl(var(--success)); margin-top: 4px;
}

/* Status badge */
.nexus-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 9999px;
  background-color: hsl(var(--muted) / 0.5);
  color: hsl(var(--muted-foreground));
}

/* Primary button (works on the blue wallpaper) */
.nexus-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border: none; border-radius: 8px;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 14px; font-weight: 600; font-family: var(--font-body);
  cursor: pointer; transition: opacity 0.15s, transform 0.05s;
}
.nexus-btn:hover { opacity: 0.9; }
.nexus-btn:active { transform: scale(0.98); }
.nexus-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Ghost / secondary button */
.nexus-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 8px;
  border: 1px solid hsl(0 0% 100% / 0.3);
  background-color: hsl(0 0% 100% / 0.1);
  color: #ffffff;
  font-size: 14px; font-weight: 500; font-family: var(--font-body);
  cursor: pointer; transition: background 0.15s;
}
.nexus-btn-ghost:hover { background-color: hsl(0 0% 100% / 0.2); }

/* Form inputs (inside glass cards) */
.nexus-input {
  height: 40px; width: 100%; border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background) / 0.5);
  padding: 0 12px; font-size: 14px; color: hsl(var(--card-foreground));
  outline: none; font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nexus-input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
}