/* ============================================
   CloudIngenium Shared UI — CSS Utilities
   Supplements MudBlazor with custom animations,
   transitions, and utility classes.
   ============================================ */

/* --- DM Sans — self-hosted (AS5: no third-party font CDN) ---
   The canonical --font-sans / --font-display for the cloudingenium, bauxtp, and
   personal brands. Variable font on the `opsz` axis → one woff2 per subset/style
   covers the whole 300..800 weight range. Files live in wwwroot/fonts/ and ship as
   `_content/CloudIngenium.Shared.UI/fonts/*.woff2`, so these relative URLs resolve
   for every consumer with zero new <link>. Refresh with tools/fetch-cloudingenium-fonts.py. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/DMSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/DMSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/DMSans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/DMSans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Form/Dialog width-collapse guards ---
   <fieldset> ships a UA `min-width: min-content` that ignores `flex: 1` and
   collapses flex/grid children to single-word width. <dialog> ships
   `width: fit-content` + restrictive `min-width` defaults that do the same.
   Reset them here so they size predictably against MudBlazor/Tailwind layouts. */
fieldset { min-width: 0; }
dialog   { min-width: auto; }

/* --- Focus ring --- */
:focus-visible {
  outline: 2px solid var(--mud-palette-primary) !important;
  outline-offset: 2px;
}

/* --- Selection --- */
::selection {
  background: rgba(34, 211, 238, 0.2);
}

/* --- Custom scrollbar (dark mode) --- */
.mud-theme-dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.mud-theme-dark ::-webkit-scrollbar-track {
  background: transparent;
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.15); }
  50% { box-shadow: 0 0 16px 4px rgba(34, 211, 238, 0.08); }
}

/* --- Utility classes --- */
.ci-fade-in { animation: fadeIn 0.3s ease-out; }
.ci-fade-in-up { animation: fadeInUp 0.4s ease-out; }
.ci-fade-in-down { animation: fadeInDown 0.4s ease-out; }
.ci-scale-in { animation: scaleIn 0.3s ease-out; }
.ci-slide-in-left { animation: slideInLeft 0.4s ease-out; }

/* Stagger children */
.ci-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ci-stagger > *:nth-child(2) { animation-delay: 60ms; }
.ci-stagger > *:nth-child(3) { animation-delay: 120ms; }
.ci-stagger > *:nth-child(4) { animation-delay: 180ms; }
.ci-stagger > *:nth-child(5) { animation-delay: 240ms; }
.ci-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* Skeleton loading */
.ci-skeleton {
  background: linear-gradient(90deg, #1e293b 0%, #293548 40%, #1e293b 80%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Light mode skeleton */
.mud-theme-light .ci-skeleton {
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 40%, #e2e8f0 80%);
  background-size: 200% 100%;
}

/* KPI card hover */
.ci-kpi-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}

.ci-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.mud-theme-dark .ci-kpi-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
}

/* Status dot with glow */
.ci-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.ci-status-dot--active {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.ci-status-dot--warning {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.ci-status-dot--error {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Glassmorphism card */
.ci-glass-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .ci-glass-card {
  border-color: rgba(0, 0, 0, 0.06);
}

/* Gradient text */
.ci-gradient-text {
  background: linear-gradient(135deg, #22d3ee, #3381ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Monospace numbers */
.ci-mono-nums {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   Colorful Sidebar Navigation
   Extracted from Zap ERP — per-section colors,
   glow effects, animated labels, collapsible.
   ============================================ */

:root {
  /* Section colors (light mode) */
  --ci-nav-dashboard: #0891b2;
  --ci-nav-dashboard-glow: rgba(8, 145, 178, 0.15);
  --ci-nav-identity: #8b5cf6;
  --ci-nav-identity-glow: rgba(139, 92, 246, 0.15);
  --ci-nav-email: #3b82f6;
  --ci-nav-email-glow: rgba(59, 130, 246, 0.15);
  --ci-nav-security: #f43f5e;
  --ci-nav-security-glow: rgba(244, 63, 94, 0.15);
  --ci-nav-licensing: #f59e0b;
  --ci-nav-licensing-glow: rgba(245, 158, 11, 0.15);
  --ci-nav-infra: #14b8a6;
  --ci-nav-infra-glow: rgba(20, 184, 166, 0.15);
  --ci-nav-errors: #f97316;
  --ci-nav-errors-glow: rgba(249, 115, 22, 0.15);
  --ci-nav-settings: #6b7280;
  --ci-nav-settings-glow: rgba(107, 114, 128, 0.15);
  --ci-nav-alerts: #ef4444;
  --ci-nav-alerts-glow: rgba(239, 68, 68, 0.15);
  --ci-nav-tools: #10b981;
  --ci-nav-tools-glow: rgba(16, 185, 129, 0.15);

  --ci-sidebar-bg: rgba(255, 255, 255, 0.72);
  --ci-sidebar-hover-bg: rgba(15, 118, 110, 0.06);
  --ci-sidebar-active-bg: rgba(15, 118, 110, 0.1);
  --ci-sidebar-width: 280px;
  --ci-sidebar-collapsed-width: 64px;
}

.mud-theme-dark {
  --ci-nav-dashboard: #22d3ee;
  --ci-nav-dashboard-glow: rgba(34, 211, 238, 0.12);
  --ci-nav-identity: #a78bfa;
  --ci-nav-identity-glow: rgba(167, 139, 250, 0.12);
  --ci-nav-email: #60a5fa;
  --ci-nav-email-glow: rgba(96, 165, 250, 0.12);
  --ci-nav-security: #fb7185;
  --ci-nav-security-glow: rgba(251, 113, 133, 0.12);
  --ci-nav-licensing: #fbbf24;
  --ci-nav-licensing-glow: rgba(251, 191, 36, 0.12);
  --ci-nav-infra: #2dd4bf;
  --ci-nav-infra-glow: rgba(45, 212, 191, 0.12);
  --ci-nav-errors: #fb923c;
  --ci-nav-errors-glow: rgba(251, 146, 60, 0.12);
  --ci-nav-settings: #9ca3af;
  --ci-nav-settings-glow: rgba(156, 163, 175, 0.12);
  --ci-nav-alerts: #f87171;
  --ci-nav-alerts-glow: rgba(248, 113, 113, 0.12);
  --ci-nav-tools: #34d399;
  --ci-nav-tools-glow: rgba(52, 211, 153, 0.12);

  --ci-sidebar-bg: rgba(15, 23, 42, 0.78);
  --ci-sidebar-hover-bg: rgba(20, 184, 166, 0.08);
  --ci-sidebar-active-bg: rgba(20, 184, 166, 0.12);
}

/* Sidebar container */
.ci-sidebar {
  width: var(--ci-sidebar-width);
  background: var(--ci-sidebar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid rgba(148, 163, 184, 0.08);
  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.ci-sidebar.collapsed {
  width: var(--ci-sidebar-collapsed-width);
}

/* Text fade on collapse */
.ci-sidebar .ci-nav-text,
.ci-sidebar .ci-nav-label {
  transition: opacity 200ms ease 80ms;
  opacity: 1;
  white-space: nowrap;
}

.ci-sidebar.collapsed .ci-nav-text,
.ci-sidebar.collapsed .ci-nav-label {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* Section labels */
.ci-nav-label {
  padding: 0.75rem 0.75rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-left: 2px solid transparent;
  transition: color 200ms ease;
}

/* Section label colors */
.ci-nav-label-dashboard  { color: var(--ci-nav-dashboard) !important;  border-left-color: var(--ci-nav-dashboard) !important; }
.ci-nav-label-identity   { color: var(--ci-nav-identity) !important;   border-left-color: var(--ci-nav-identity) !important; }
.ci-nav-label-email      { color: var(--ci-nav-email) !important;      border-left-color: var(--ci-nav-email) !important; }
.ci-nav-label-security   { color: var(--ci-nav-security) !important;   border-left-color: var(--ci-nav-security) !important; }
.ci-nav-label-licensing   { color: var(--ci-nav-licensing) !important;  border-left-color: var(--ci-nav-licensing) !important; }
.ci-nav-label-infra      { color: var(--ci-nav-infra) !important;      border-left-color: var(--ci-nav-infra) !important; }
.ci-nav-label-errors     { color: var(--ci-nav-errors) !important;     border-left-color: var(--ci-nav-errors) !important; }
.ci-nav-label-settings   { color: var(--ci-nav-settings) !important;   border-left-color: var(--ci-nav-settings) !important; }
.ci-nav-label-alerts     { color: var(--ci-nav-alerts) !important;     border-left-color: var(--ci-nav-alerts) !important; }
.ci-nav-label-tools      { color: var(--ci-nav-tools) !important;      border-left-color: var(--ci-nav-tools) !important; }

/* Nav group section colors — icon tint */
.ci-nav-group-dashboard .mud-nav-group-text .mud-icon-root { color: var(--ci-nav-dashboard) !important; }
.ci-nav-group-identity .mud-nav-group-text .mud-icon-root  { color: var(--ci-nav-identity) !important; }
.ci-nav-group-email .mud-nav-group-text .mud-icon-root     { color: var(--ci-nav-email) !important; }
.ci-nav-group-security .mud-nav-group-text .mud-icon-root  { color: var(--ci-nav-security) !important; }
.ci-nav-group-licensing .mud-nav-group-text .mud-icon-root { color: var(--ci-nav-licensing) !important; }
.ci-nav-group-infra .mud-nav-group-text .mud-icon-root     { color: var(--ci-nav-infra) !important; }
.ci-nav-group-errors .mud-nav-group-text .mud-icon-root    { color: var(--ci-nav-errors) !important; }
.ci-nav-group-settings .mud-nav-group-text .mud-icon-root  { color: var(--ci-nav-settings) !important; }
.ci-nav-group-alerts .mud-nav-group-text .mud-icon-root    { color: var(--ci-nav-alerts) !important; }
.ci-nav-group-tools .mud-nav-group-text .mud-icon-root     { color: var(--ci-nav-tools) !important; }

/* Glow on expanded group */
.ci-nav-group-dashboard.mud-expanded { --_nav-glow: var(--ci-nav-dashboard-glow); }
.ci-nav-group-identity.mud-expanded  { --_nav-glow: var(--ci-nav-identity-glow); }
.ci-nav-group-email.mud-expanded     { --_nav-glow: var(--ci-nav-email-glow); }
.ci-nav-group-security.mud-expanded  { --_nav-glow: var(--ci-nav-security-glow); }
.ci-nav-group-licensing.mud-expanded { --_nav-glow: var(--ci-nav-licensing-glow); }
.ci-nav-group-infra.mud-expanded     { --_nav-glow: var(--ci-nav-infra-glow); }
.ci-nav-group-errors.mud-expanded    { --_nav-glow: var(--ci-nav-errors-glow); }
.ci-nav-group-settings.mud-expanded  { --_nav-glow: var(--ci-nav-settings-glow); }
.ci-nav-group-alerts.mud-expanded    { --_nav-glow: var(--ci-nav-alerts-glow); }
.ci-nav-group-tools.mud-expanded     { --_nav-glow: var(--ci-nav-tools-glow); }

/* Expanded group glow overlay */
[class*="ci-nav-group-"].mud-expanded::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--_nav-glow, transparent) 0%, transparent 100%);
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Nav link hover/active states */
.ci-sidebar .mud-nav-link {
  border-radius: 0.5rem;
  margin: 1px 0;
  transition: background 200ms ease, border-color 200ms ease;
}

.ci-sidebar .mud-nav-link:hover {
  background: var(--ci-sidebar-hover-bg) !important;
}

.ci-sidebar .mud-nav-link.active {
  background: var(--ci-sidebar-active-bg) !important;
  border-left: 2px solid var(--mud-palette-primary);
}

/* Nav group smooth expand */
.ci-sidebar .mud-collapse-container {
  transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Badge pop for alerts/counts */
@keyframes ci-badge-pop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.ci-nav-badge {
  animation: ci-badge-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ci-fade-in,
  .ci-fade-in-up,
  .ci-fade-in-down,
  .ci-scale-in,
  .ci-slide-in-left {
    animation: none !important;
  }

  .ci-stagger > * {
    animation-delay: 0ms !important;
  }

  .ci-skeleton {
    animation: none !important;
  }

  .ci-kpi-card {
    transition: none !important;
  }
}