/* ============================================================
   SignX Admin Theme - FULL
   Built on Bootstrap 5
   Palette: Indigo-600, Slate-700, White cards
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ------------------------------------------------------------
   1) Design Tokens (SignX Unified)
   ------------------------------------------------------------ */

:root {
  /* Core palette */
  --signx-primary: #4f46e5;
  --signx-primary-rgb: 79, 70, 229;
  --signx-primary-600: #4f46e5;
  --signx-primary-700: #4338ca;
  --signx-primary-hover: #4338ca;
  --signx-secondary: #8858f0;
  --signx-success: #10b981;
  --signx-success-50: #ecfdf5;
  --signx-warning: #f59e0b;
  --signx-warning-50: #fffbeb;
  --signx-danger: #ef4444;
  --signx-danger-50: #fef2f2;
  --signx-info: #3b82f6;
  --signx-info-50: #dbeafe;

  /* Neutral scale */
  --signx-900: #0f172a;
  --signx-800: #1e293b;
  --signx-700: #334155;
  --signx-600: #475569;
  --signx-500: #64748b;
  --signx-400: #94a3b8;
  --signx-300: #cbd5f1;
  --signx-200: #e2e8f0;
  --signx-150: #e5e7eb;
  --signx-100: #f1f5f9;
  --signx-white: #ffffff;

  /* Tailwind-style gray aliases (legacy) */
  --signx-gray-900: var(--signx-900);
  --signx-gray-800: var(--signx-800);
  --signx-gray-700: var(--signx-700);
  --signx-gray-600: var(--signx-600);
  --signx-gray-500: var(--signx-500);
  --signx-gray-400: var(--signx-400);
  --signx-gray-300: var(--signx-300);
  --signx-gray-200: var(--signx-200);
  --signx-gray-150: var(--signx-150);
  --signx-gray-100: var(--signx-100);

  /* Indigo ramp */
  --signx-indigo: #1e1b4b;
  --signx-indigo-600: #3730a3;
  --signx-indigo-700: #312e81;

  /* Supporting blues */
  --signx-blue-1: #818cf8;
  --signx-blue-2: #a5b4fc;
  --signx-blue-3: #6366f1;
  --signx-blue-4: #c7d2fe;
  --signx-blue-5: #e0e7ff;

  /* Surfaces / backgrounds */
  --signx-bg-body: #f7f7f8;
  --signx-bg-surface: #ffffff;
  --signx-bg-sidebar: #1e1b4b;
  --signx-bg: var(--signx-bg-body);
  --signx-surface: var(--signx-bg-surface);
  --signx-surface-2: #eef2ff;

  --surface-0: var(--signx-bg-surface);
  --surface-1: #f9fafb;
  --surface-2: #edf2ff;
  --surface-3: #e0e7ff;

  /* Borders */
  --signx-border-color: #e7e7ee;
  --signx-border: color-mix(in srgb, var(--signx-gray-200) 88%, transparent);
  --signx-border-strong: color-mix(in srgb,
      var(--signx-gray-300) 70%,
      transparent);
  --signx-soft: color-mix(in srgb, var(--surface-1) 75%, white);
  --signx-soft-2: color-mix(in srgb, var(--surface-2) 80%, white);
  --signx-code: color-mix(in srgb, var(--signx-gray-100) 70%, white);
  --signx-danger-soft: color-mix(in srgb, var(--signx-danger-50) 75%, white);
  --signx-warning-soft: color-mix(in srgb, var(--signx-warning-50) 75%, white);
  --signx-success-soft: color-mix(in srgb, var(--signx-success-50) 75%, white);
  --signx-info-soft: color-mix(in srgb, var(--signx-info-50) 75%, white);

  /* Radii */
  --signx-radius: 1rem;
  --signx-radius-xs: 6px;
  --signx-radius-sm: 10px;
  --signx-radius-md: 14px;
  --signx-radius-lg: 18px;
  --signx-radius-xl: 24px;
  --signx-radius-2xl: 32px;
  --signx-radius-pill: 999px;

  --radius-xs: var(--signx-radius-xs);
  --radius-sm: var(--signx-radius-sm);
  --radius-md: var(--signx-radius-md);
  --radius-lg: var(--signx-radius-lg);
  --radius-xl: var(--signx-radius-xl);
  --radius-2xl: var(--signx-radius-2xl);
  --radius-pill: var(--signx-radius-pill);

  /* Shadows */
  --signx-shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.06);
  --signx-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --signx-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
  --signx-shadow-md: var(--signx-shadow);
  --signx-shadow-lg:
    0 10px 15px -3px rgba(15, 23, 42, 0.12),
    0 4px 6px -4px rgba(15, 23, 42, 0.1);
  --signx-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.14);

  --lms-primary: #6d5cf6;
  --lms-primary-700: #5b46f2;
  --lms-primary-800: #4632e8;
  --lms-secondary: #a855f7;
  --lms-cyan: #22d3ee;
  --lms-mint: #34d399;
  --lms-pink: #fb7185;

  /* Neutrals */
  --lms-ink: #0f172a;
  /* slate-900 */
  --lms-text: #111827;
  /* gray-900 */
  --lms-muted: #6b7280;
  /* gray-500 */
  --lms-muted-2: #94a3b8;
  /* slate-400 */
  --lms-bg: #f6f7ff;
  /* lavender tint */
  --lms-surface: #ffffff;
  --lms-surface-2: #fbfbff;
  --lms-border: rgba(15, 23, 42, 0.1);

  /* Effects */
  --lms-shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);
  --lms-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --lms-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.12);

  /* Radius */
  --lms-r-sm: 12px;
  --lms-r-md: 16px;
  --lms-r-lg: 20px;
  --lms-r-xl: 26px;

  /* Spacing */
  --lms-gap-1: 8px;
  --lms-gap-2: 12px;
  --lms-gap-3: 16px;
  --lms-gap-4: 20px;
  --lms-gap-5: 28px;

  /* Layout helpers (kept compatible with existing LMS layout) */
  --lms-rail-w: 64px;
  --lms-sidebar-w: 300px;
  --lms-content-max: 1400px;

  /* Gradients */
  --lms-grad-primary: linear-gradient(135deg,
      var(--lms-primary) 0%,
      var(--lms-secondary) 100%);
  --lms-grad-hero: linear-gradient(180deg,
      rgba(109, 92, 246, 0.1) 0%,
      rgba(168, 85, 247, 0.06) 45%,
      rgba(34, 211, 238, 0.03) 100%);
  --lms-grad-chip: linear-gradient(135deg,
      rgba(109, 92, 246, 0.16),
      rgba(168, 85, 247, 0.12));

  --shadow-xs: var(--signx-shadow-xs);
  --shadow-sm: var(--signx-shadow-sm);
  --shadow-md: var(--signx-shadow);
  --shadow-lg: var(--signx-shadow-lg);
  --shadow-xl: var(--signx-shadow-xl);

  /* Typography */
  --font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --signx-text-heading: #0f172a;
  --signx-text-body: #334155;
  --signx-text-muted: #94a3b8;

  --text-strong: var(--signx-text-heading);
  --text-base: var(--signx-text-body);
  --text-soft: #6b7280;
  --text-muted: var(--signx-text-muted);
  --text-inverse: #f9fafb;

  /* Spacing */
  --signx-space-xxs: 4px;
  --signx-space-xs: 8px;
  --signx-space-sm: 12px;
  --signx-space-md: 16px;
  --signx-space-lg: 24px;
  --signx-space-xl: 32px;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --space-section-y: 32px;
  --space-section-x: 20px;

  --gap-xs: var(--space-xs);
  --gap-sm: var(--space-sm);
  --gap-md: var(--space-md);
  --gap-lg: var(--space-lg);
  --gap-xl: var(--space-xl);

  /* Typography scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  --line-height-tight: 1.2;
  --line-height-relaxed: 1.6;

  /* Containers */
  --container-max-sm: 640px;
  --container-max-md: 960px;
  --container-max-lg: 1200px;
  --container-max-xl: 1440px;

  /* Focus and glow */
  --focus-ring: rgba(79, 70, 229, 0.25);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --signx-ring: 0 0 0 4px rgba(79, 70, 229, 0.18);
  --signx-glow: 0 12px 30px rgba(15, 23, 42, 0.1);
  --signx-glow-strong: 0 18px 46px rgba(15, 23, 42, 0.14);

  /* Gradient system (aligned to palette) */
  --primary-gradient: linear-gradient(135deg,
      var(--signx-primary) 0%,
      var(--signx-blue-3) 100%);
  --secondary-gradient: linear-gradient(135deg,
      var(--signx-secondary) 0%,
      var(--signx-gray-500) 100%);
  --success-gradient: linear-gradient(135deg,
      var(--signx-success) 0%,
      #34d399 100%);
  --info-gradient: linear-gradient(135deg, var(--signx-info) 0%, #60a5fa 100%);
  --warning-gradient: linear-gradient(135deg,
      var(--signx-warning) 0%,
      #fbbf24 100%);
  --danger-gradient: linear-gradient(135deg,
      var(--signx-danger) 0%,
      #f87171 100%);
  --dark-gradient: linear-gradient(135deg,
      var(--signx-gray-800) 0%,
      var(--signx-gray-700) 100%);
  --purple-gradient: linear-gradient(135deg,
      var(--signx-indigo) 0%,
      var(--signx-primary) 100%);
  --teal-gradient: linear-gradient(135deg,
      var(--signx-success) 0%,
      var(--signx-info) 100%);
  --indigo-gradient: linear-gradient(135deg,
      var(--signx-indigo) 0%,
      var(--signx-indigo-600) 100%);
  --ai-gradient: linear-gradient(135deg,
      var(--signx-info) 0%,
      var(--signx-primary) 100%);

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(15, 23, 42, 0.08);

  /* Layout sizing */
  --sidebar-width: 280px;
  --sidebar-collapsed: 86px;
  --left-rail-width: 0px;
  --secondary-sidebar-width: 280px;
  --header-height: 60px;

  --signx-sidebar-expanded: 260px;
  --signx-sidebar-collapsed: 88px;
  --signx-sidebar-icon-size: 1.2rem;
  --signx-sidebar-icon-size-lg: 1.5rem;

  --sidebar-bg-light: linear-gradient(180deg, #ffffff, #f9fafb 45%, #f3f4f6);
  --sidebar-bg-dark: linear-gradient(180deg, #1f2937, #111827 45%, #0f172a);
  --sidebar-border-light: #e5e7eb;
  --sidebar-border-dark: #1e293b;
  --sidebar-scroll-thumb-light: rgba(148, 163, 184, 0.8);
  --sidebar-scroll-thumb-dark: rgba(71, 85, 105, 0.9);

  /* Transitions */
  --fast: 120ms;
  --normal: 200ms;
  --slow: 320ms;

  /* Z indices */
  --z-navbar: 1030;
  --z-sidebar: 1025;
  --z-sticky: 1020;

  /* Charts / widgets */
  --widget-grid:
    linear-gradient(0deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);

  --chart-line-1: var(--signx-primary);
  --chart-line-2: var(--signx-blue-2);
  --chart-line-3: var(--signx-blue-3);
  --chart-grid-color: rgba(15, 23, 42, 0.08);
  --kpi-positive: var(--signx-success);
  --kpi-negative: var(--signx-danger);

  /* Bootstrap overrides */
  --bs-primary: var(--signx-primary);
  --bs-secondary: var(--signx-secondary);
  --bs-success: var(--signx-success);
  --bs-warning: var(--signx-warning);
  --bs-danger: var(--signx-danger);
  --bs-info: var(--signx-info);
  --bs-body-bg: var(--signx-bg-body);
  --bs-body-color: var(--signx-text-body);
  --bs-body-font-family: var(--font-sans);
  --bs-border-color: var(--signx-border-color);
  --bs-border-radius: var(--signx-radius-sm);
  --bs-border-radius-sm: var(--signx-radius-xs);
  --bs-border-radius-lg: var(--signx-radius-md);
  --bs-link-color: var(--signx-primary);
  --bs-link-hover-color: var(--signx-primary-700);
  --bs-box-shadow: var(--signx-shadow-sm);
  --bs-box-shadow-sm: var(--signx-shadow-sm);
  --bs-box-shadow-lg: var(--signx-shadow-lg);
  --bs-focus-ring-color: rgba(79, 70, 229, 0.2);

  --signx-s0: 0;
  --signx-s1: 0.25rem;
  --signx-s2: 0.5rem;
  --signx-s3: 0.75rem;
  --signx-s4: 1rem;
  --signx-s5: 1.25rem;
  --signx-s6: 1.5rem;
  --signx-s7: 2rem;
  --signx-s8: 2.5rem;
  --signx-s9: 3rem;
  --signx-s10: 4rem;

  /* Colors */
  --background-white: #ffffff;
  --background-light: #f8f9fa;
  --border-color: #dee2e6;
  --text-color: #212529;
  --text-muted: #6c757d;

  /* Surfaces */
  --signx-bg: var(--signx-100);
  --signx-surface: var(--signx-white);
  --signx-surface-2: #eef2ff;

  /* Radii */
  --signx-radius-sm: 8px;
  --signx-radius-md: 14px;
  --signx-radius-lg: 18px;
  --signx-radius-pill: 9999px;

  /* Shadows */
  --signx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --signx-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
  --signx-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);

  /* Spacing */
  --signx-space-xxs: 4px;
  --signx-space-xs: 8px;
  --signx-space-sm: 12px;
  --signx-space-md: 16px;
  --signx-space-lg: 24px;
  --signx-space-xl: 2rem;

  /* Typography */
  --signx-font-sans:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --signx-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New",
    monospace;

  /* Map to Bootstrap variables so `.btn`, forms, etc. can use them */
  --bs-body-font-family: var(--signx-font-sans);
  --bs-body-bg: var(--signx-bg);
  --bs-body-color: var(--signx-900);
  --bs-primary: var(--signx-primary);
  --bs-success: var(--signx-success);
  --bs-danger: var(--signx-danger);
  --bs-warning: var(--signx-warning);
  --bs-info: var(--signx-info);
  --bs-border-color: #e6eef8;

  /* Additional tokens from later sections */
  --sidebar-width: 260px;
  --sidebar-collapsed: 86px;
  --header-height: 60px;
  --signx-sidebar-expanded: 260px;
  --signx-sidebar-collapsed: 88px;
  --signx-sidebar-icon-size: 1.2rem;
  --signx-sidebar-icon-size-lg: 1.5rem;
}

/* Dark theme tokens (opt-in via html[data-theme="dark"] or body.theme-dark) */
html[data-theme="dark"],
body.theme-dark {
  --signx-bg-body: #020617;
  --signx-bg-surface: #020617;
  --signx-bg-sidebar: #020617;
  --signx-bg: #020617;
  --signx-surface: #0b1220;
  --signx-surface-2: #0f172a;

  --surface-0: #020617;
  --surface-1: #020617;
  --surface-2: #030712;
  --surface-3: #020617;

  --signx-text-heading: #e5e7eb;
  --signx-text-body: #cbd5e1;
  --signx-text-muted: #9ca3af;
  --text-strong: var(--signx-text-heading);
  --text-base: var(--signx-text-body);
  --text-soft: #94a3b8;
  --text-muted: var(--signx-text-muted);

  --signx-gray-200: #1f2937;
  --signx-gray-150: #111827;
  --signx-gray-100: #020617;

  --signx-border-color: #1f2937;
  --signx-border: color-mix(in srgb,
      var(--signx-border-color) 85%,
      transparent);
  --signx-border-strong: color-mix(in srgb,
      var(--signx-border-color) 95%,
      transparent);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);

  --focus-ring: rgba(129, 140, 248, 0.4);
  --glass-bg: rgba(8, 11, 17, 0.65);
  --glass-border: rgba(148, 163, 184, 0.15);
}

/* Automatic dark preference (optional auto mode) */
@media (prefers-color-scheme: dark) {

  html.auto-dark:not([data-theme]),
  body.auto-dark:not([data-theme]) {
    --signx-bg-body: #020617;
    --signx-bg-surface: #020617;
    --signx-bg-sidebar: #020617;
    --signx-bg: #020617;
    --signx-surface: #0b1220;
    --signx-surface-2: #0f172a;

    --surface-0: #020617;
    --surface-1: #020617;
    --surface-2: #030712;
    --surface-3: #020617;

    --signx-text-heading: #e5e7eb;
    --signx-text-body: #cbd5e1;
    --signx-text-muted: #9ca3af;
    --text-strong: var(--signx-text-heading);
    --text-base: var(--signx-text-body);
    --text-soft: #94a3b8;
    --text-muted: var(--signx-text-muted);

    --signx-gray-200: #1f2937;
    --signx-gray-150: #111827;
    --signx-gray-100: #020617;

    --signx-border-color: #1f2937;
    --signx-border: color-mix(in srgb,
        var(--signx-border-color) 85%,
        transparent);
    --signx-border-strong: color-mix(in srgb,
        var(--signx-border-color) 95%,
        transparent);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);

    --focus-ring: rgba(129, 140, 248, 0.4);
    --glass-bg: rgba(8, 11, 17, 0.65);
    --glass-border: rgba(148, 163, 184, 0.15);
  }
}

/* ============================================================
   2) Global Reset & Typography
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--signx-text-body);
  font-size: 0.95rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osignx-font-smoothing: grayscale;
  min-height: 100vh;
  right: -160px;
  bottom: -180px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(34, 211, 238, 0.22),
      transparent 60%),
    radial-gradient(circle at 40% 35%,
      rgba(109, 92, 246, 0.22),
      transparent 62%);
}

/* Soft “landing-page” background blobs like the screenshots */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  z-index: 0;
  pointer-events: none;
  filter: blur(42px);
  opacity: 0.65;
}

body::before {
  width: 520px;
  height: 520px;
  left: -140px;
  top: -120px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(109, 92, 246, 0.35),
      transparent 58%),
    radial-gradient(circle at 60% 50%,
      rgba(168, 85, 247, 0.22),
      transparent 60%);
}

body::after {
  width: 560px;
  height: 560px;
  right: -160px;
  bottom: -180px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(34, 211, 238, 0.22),
      transparent 60%),
    radial-gradient(circle at 40% 35%,
      rgba(109, 92, 246, 0.22),
      transparent 62%);
}

/* ============================================================
   Dark-mode version of the soft blob background
   Applies when: html[data-theme="dark"] OR body.theme-dark
   ============================================================ */

html[data-theme="dark"] body,
body.theme-dark {
  color: var(--signx-text-body);
  background:
    radial-gradient(circle at 50% 45%,
      rgba(34, 211, 238, 0.12),
      transparent 62%),
    radial-gradient(circle at 40% 35%,
      rgba(109, 92, 246, 0.16),
      transparent 65%),
    /* subtle deep base wash to avoid flat black */
    radial-gradient(circle at 55% 65%,
      rgba(2, 6, 23, 0.85),
      rgba(2, 6, 23, 1) 70%);
}

/* Dark-mode blobs */
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after,
body.theme-dark::before,
body.theme-dark::after {
  content: "";
  position: fixed;
  inset: auto;
  z-index: 0;
  pointer-events: none;
  filter: blur(52px);
  opacity: 0.55;
}

/* Top-left blob (purple/indigo) */
html[data-theme="dark"] body::before,
body.theme-dark::before {
  width: 560px;
  height: 560px;
  left: -180px;
  top: -160px;
  background:
    radial-gradient(circle at 32% 30%,
      rgba(109, 92, 246, 0.22),
      transparent 60%),
    radial-gradient(circle at 62% 52%,
      rgba(168, 85, 247, 0.14),
      transparent 62%);
}

/* Bottom-right blob (cyan/blue) */
html[data-theme="dark"] body::after,
body.theme-dark::after {
  width: 620px;
  height: 620px;
  right: -220px;
  bottom: -220px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(34, 211, 238, 0.14),
      transparent 62%),
    radial-gradient(circle at 42% 36%,
      rgba(99, 102, 241, 0.16),
      transparent 66%);
}

/* Optional: reduce intensity further for OLED / very dark themes */
html[data-theme="dark"].oled body::before,
html[data-theme="dark"].oled body::after,
body.theme-dark.oled::before,
body.theme-dark.oled::after {
  opacity: 0.42;
  filter: blur(58px);
}

/* Remove tap highlight on mobile */
:where(a, button) {
  -webkit-tap-highlight-color: transparent;
}

/* Accessible focus ring */
:where(:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* High-contrast focus fallback */
:focus:not(:focus-visible) {
  outline: none;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--signx-text-heading);
  font-weight: 600;
  letter-spacing: -0.025em;
}

h1,
.h1 {
  font-weight: 800;
}

h2,
.h2 {
  font-weight: 700;
}

h3,
.h3 {
  font-weight: 650;
}

h4,
.h4 {
  font-weight: 600;
}

p,
.lead {
  color: var(--text-base);
}

small,
.text-muted {
  color: var(--text-muted) !important;
}

/* Links */
a {
  color: var(--signx-primary);
  text-decoration: none;
  transition:
    color 0.2s ease,
    opacity var(--fast) ease;
}

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

/* Code */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

code {
  background: var(--signx-gray-100);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.35rem;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: var(--signx-primary);
  color: #fff;
  z-index: 9999;
}

/* ============================================================
   3) App Shell: Navbar + Sidebar + Content
   ============================================================ */

/* Top Navbar (SignX style) */
.navbar.signx-navbar {
  background: var(--signx-bg-surface);
  color: var(--text-strong);
  border-bottom: 1px solid var(--signx-border-color, #e2e8f0);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
}

.navbar.signx-navbar .navbar-brand img {
  height: 39px;
}

.navbar.signx-navbar .nav-link,
.navbar.signx-navbar .navbar-text {
  color: var(--text-base) !important;
  opacity: 0.9;
}

.navbar.signx-navbar .nav-link:hover {
  opacity: 1;
}

/* Sidebar (SignX) */
.signx-sidebar,
.sidebar {
  position: fixed;
  top: 66px;
  /* navbar height */
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);

  /* Use theme-aware variables instead of hard-coded colors */
  background: var(--sidebar-bg-light);
  border-right: 1px solid var(--sidebar-border-light);

  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  box-shadow: var(--signx-shadow-lg);
  z-index: var(--z-sidebar);
  overflow-y: auto;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scroll-thumb-light) transparent;
}

.signx-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
  width: 8px;
}

.signx-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background: var(--sidebar-scroll-thumb-light);
  border-radius: 4px;
}

/* Dark theme overrides for sidebar */
html[data-theme="dark"] .signx-sidebar,
body.theme-dark .signx-sidebar,
html[data-theme="dark"] .sidebar,
body.theme-dark .sidebar {
  background: var(--sidebar-bg-dark);
  border-right-color: var(--sidebar-border-dark);
  /* keep the same shadow token; your dark theme already tones it down via vars */
  box-shadow: var(--signx-shadow-lg);
  scrollbar-color: var(--sidebar-scroll-thumb-dark) transparent;
}

html[data-theme="dark"] .signx-sidebar::-webkit-scrollbar-thumb,
body.theme-dark .signx-sidebar::-webkit-scrollbar-thumb,
html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
body.theme-dark .sidebar::-webkit-scrollbar-thumb {
  background: var(--sidebar-scroll-thumb-dark);
}

/* Sidebar brand / header */
.sidebar-brand {
  padding: 1.25rem 1.5rem 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Sidebar section title */
.signx-sidebar .sidebar-header,
.nav-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(15, 23, 42, 0.55);
  padding: 1px 1px 1px;
  text-transform: uppercase;
}

/* Sidebar navigation */
.signx-sidebar .nav,
.sidebar .nav {
  padding: 0 0.15rem 0.15rem;
}

.signx-sidebar .nav .nav-item+.nav-item,
.sidebar .nav .nav-item+.nav-item {
  margin-top: 0.25rem;
}

/* Sidebar nav links – scoped so we don't affect all .nav-link globally */
.signx-sidebar .nav-link,
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(15, 23, 42, 0.72);
  border: 1px solid transparent;
  font-weight: 800;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s,
    color 0.15s;
}

.signx-sidebar .nav-link i,
.signx-sidebar .nav-link svg,
.sidebar .nav-link i,
.sidebar .nav-link svg {
  width: 1.25rem;
  opacity: 0.8;
}

.signx-sidebar .nav-link:hover,
.sidebar .nav-link:hover {
  background: rgba(109, 92, 246, 0.08);
  border-color: rgba(109, 92, 246, 0.18);
  color: var(--lms-primary-800);
  transform: translateY(-1px);
  text-decoration: none;
}

.signx-sidebar .nav-link.active,
.sidebar .nav-link.active {
  background: rgba(109, 92, 246, 0.12);
  border-color: rgba(109, 92, 246, 0.26);
  color: var(--lms-primary-800);
  box-shadow: 0 10px 18px rgba(109, 92, 246, 0.12);
  text-decoration: none;
}

/* SignX collapsible groups */
.signx-sidebar .nav-group>.nav-link::after {
  content: "";
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  transform: rotate(-45deg);
  transition: transform var(--normal);
}

.signx-sidebar .nav-group.open>.nav-link::after {
  transform: rotate(45deg);
}

.signx-sidebar .nav-group .nav {
  margin: 0.25rem 0 0.5rem 2.25rem;
  border-left: 2px dashed rgba(148, 163, 184, 0.4);
  padding-left: 0.75rem;
}

/* Sidebar collapsed */
body.sidebar-collapsed .signx-sidebar,
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
}

body.sidebar-collapsed .signx-sidebar .nav-group .nav,
body.sidebar-collapsed .sidebar .nav-group .nav {
  display: none;
}

.signx-content {
  margin-left: var(--sidebar-width);
  padding: var(--signx-space-lg);
  min-height: calc(100vh - var(--header-height));
  background-color: var(--background-white);
  transition: all 0.3s ease;
  flex: 1;
}

/* When sidebar is collapsed */
body.sidebar-collapsed .signx-content {
  margin-left: var(--sidebar-collapsed);
}

/* When secondary sidebar is present */
.signx-content.has-secondary-sidebar {
  margin-left: calc(var(--sidebar-width) + var(--secondary-sidebar-width));
  padding: var(--signx-space-lg);
}

/* When both sidebars are collapsed */
body.sidebar-collapsed .signx-content.has-secondary-sidebar {
  margin-left: calc(var(--sidebar-collapsed) + var(--secondary-sidebar-width));
}

/* When secondary sidebar is collapsed */
body.secondary-sidebar-collapsed .signx-content.has-secondary-sidebar {
  margin-left: var(--sidebar-width);
}

body.sidebar-collapsed.secondary-sidebar-collapsed .signx-content.has-secondary-sidebar {
  margin-left: var(--sidebar-collapsed);
}

/* Secondary Sidebar */
.secondary-sidebar {
  position: fixed;
  top: var(--header-height);
  left: var(--sidebar-width);
  width: var(--secondary-sidebar-width);
  height: calc(100vh - var(--header-height));
  background: var(--background-light);
  border-right: 1px solid var(--border-color);
  z-index: 1000;
  transition: all 0.3s ease;
  overflow-y: auto;
  transform: translateX(0);
}

/* SignX secondary sidebar variant */
.secondary-sidebar.signx-sidebar {
  background: var(--sidebar-bg-light);
  border-right: 1px solid var(--sidebar-border-light);
  box-shadow: var(--signx-shadow-lg);
}

html[data-theme="dark"] .secondary-sidebar.signx-sidebar,
body.theme-dark .secondary-sidebar.signx-sidebar {
  background: var(--sidebar-bg-dark);
  border-right-color: var(--sidebar-border-dark);
}

/* When primary sidebar is collapsed */
body.sidebar-collapsed .secondary-sidebar {
  left: var(--sidebar-collapsed);
}

/* When secondary sidebar is collapsed */
body.secondary-sidebar-collapsed .secondary-sidebar {
  transform: translateX(-100%);
}

/* Responsive design */
@media (max-width: 991.98px) {
  .secondary-sidebar {
    left: 0;
    width: 280px;
    transform: translateX(-100%);
    z-index: 1050;
  }

  body.sidebar-collapsed .secondary-sidebar {
    left: 0;
  }

  body.secondary-sidebar-open .secondary-sidebar {
    transform: translateX(0);
  }

  /* Overlay backdrop for mobile */
  .secondary-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
  }
}

/* Adjust content padding for mobile */
@media (max-width: 991.98px) {
  .signx-content {
    margin-left: 0 !important;
    padding: var(--signx-space-md);
  }

  .signx-content.has-secondary-sidebar {
    margin-left: 0 !important;
  }
}

/* For very small screens */
@media (max-width: 575.98px) {
  .signx-content {
    padding: var(--signx-space-sm);
  }

  .secondary-sidebar {
    width: 250px;
  }
}

/* Content wrapper for better structure */
.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Container within content */
.content-container {
  background: var(--background-white);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: var(--signx-space-lg);
  margin-bottom: var(--signx-space-lg);
}

/* Page headers within content */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--signx-space-lg);
  padding-bottom: var(--signx-space-md);
  border-bottom: 1px solid var(--border-color);
}

.content-header h1,
.content-header h2,
.content-header h3 {
  margin: 0;
  font-weight: 600;
}

/* Responsive content layout */
@media (max-width: 991.98px) {
  .content-wrapper {
    padding: 0 10px;
  }

  .content-container {
    padding: var(--signx-space-md);
  }
}

/* Mobile */
@media (max-width: 991.98px) {

  .signx-sidebar,
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--normal) ease;
  }

  body.sidebar-open .signx-sidebar,
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .signx-content {
    margin-left: 0;
  }
}

/* Full-width pages (no sidebar gap) */
main.signx-content.signx-full,
body .signx-content.signx-full,
body.sidebar-collapsed .signx-content.signx-full {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.signx-content.signx-full .container-fluid {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (max-width: 768px) {
  .signx-content.signx-full .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============================================================
   4) Page Hero / Subheader
   ============================================================ */

.signx-pagebar {
  background:
    radial-gradient(1200px 220px at left -300px top -100px,
      rgba(255, 255, 255, 0.25),
      transparent),
    linear-gradient(180deg, var(--surface-1), transparent 65%);
  border: 1px solid var(--signx-gray-200);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
}

.signx-breadcrumb a {
  color: var(--text-soft);
}

.signx-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: var(--signx-gray-400);
}

@media (max-width: 767.98px) {
  .signx-pagebar {
    border-radius: var(--radius-md);
    padding: 0.85rem 0.85rem;
  }
}

/* ============================================================
   5) Cards & Widgets (SignX)
   ============================================================ */

.card {
  background: var(--signx-bg-surface);
  border: 1px solid var(--signx-border-color, #e2e8f0);
  border-radius: var(--signx-radius);
  box-shadow: var(--signx-shadow-sm);
  margin-bottom: 1.5rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--signx-shadow);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--signx-border-color, #e2e8f0);
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  color: var(--signx-text-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-body {
  padding: 1.5rem;
}

/* SignX-specific card variant */
.card.signx-card {
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
}

.card.signx-card .card-header {
  background: linear-gradient(180deg, var(--surface-1), transparent);
  border-bottom-color: var(--signx-gray-200);
  font-weight: 600;
  color: var(--text-strong);
}

.card.signx-card .card-footer {
  background: var(--surface-1);
  border-top-color: var(--signx-gray-200);
}

/* KPI / Metric tiles */
.metric {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1rem;
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.metric .metric-label {
  font-size: 0.875rem;
  color: var(--text-soft);
}

.metric .metric-value {
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.metric .metric-delta {
  font-size: 0.825rem;
  font-weight: 600;
}

.metric .delta-up {
  color: var(--signx-success);
}

.metric .delta-down {
  color: var(--signx-danger);
}

.metric-label {
  color: var(--signx-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--signx-text-heading);
  line-height: 1.2;
}

.metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.metric-badge.positive {
  background: #dcfce7;
  color: #166534;
}

.metric-badge.negative {
  background: #fee2e2;
  color: #991b1b;
}

.metric-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #e0e7ff;
  color: var(--signx-primary);
  font-size: 1.25rem;
}

/* Analytics / chart card canvas holder */
.chart-card {
  background: var(--surface-0);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem;
}

.chart-card .chart-canvas {
  border-radius: var(--radius-md);
  background-image: var(--widget-grid);
  background-size:
    24px 24px,
    24px 24px;
  background-color: var(--surface-2);
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

/* Colorful module cards */
.module-card {
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--fast) ease,
    box-shadow var(--fast) ease,
    filter var(--fast) ease;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.03);
}

.module-card .icon {
  font-size: 1.75rem;
  opacity: 0.9;
}

.module-card h4 {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.module-card p {
  color: rgba(255, 255, 255, 0.85);
}

.module-card.teal {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.module-card.navy {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
}

.module-card.blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.module-card.purple {
  background: linear-gradient(135deg, #4c1d95, #6d28d9);
}

.module-card.light {
  background: linear-gradient(135deg, #a5b4fc, #4f46e5);
}

.module-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -60px;
  bottom: -60px;
  background: radial-gradient(closest-side,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0));
  transform: rotate(25deg);
}

/* HR KPI variants */
.signx-hr-kpi .metric {
  border-radius: var(--radius-lg);
  border: 1px solid var(--signx-gray-200);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.signx-hr-kpi .metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px;
}

.metric--primary {
  background: linear-gradient(135deg,
      rgba(79, 70, 229, 0.08),
      rgba(199, 210, 254, 0.28));
}

.metric--primary::before {
  background: linear-gradient(180deg, #4f46e5, #818cf8);
}

.metric--success {
  background: linear-gradient(135deg,
      rgba(16, 185, 129, 0.06),
      rgba(209, 250, 229, 0.6));
}

.metric--success::before {
  background: linear-gradient(180deg, #10b981, #22c55e);
}

.metric--warning {
  background: linear-gradient(135deg,
      rgba(245, 158, 11, 0.06),
      rgba(254, 243, 199, 0.75));
}

.metric--warning::before {
  background: linear-gradient(180deg, #f59e0b, #fbbf24);
}

.metric--info {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.06),
      rgba(219, 234, 254, 0.75));
}

.metric--info::before {
  background: linear-gradient(180deg, #3b82f6, #22d3ee);
}

@media (max-width: 1199.98px) {
  .metric {
    padding: 0.85rem 0.85rem;
  }
}

/* Small stat widgets */
.stat-mini {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
}

.stat-mini-link .stat-mini {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.stat-mini-link:hover .stat-mini,
.stat-mini-link:focus-visible .stat-mini {
  transform: translateY(-1px);
  border-color: var(--signx-primary);
  box-shadow: var(--shadow-md);
}

.stat-mini-link:focus-visible {
  outline: none;
}

.stat-mini .label {
  font-size: 0.75rem;
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.stat-mini .value {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.stat-mini .bar {
  height: 0.4rem;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.stat-mini .bar>span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--signx-primary), var(--signx-blue-1));
}

/* Glass panel */
.glass {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0.15));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
}

/* Soft container */
.container-soft {
  background: var(--surface-0);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

/* Dashboard grid helper */
.dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}

@media (max-width: 1199.98px) {
  .dashboard-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 767.98px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-6 {
  grid-column: span 6;
}

.span-8 {
  grid-column: span 8;
}

.span-12 {
  grid-column: 1 / -1;
}

/* ============================================================
   6) Buttons
   ============================================================ */

/* =========================================================
   BUTTONS (pill + gradient like screenshots)
   ========================================================= */
.btn-lite,
.btn-primary-lite,
.btn-danger-lite,
.btn-success-lite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lms-border);
  background: var(--lms-surface);
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.76);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.btn-lite:hover {
  transform: translateY(-1px);
  border-color: rgba(109, 92, 246, 0.22);
  box-shadow: var(--lms-shadow);
  text-decoration: none;
}

.btn-primary-lite {
  background: var(--lms-grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 26px rgba(109, 92, 246, 0.22);
}

.btn-primary-lite:hover {
  box-shadow: 0 18px 34px rgba(109, 92, 246, 0.26);
}

.btn-danger-lite {
  background: #ef4444;
  border-color: transparent;
  color: #fff;
}

.btn-success-lite {
  background: #10b981;
  border-color: transparent;
  color: #fff;
}

/* Bootstrap buttons – keep them aligned with this theme */
.btn.btn-primary {
  background: var(--lms-grad-primary);
  border-color: transparent;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(109, 92, 246, 0.2);
}

.btn.btn-primary:hover {
  filter: saturate(1.05);
  box-shadow: 0 18px 34px rgba(109, 92, 246, 0.26);
}

.btn.btn-outline-primary {
  border-radius: 999px;
  border-color: rgba(109, 92, 246, 0.3);
  color: var(--lms-primary-800);
  font-weight: 900;
}

.btn.btn-outline-primary:hover {
  background: rgba(109, 92, 246, 0.1);
  border-color: rgba(109, 92, 246, 0.34);
}

.btn.btn-sm {
  border-radius: 999px;
  font-weight: 900;
}

.btn-signx {
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-font-size: 0.95rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--signx-radius-pill);
  --bs-btn-border-width: 1px;
  --bs-btn-focus-shadow-rgb: var(--signx-primary-rgb);
  border-radius: var(--signx-radius-pill);
  font-weight: var(--bs-btn-font-weight);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  box-shadow: var(--signx-shadow-sm);
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast),
    border-color var(--fast),
    color var(--fast);
}

.btn-signx:hover {
  transform: translateY(-1px);
  box-shadow: var(--signx-shadow);
}

.btn-signx:active {
  transform: translateY(0);
  box-shadow: var(--signx-shadow-sm);
}

.btn-signx:disabled,
.btn-signx.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.btn-outline-signx,
.btn-signx-outline {
  --bs-btn-color: var(--signx-primary);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-primary) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--signx-primary);
  --bs-btn-active-bg: var(--signx-primary-700);
  --bs-btn-active-border-color: var(--signx-primary-700);
  border-radius: var(--signx-radius-sm);
  font-weight: 600;
  box-shadow: none;
}

.btn-signx-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--signx-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-primary) 12%, transparent);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--signx-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--signx-primary) 18%, transparent);
  box-shadow: none;
}

.btn-signx-secondary {
  --bs-btn-bg: var(--signx-secondary);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-secondary) 70%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-secondary) 85%, #111827);
  --bs-btn-hover-border-color: var(--signx-secondary);
  --bs-btn-active-bg: var(--signx-secondary);
}

.btn-signx-success {
  --bs-btn-bg: var(--signx-success);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-success) 70%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-success) 85%, #047857);
  --bs-btn-hover-border-color: var(--signx-success);
  --bs-btn-active-bg: var(--signx-success);
}

.btn-signx-warning {
  --bs-btn-bg: var(--signx-warning);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-warning) 70%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-warning) 85%, #b45309);
  --bs-btn-hover-border-color: var(--signx-warning);
  --bs-btn-active-bg: var(--signx-warning);
}

.btn-signx-danger {
  --bs-btn-bg: var(--signx-danger);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-danger) 70%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-danger) 85%, #b91c1c);
  --bs-btn-hover-border-color: var(--signx-danger);
  --bs-btn-active-bg: var(--signx-danger);
}

.btn-signx-info {
  --bs-btn-bg: var(--signx-info);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-info) 70%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-info) 85%, #1d4ed8);
  --bs-btn-hover-border-color: var(--signx-info);
  --bs-btn-active-bg: var(--signx-info);
}

.btn-signx-dark {
  --bs-btn-bg: var(--signx-gray-800);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-gray-800) 70%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-gray-900);
  --bs-btn-hover-border-color: var(--signx-gray-900);
  --bs-btn-active-bg: var(--signx-gray-900);
}

.btn-signx-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.btn-signx-lg {
  padding: 0.7rem 1.25rem;
  font-size: 1rem;
}

.btn-signx-xl {
  padding: 0.9rem 1.6rem;
  font-size: 1.05rem;
}

.btn-signx-pill {
  border-radius: var(--signx-radius-pill);
}

.btn-signx-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--signx-radius-md);
}

.btn-signx-block {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.btn-signx-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-signx-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

.btn-signx-outline.btn-signx-loading::before,
.btn-signx-ghost.btn-signx-loading::before {
  border-color: rgba(79, 70, 229, 0.35);
  border-top-color: var(--signx-primary);
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Subtle buttons */
.btn-subtle {
  background: var(--surface-2);
  border: 1px solid var(--signx-gray-200);
  color: var(--text-base);
  border-radius: 10px;
}

.btn-subtle:hover {
  background: var(--surface-3);
}

/* Chip button */
.btn-chip {
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  border: 1px solid var(--signx-gray-200);
  background: var(--surface-1);
}

.btn-chip .bi {
  font-size: 1rem;
}

/* Legacy alias */
.btn-nizam {
  background-color: var(--signx-primary);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
}

.btn-nizam:hover {
  background-color: var(--signx-blue-3);
}

/* Logout button in header */
.logout button {
  background-color: var(--signx-gray-600);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
}

.logout button:hover {
  background-color: var(--signx-indigo);
}

/* Sticky form actions footer */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.98));
  backdrop-filter: saturate(1.1) blur(6px);
  border-top: 1px solid var(--signx-gray-200);
  padding: 0.75rem 0.5rem;
}

html[data-theme="dark"] .form-actions-sticky,
body.theme-dark .form-actions-sticky {
  background: linear-gradient(180deg,
      rgba(8, 11, 17, 0.75),
      rgba(8, 11, 17, 0.95));
}

/* ============================================================
   7) Forms & Inputs
   ============================================================ */

.form-control,
.form-select {
  border: 1px solid var(--signx-border-color, #e2e8f0);
  border-radius: var(--signx-radius-sm);
  padding: 0.65rem 1rem;
  font-size: 0.925rem;
  background-color: #fff;
  transition: all 0.2s;
  color: var(--text-base);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--signx-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
  background: var(--surface-1);
}

.input-group-text {
  border-radius: 10px;
  border-color: var(--signx-gray-200);
  background: var(--surface-2);
  color: var(--text-soft);
}

/* Switch */
.form-switch .form-check-input {
  width: 2.6em;
  height: 1.4em;
  background-color: var(--signx-gray-200);
  border-color: var(--signx-gray-300);
}

.form-switch .form-check-input:checked {
  background-color: var(--signx-primary);
  border-color: var(--signx-primary);
}

/* Floating labels */
.form-floating>label {
  color: var(--text-soft);
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
  color: var(--signx-primary);
}

/* Select chips */
.select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--signx-gray-200);
  border-radius: 10px;
  background: var(--surface-0);
}

.select-chips .chip {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--signx-gray-200);
  color: var(--text-soft);
  font-size: 0.825rem;
  font-weight: 600;
}

/* Checkboxes */
.form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
}

.form-check-input:checked {
  background-color: var(--signx-primary);
  border-color: var(--signx-primary);
}

/* Validation */
.form-text {
  color: var(--text-muted);
}

.is-valid,
.was-validated .form-control:valid {
  border-color: var(--signx-success) !important;
}

.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--signx-danger) !important;
}

/* Dark mode forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
body.theme-dark .form-control,
body.theme-dark .form-select {
  background: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25);
}

/* ============================================================
   8) Tables (SignX-style)
   ============================================================ */

.table.signx-table {
  --row-hover: rgba(79, 70, 229, 0.06);
  --row-selected: rgba(79, 70, 229, 0.12);
  --row-border: var(--signx-gray-200);
  --header-bg: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  --header-text: var(--text-strong);

  background: var(--surface-0);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0;
}

/* Header */
.table.signx-table thead {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.table.signx-table thead th {
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--row-border);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.6rem;
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

.table.signx-table thead th.th-sort {
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
}

.table.signx-table thead th.th-sort::after {
  content: "⇅";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  opacity: 0.45;
}

.table.signx-table thead th.th-sort.sort-asc::after {
  content: "↑";
  opacity: 0.85;
}

.table.signx-table thead th.th-sort.sort-desc::after {
  content: "↓";
  opacity: 0.85;
}

/* Body */
.table.signx-table tbody td {
  color: var(--text-base);
  vertical-align: middle;
  border-color: var(--row-border);
  font-size: 0.9rem;
}

/* Zebra */
.table.signx-table.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rgba(148, 163, 184, 0.04);
}

/* Hover */
.table.signx-table.table-hover>tbody>tr:hover>* {
  background: var(--row-hover);
}

.table.signx-table tbody tr.is-selected>* {
  background: var(--row-selected);
  box-shadow: inset 3px 0 0 var(--signx-primary);
}

.table.signx-table tbody tr:hover {
  background: var(--row-hover);
}

.table.signx-table tbody tr.selected {
  background: var(--row-selected);
  outline: 1px dashed var(--signx-indigo);
  outline-offset: -1px;
}

/* Dense variant */
.table.signx-table.signx-dense tbody td,
.table.signx-table.signx-dense thead th {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* Elevated row */
.table.signx-table tbody tr.row-elevated>* {
  background: linear-gradient(90deg,
      rgba(79, 70, 229, 0.02),
      rgba(199, 210, 254, 0.06));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Status pills inside table */
.table-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--signx-gray-200);
  background: var(--surface-1);
  color: var(--text-soft);
}

.table-status-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--signx-gray-300);
}

.table-status-pill.success {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.05);
  color: var(--signx-success);
}

.table-status-pill.success::before {
  background: var(--signx-success);
}

.table-status-pill.warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.05);
  color: var(--signx-warning);
}

.table-status-pill.warning::before {
  background: var(--signx-warning);
}

.table-status-pill.danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.05);
  color: var(--signx-danger);
}

.table-status-pill.danger::before {
  background: var(--signx-danger);
}

.table-status-pill.info {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.05);
  color: var(--signx-info);
}

.table-status-pill.info::before {
  background: var(--signx-info);
}

/* Actions column */
.table.signx-table td.table-actions {
  white-space: nowrap;
  text-align: right;
}

.table.signx-table td.table-actions .btn,
.table.signx-table td.table-actions .btn-sm,
.table.signx-table td.table-actions .btn-link {
  padding: 0.2rem 0.4rem;
}

/* Empty state row */
.table-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 1rem !important;
  font-size: 0.9rem;
}

/* Table toolbar */
.table-toolbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}

/* Sticky header */
.signx-table-wrapper.signx-table-stickyhead thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Mobile stacked layout */
@media (max-width: 767.98px) {

  .signx-table-wrapper.signx-table-mobile table,
  .signx-table-wrapper.signx-table-mobile tbody,
  .signx-table-wrapper.signx-table-mobile tr,
  .signx-table-wrapper.signx-table-mobile td,
  .signx-table-wrapper.signx-table-mobile thead {
    display: block;
    width: 100%;
  }

  .signx-table-wrapper.signx-table-mobile thead {
    display: none;
  }

  .signx-table-wrapper.signx-table-mobile tbody tr {
    border-bottom: 1px solid var(--signx-gray-200);
    padding: 0.55rem 0.75rem;
  }

  .signx-table-wrapper.signx-table-mobile tbody tr+tr {
    margin-top: 0.5rem;
  }

  .signx-table-wrapper.signx-table-mobile tbody td {
    border: none;
    padding: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
  }

  .signx-table-wrapper.signx-table-mobile tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
  }

  .signx-table-wrapper.signx-table-mobile tbody td.table-actions {
    justify-content: flex-end;
  }
}

/* Simple table .table-custom */
.table-custom {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-custom th {
  background: #f1f5f9;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--signx-text-muted);
  padding: 1rem;
  border-top: 1px solid var(--signx-border-color, #e2e8f0);
  border-bottom: 1px solid var(--signx-border-color, #e2e8f0);
}

.table-custom td {
  padding: 1rem;
  border-bottom: 1px solid var(--signx-border-color, #e2e8f0);
  color: var(--signx-text-body);
  vertical-align: middle;
}

.table-custom tr:last-child td {
  border-bottom: none;
}

/* Responsive override */
.table-responsive {
  overflow: visible !important;
}

/* ============================================================
   9) Badges, Chips, Pills
   ============================================================ */

.badge-soft {
  padding: 0.35em 0.65em;
  font-weight: 600;
  border-radius: 0.375rem;
  border: 1px solid transparent;
}

/* Note: .badge-soft-* color classes defined in Badge section below */

/* Old SignX style badges using .badge-soft.primary etc. */
.badge-soft.primary {
  background: rgba(79, 70, 229, 0.1);
  color: var(--signx-primary);
  border-color: rgba(79, 70, 229, 0.25);
}

.badge-soft.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--signx-success);
  border-color: rgba(16, 185, 129, 0.25);
}

.badge-soft.warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--signx-warning);
  border-color: rgba(245, 158, 11, 0.25);
}

.badge-soft.danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--signx-danger);
  border-color: rgba(239, 68, 68, 0.25);
}

.badge-soft.info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--signx-info);
  border-color: rgba(59, 130, 246, 0.25);
}

.badge-soft.indigo {
  background: rgba(30, 64, 175, 0.1);
  color: var(--signx-indigo);
  border-color: rgba(30, 64, 175, 0.25);
}

/* Status dot chip */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--signx-gray-200);
  font-weight: 600;
  color: var(--text-soft);
}

.status-dot::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--signx-gray-300);
}

.status-dot.ok::before {
  background: var(--signx-success);
}

.status-dot.warn::before {
  background: var(--signx-warning);
}

.status-dot.error::before {
  background: var(--signx-danger);
}

.status-dot.idle::before {
  background: var(--signx-gray-300);
}

/* Text gradient */
.text-gradient-primary {
  background: linear-gradient(135deg, var(--signx-primary), #818cf8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   10) Alerts, Toasts, Modals
   ============================================================ */

.alert.signx {
  border-radius: var(--radius-md);
  border: 1px solid var(--signx-gray-200);
  box-shadow: var(--shadow-sm);
}

.alert.signx.alert-primary {
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.06), transparent);
  border-color: rgba(79, 70, 229, 0.25);
  color: #312e81;
}

.alert.signx.alert-success {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), transparent);
  border-color: rgba(16, 185, 129, 0.25);
  color: #065f46;
}

.alert.signx.alert-warning {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent);
  border-color: rgba(245, 158, 11, 0.28);
  color: #92400e;
}

.alert.signx.alert-danger {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.07), transparent);
  border-color: rgba(239, 68, 68, 0.27);
  color: #991b1b;
}

.alert.signx.alert-info {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.07), transparent);
  border-color: rgba(59, 130, 246, 0.27);
  color: #1d4ed8;
}

/* Toast */
.toast.signx {
  border-radius: var(--radius-md);
  border: 1px solid var(--signx-gray-200);
  box-shadow: var(--shadow-md);
  background: var(--surface-0);
}

/* Modal */
.modal-content.signx {
  border-radius: var(--radius-lg);
  border: 1px solid var(--signx-gray-200);
  box-shadow: var(--shadow-lg);
  background: var(--surface-0);
}

.modal-header.signx {
  background: linear-gradient(180deg, var(--surface-1), transparent);
  border-bottom-color: var(--signx-gray-200);
}

.modal-footer.signx {
  background: var(--surface-1);
  border-top-color: var(--signx-gray-200);
}

/* Dark mode alerts & modal */
html[data-theme="dark"] .alert.signx,
body.theme-dark .alert.signx {
  border-color: #1f2937;
}

html[data-theme="dark"] .modal-content.signx,
body.theme-dark .modal-content.signx {
  background: #020617;
  border-color: #1f2937;
}

/* ============================================================
   11) Navs, Tabs & Pills
   ============================================================ */

.signx-tabs .nav-link {
  border-radius: 999px;
  margin-right: 0.35rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.signx-tabs .nav-link.active {
  background: var(--signx-primary);
  color: #fff;
  border-color: var(--signx-primary);
}

/* Pills */
.nav-pills.signx .nav-link {
  border-radius: 999px;
  color: var(--signx-indigo);
  background: var(--surface-2);
  border: 1px solid var(--signx-gray-200);
  margin: 0.25rem;
}

.nav-pills.signx .nav-link.active {
  background: var(--signx-primary);
  color: #fff;
  border-color: var(--signx-primary);
}

/* ============================================================
   12) Progress, Steps, Timeline
   ============================================================ */

.progress.signx {
  height: 0.6rem;
  background: var(--surface-2);
  border-radius: 999px;
}

.progress.signx .progress-bar {
  background: linear-gradient(90deg, var(--signx-primary), var(--signx-blue-1));
  border-radius: 999px;
}

/* Steps (horizontal) */
.steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
}

.step {
  position: relative;
  text-align: center;
  padding: 0.5rem 0.25rem;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.9rem;
}

.step::before {
  content: "";
  display: block;
  margin: 0 auto 0.5rem auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--signx-gray-200);
}

.step.active {
  color: var(--signx-primary);
}

.step.active::before {
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0)),
    var(--signx-primary);
  border-color: var(--signx-primary);
}

.step.done {
  color: var(--signx-success);
}

.step.done::before {
  background: var(--signx-success);
  border-color: var(--signx-success);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 1.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.55rem;
  bottom: 0;
  width: 2px;
  background: var(--signx-gray-200);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.25rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0.2rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signx-primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
}

/* ============================================================
   13) Kanban & Calendar
   ============================================================ */

.kanban {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}

@media (max-width: 1200px) {
  .kanban {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .kanban {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .kanban {
    grid-template-columns: 1fr;
  }
}

.kanban-col {
  background: var(--surface-0);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kanban-col .col-header {
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: var(--text-strong);
  background: linear-gradient(180deg, var(--surface-1), transparent);
  border-bottom: 1px solid var(--signx-gray-200);
}

.kanban-col .col-body {
  padding: 0.75rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.kanban-card {
  background: var(--surface-1);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem;
  box-shadow: var(--shadow-sm);
}

.kanban-card .title {
  font-weight: 700;
  color: var(--text-strong);
}

.kanban-card .meta {
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* Calendar stub */
.calendar {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface-0);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
}

.calendar .day {
  background: var(--surface-1);
  border: 1px dashed var(--signx-gray-200);
  border-radius: var(--radius-md);
  min-height: 90px;
  padding: 0.4rem;
  color: var(--text-soft);
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.calendar .day .date {
  font-weight: 700;
  color: var(--text-strong);
}

/* ============================================================
   14) Skeletons & Loaders
   ============================================================ */

.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
      var(--signx-gray-150),
      var(--signx-gray-200),
      var(--signx-gray-150));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
  min-height: 1rem;
}

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

  100% {
    background-position: -200% 0;
  }
}

/* Loader ring */
.loader-ring {
  --size: 34px;
  --thickness: 3px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--thickness) solid rgba(15, 23, 42, 0.1);
  border-top-color: var(--signx-primary);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   15) NGO Tags, Project Cards, Empty States
   ============================================================ */

.tag {
  --bg: var(--surface-2);
  --bd: var(--signx-gray-200);
  --fg: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--bd);
  color: var(--fg);
  font-weight: 700;
  font-size: 0.8rem;
}

.tag .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.tag-education {
  --bg: #e0f2fe;
  --bd: #bfdbfe;
  --fg: #1d4ed8;
}

.tag-gbv {
  --bg: #fee2e2;
  --bd: #fecaca;
  --fg: #b91c1c;
}

.tag-drr {
  --bg: #fef3c7;
  --bd: #fde68a;
  --fg: #b45309;
}

.tag-wash {
  --bg: #e0fdfa;
  --bd: #a5f3fc;
  --fg: #0e7490;
}

.tag-livelihood {
  --bg: #ecfdf5;
  --bd: #bbf7d0;
  --fg: #15803d;
}

/* Project / Grant card */
.project-card {
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.project-card .pc-header {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.08), transparent);
  border-bottom: 1px solid var(--signx-gray-200);
}

.project-card .pc-body {
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.5rem;
}

.project-card .pc-footer {
  padding: 0.65rem 1rem;
  background: var(--surface-1);
  border-top: 1px solid var(--signx-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  border: 2px dashed var(--signx-gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.empty-state .icon {
  font-size: 2.25rem;
  color: var(--signx-gray-400);
  margin-bottom: 0.5rem;
}

.empty-state h5 {
  color: var(--text-strong);
  font-weight: 700;
}

.empty-state p {
  color: var(--text-soft);
}

/* ============================================================
   16) Notifications / Bell Dropdown
   ============================================================ */

.notify-list {
  min-width: 340px;
  max-width: 420px;
}

.notify-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  align-items: flex-start;
  border-radius: 10px;
  transition: background var(--fast) ease;
}

.notify-item:hover {
  background: var(--surface-1);
}

.notify-item .ni-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--signx-primary);
  margin-top: 0.35rem;
}

.notify-item .ni-title {
  font-weight: 700;
  color: var(--text-strong);
}

.notify-item .ni-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================================
   17) Login / Auth Panels
   ============================================================ */

.auth-card {
  background: var(--surface-0);
  border: 1px solid var(--signx-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auth-hero {
  background:
    radial-gradient(900px 200px at center -100px,
      rgba(79, 70, 229, 0.18),
      transparent 70%),
    linear-gradient(180deg, var(--surface-1), transparent);
  padding: 2rem 1.25rem;
  color: var(--text-strong);
}

.auth-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* ============================================================
   18) File Management Grid
   ============================================================ */

.file-card {
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--signx-radius-sm);
  padding: 1rem;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.file-card:hover {
  background-color: #f1f5f9;
  border-color: var(--signx-border-color, #e2e8f0);
  transform: translateY(-2px);
}

.file-icon-lg {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--signx-secondary);
}

.file-name {
  font-weight: 500;
  color: var(--signx-text-heading);
  display: block;
}

.file-meta {
  font-size: 0.75rem;
  color: var(--signx-text-muted);
}

/* ============================================================
   19) HR Workspace Cards (SignX HR)
   ============================================================ */

/* Base card */
.hr-work-card {
  display: block;
  position: relative;
  border-radius: 18px;
  padding: 1.2rem 1.35rem;
  text-decoration: none;
  color: inherit;
  background: radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.18),
      rgba(15, 23, 42, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
  min-height: 160px;
}

.hr-work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
      rgba(255, 255, 255, 0.18),
      transparent 55%);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
}

.hr-work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
  border-color: rgba(255, 255, 255, 0.24);
}

.hr-work-card:hover::before {
  opacity: 1;
}

/* Layout inside card */
.hr-card-top {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.hr-icon-pill {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.22);
  color: #ffffff;
  font-size: 1.3rem;
}

.hr-card-main {
  flex: 1 1 auto;
}

.hr-card-title {
  font-size: 0.98rem;
  font-weight: 600;
}

.hr-card-desc {
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* Footer row */
.hr-card-footer {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

.badge-soft.hr-tag {
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
}

.hr-link-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-weight: 500;
  opacity: 0.9;
}

.hr-work-card:hover .hr-link-hint i {
  transform: translateX(2px);
}

.hr-link-hint i {
  transition: transform 0.18s ease-out;
}

/* Tone variants for HR cards */
.hr-work-card.tone-blue {
  background: linear-gradient(135deg,
      rgba(79, 70, 229, 0.95),
      rgba(129, 140, 248, 0.96));
  color: #f8fbff;
}

.hr-work-card.tone-teal {
  background: linear-gradient(135deg,
      rgba(129, 140, 248, 0.98),
      rgba(224, 231, 255, 0.98));
  color: #020617;
}

.hr-work-card.tone-purple {
  background: linear-gradient(135deg,
      rgba(55, 48, 163, 0.98),
      rgba(129, 140, 248, 0.96));
  color: #f9fbff;
}

.hr-work-card.tone-navy {
  background: linear-gradient(135deg,
      rgba(15, 23, 42, 0.98),
      rgba(55, 48, 163, 0.96));
  color: #fdfdff;
}

.hr-work-card.tone-teal .badge-soft.hr-tag,
.hr-work-card.tone-teal .hr-icon-pill {
  background: rgba(15, 23, 42, 0.1);
}

.hr-work-card.tone-blue .hr-icon-pill {
  background: rgba(15, 23, 42, 0.18);
}

.hr-work-card.tone-purple .hr-icon-pill,
.hr-work-card.tone-navy .hr-icon-pill {
  background: rgba(15, 23, 42, 0.24);
}

/* Mini metrics on HR page */
.mini-metric {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(148, 163, 184, 0.4);
}

.mini-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
  margin-bottom: 0.15rem;
}

.mini-value {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ============================================================
   20) Utilities & Accessibility
   ============================================================ */

.shadow-smx {
  box-shadow: var(--shadow-sm) !important;
}

.shadow-mdx {
  box-shadow: var(--shadow-md) !important;
}

.shadow-lgx {
  box-shadow: var(--shadow-lg) !important;
}

.rounded-xs {
  border-radius: var(--radius-xs) !important;
}

.rounded-smx {
  border-radius: var(--radius-sm) !important;
}

.rounded-mdx {
  border-radius: var(--radius-md) !important;
}

.rounded-lgx {
  border-radius: var(--radius-lg) !important;
}

.rounded-xlx {
  border-radius: var(--radius-xl) !important;
}

.text-soft {
  color: var(--text-soft) !important;
}

.text-strong {
  color: var(--text-strong) !important;
}

.hr-soft {
  height: 1px;
  background: var(--signx-gray-200);
  border: 0;
  opacity: 1;
}

/* Larger hit areas on touch */
@media (pointer: coarse) {

  .btn,
  .nav-link,
  .dropdown-item {
    min-height: 44px;
  }
}

/* Footer / Credits */
.signx-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--signx-gray-200);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   21) Print Styles
   ============================================================ */

@media print {

  .signx-sidebar,
  .sidebar,
  .navbar,
  .btn,
  .alert,
  .toast,
  .modal {
    display: none !important;
  }

  .signx-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .card,
  .table {
    box-shadow: none !important;
  }
}

/* ============================================================
   SignX Shell Layout (ChatGPT-like)
   ============================================================ */

/* Page body */
body.layout-with-sidebar {
  background-color: var(--signx-bg-body);
}

/* Shell: sidebar + content */
.signx-shell {
  display: flex;
  min-height: 100vh;
}

/* ------------------------------------------------------------
   Sidebar (light)
   ------------------------------------------------------------ */

.signx-sidebar {
  background-color: var(--surface-0);
  /* LIGHT background */
  color: var(--text-base);
  width: var(--signx-sidebar-expanded);
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e5e7eb;
  box-shadow: var(--signx-shadow-lg);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1030;
}

.signx-sidebar .sidebar-brand {
  padding: 1.25rem 1rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-logo {
  height: 40px;
}

.signx-sidebar .sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0rem 0rem 0rem;
  overflow-y: auto;
  /* still scrollable */
  scrollbar-width: none;
  /* Firefox: hide scrollbar */
}

/* Chrome / Edge / Safari: hide visual scrollbar but keep scroll */
.signx-sidebar .sidebar-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Section heading */
.signx-sidebar .sidebar-header {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signx-text-muted);
  padding: 0.75rem 0.75rem 0.25rem;
}

.signx-sidebar .sidebar-header-label {
  white-space: nowrap;
}

/* Nav links */
.signx-sidebar nav.nav {
  gap: 0.25rem;
}

.signx-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  margin: 0.1rem 0.25rem;
  border-radius: 0.75rem;
  color: var(--signx-text-body);
  font-weight: 500;
  transition: all 0.18s ease-out;
  font-size: 0.88rem;
}

.signx-sidebar .nav-link .sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  /* no pill */
  background: transparent;
  /* no background color */
}

.signx-sidebar .nav-link i {
  font-size: var(--signx-sidebar-icon-size);
}

.signx-sidebar .nav-link .sidebar-label {
  white-space: nowrap;
}

/* Hover: no background, only slightly darker icon/text */
.signx-sidebar .nav-link:hover {
  background: transparent;
  color: #4338ca;
  /* a bit darker than normal */
}

/* Icon color base */
.signx-sidebar .nav-link i {
  font-size: var(--signx-sidebar-icon-size);
  color: #4338ca;
  /* primary-ish */
}

/* Icon on hover */
.signx-sidebar .nav-link:hover i {
  color: #4338ca;
  /* darker */
}

/* Keep clear active state with pill (for current page) */
.signx-sidebar .nav-link.active {
  background: #e0e7ff;
  color: var(--signx-primary);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.3);
}

.signx-sidebar .nav-link.active i {
  color: var(--signx-primary);
}

/* Submenu */
.signx-sidebar .nav-sub .nav-link {
  padding-left: 2.5rem;
  font-size: 0.8rem;
}

/* Footer avatar */
.sidebar-footer-user {
  padding: 0.75rem 0.75rem 0;
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #1f2937;
  font-weight: 600;
}

.sidebar-avatar .status-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #22c55e;
}

/* ------------------------------------------------------------
   Collapsed state
   ------------------------------------------------------------ */

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

body.sidebar-collapsed .signx-content {
  margin-left: var(--signx-sidebar-collapsed);
}

/* Hide labels + subnav when collapsed */
body.sidebar-collapsed .signx-sidebar .sidebar-label,
body.sidebar-collapsed .signx-sidebar .nav-sub {
  opacity: 0;
  pointer-events: none;
  width: 0;
}

/* Make icons larger & more central when collapsed */
body.sidebar-collapsed .signx-sidebar .nav-link {
  justify-content: center;
  padding-inline: 0;
}

body.sidebar-collapsed .signx-sidebar .nav-link .sidebar-icon {
  width: 44px;
  height: 44px;
}

body.sidebar-collapsed .signx-sidebar .nav-link i {
  font-size: var(--signx-sidebar-icon-size-lg);
}

/* Sidebar headings show … when collapsed */
body.sidebar-collapsed .signx-sidebar .sidebar-header-label {
  position: relative;
  color: transparent;
}

body.sidebar-collapsed .signx-sidebar .sidebar-header-label::after {
  content: "…";
  position: absolute;
  left: 0;
  color: var(--signx-text-muted);
}

/* ------------------------------------------------------------
   Header (top bar, style)
   ------------------------------------------------------------ */

.main-header {
  background: var(--signx-bg-surface);
  border-bottom: 1px solid var(--signx-border-color, #e2e8f0);
  padding: 0.75rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1050;
}

.header-logo-img {
  height: 24px;
}

.header-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

/* Toggle button icons */
.header-toggle-btn .toggle-icon {
  color: #2563eb;
  font-size: 1.15rem;
}

/* default: show chevron, hide menu */
.header-toggle-btn .toggle-icon-menu {
  display: none;
}

/* collapsed: hide chevron, show menu */
body.sidebar-collapsed .header-toggle-btn .toggle-icon-chevron {
  display: none;
}

body.sidebar-collapsed .header-toggle-btn .toggle-icon-menu {
  display: inline-flex;
}

/* Search pill */
.header-search {
  background: #f9fafb;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 0.35rem 0.8rem;
  min-width: 260px;
}

.header-search-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1 1 auto;
  font-size: 0.85rem;
}

.header-search-input::placeholder {
  color: #9ca3af;
}

.header-search-icon {
  font-size: 0.9rem;
  color: #6b7280;
  margin-right: 0.4rem;
}

.header-search-shortcut {
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid #e5e7eb;
  color: #9ca3af;
}

/* Notification dot */
.header-notify-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background-color: #dc3545;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Header avatar */
.header-avatar {
  width: 32px;
  height: 32px;
  background: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
   Mobile behaviour
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .signx-sidebar {
    position: fixed;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }

  body.sidebar-open .signx-sidebar {
    transform: translateX(0);
  }

  .signx-content {
    margin-left: 0;
    padding: 1rem;
  }
}

/* ============================================================
   Tooltip for collapsed sidebar
   ============================================================ */

.tooltip-inner {
  font-size: 0.75rem;
}

/* Fix: in collapsed sidebar, keep icons visible but hide labels only */
body.sidebar-collapsed .signx-sidebar .nav-link .sidebar-icon {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.sidebar-collapsed .signx-sidebar .nav-link .sidebar-label {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 0;
}

/* ============================================
   Collapsed "icon rail" behaviour
   ============================================ */

/* 1) Icon rail: center all top-level links */
body.sidebar-collapsed .signx-sidebar .sidebar-inner {
  align-items: center;
  /* center all children horizontally */
}

/* 2) Nav itself: stack icons in one vertical line */
body.sidebar-collapsed .signx-sidebar nav.nav {
  align-items: center;
  /* icons aligned to same X line */
  width: 100%;
}

/* 3) Remove group + link side margins in collapsed state */
body.sidebar-collapsed .signx-sidebar .nav-group,
body.sidebar-collapsed .signx-sidebar .nav-link {
  margin-left: 0;
  margin-right: 0;
}

/* Already have: icons only, centered */
body.sidebar-collapsed .signx-sidebar .nav-link {
  justify-content: center;
  padding-inline: 0.25rem;
}

/* 4) Completely hide submenus so they don't leave vertical gaps */
body.sidebar-collapsed .signx-sidebar .nav-sub {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 5) Only labels disappear, icons stay */
body.sidebar-collapsed .signx-sidebar .sidebar-label {
  display: none;
}

/* 6) Section headers: keep minimal spacing, show just … if you like */
body.sidebar-collapsed .signx-sidebar .sidebar-header {
  padding: 0.35rem 0 0.15rem;
  text-align: center;
}

body.sidebar-collapsed .signx-sidebar .sidebar-header-label {
  color: transparent;
  position: relative;
}

body.sidebar-collapsed .signx-sidebar .sidebar-header-label::after {
  content: "…";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: transparent;
}

/* 7) Footer avatar: align with same icon rail */
body.sidebar-collapsed .signx-sidebar .sidebar-footer-user {
  display: flex;
  justify-content: center;
}

body.sidebar-collapsed .signx-sidebar .sidebar-header {
  display: none;
}

/* ============================================================
   Layout Shells & Utilities
   ============================================================ */

/* Full app shell wrapper */
.layout-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
}

/* Main content wrapper (below top nav) */
.layout-main {
  flex: 1 1 auto;
  padding: var(--space-lg) var(--space-section-x);
  background:
    radial-gradient(circle at top left, rgba(0, 99, 174, 0.04), transparent),
    var(--surface-1);
}

/* Section blocks with vertical rhythm */
.layout-section {
  padding: var(--space-section-y) 0;
}

/* Narrow section (for forms, settings, etc.) */
.layout-section-narrow {
  max-width: var(--container-max-md);
  margin-left: auto;
  margin-right: auto;
}

/* Simple 2-column layout that collapses on mobile */
.layout-two-column {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
}

@media (max-width: 992px) {
  .layout-two-column {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Stacked vertical layout with default gap */
.layout-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Cluster (wrap row with consistent gaps) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Auto-fill responsive grid for cards/tiles */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

/* Toolbar above tables/lists (filters, search, actions) */
.layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.layout-toolbar-condensed {
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* ============================================================
   Typography Utilities & Page Hierarchy
   ============================================================ */

.eyebrow {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-soft);
}

.eyebrow-muted {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

/* Main page title (top of screen) */
.page-title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-xs);
}

/* Optional subtitle under page title */
.page-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-soft);
  max-width: 60ch;
}

/* Section title inside cards/sections */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--space-sm);
}

/* Text size utilities */
.text-xs {
  font-size: var(--font-size-xs) !important;
}

.text-sm {
  font-size: var(--font-size-sm) !important;
}

.text-md {
  font-size: var(--font-size-md) !important;
}

.text-lg {
  font-size: var(--font-size-lg) !important;
}

.text-xl {
  font-size: var(--font-size-xl) !important;
}

.text-2xl {
  font-size: var(--font-size-2xl) !important;
}

/* Stat / KPI labels & values */
.stat-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2px;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-strong);
}

/* Helper text under form fields */
.helper-text {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  margin-top: 2px;
}

/* ============================================================
   Spacing & Gap Utilities (for flex/grid)
   ============================================================ */

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stack-md {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.gap-xs {
  gap: var(--space-xs) !important;
}

.gap-sm {
  gap: var(--space-sm) !important;
}

.gap-md {
  gap: var(--space-md) !important;
}

.gap-lg {
  gap: var(--space-lg) !important;
}

.gap-xl {
  gap: var(--space-xl) !important;
}

/* Card padding presets (use on .card or any surface) */
.p-card {
  padding: var(--space-md);
}

.p-card-sm {
  padding: var(--space-sm);
}

.p-card-lg {
  padding: var(--space-lg);
}

/* ============================================================
   Surface & Card Variants
   ============================================================ */

/* Surface utilities (force a surface level) */
.surface-0 {
  background-color: var(--surface-0) !important;
}

.surface-1 {
  background-color: var(--surface-1) !important;
}

.surface-2 {
  background-color: var(--surface-2) !important;
}

.surface-3 {
  background-color: var(--surface-3) !important;
}

/* Soft, low-contrast card */
.card-soft {
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: var(--shadow-sm);
}

/* Elevated analytic card */
.card-elevated {
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: var(--shadow-md);
}

/* Compact / high-density card */
.card-compact {
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--surface-1);
}

/* Interactive / clickable card */
.card-interactive {
  position: relative;
  cursor: pointer;
  transition:
    transform var(--normal) ease,
    box-shadow var(--normal) ease,
    border-color var(--normal) ease,
    background-color var(--normal) ease;
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(59, 130, 246, 0.35);
}

.card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

/* KPI-focused card */
.card-kpi {
  background: linear-gradient(145deg,
      rgba(0, 99, 174, 0.08),
      rgba(40, 50, 112, 0.02));
  border-radius: var(--radius-xl);
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Optional alignment for KPI cards with icon+numbers */
.card-kpi .card-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   Badges, Chips & Status Pills
   ============================================================ */

.badge-soft-primary,
.badge-soft-success,
.badge-soft-warning,
.badge-soft-danger,
.badge-soft-info {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-width: 1px;
  border-style: solid;
  gap: 0.3rem;
}

/* Primary */
.badge-soft-primary {
  color: var(--signx-primary-700);
  background-color: rgba(0, 99, 174, 0.08);
  border-color: rgba(0, 99, 174, 0.24);
}

/* Success */
.badge-soft-success {
  color: #166534;
  background-color: var(--signx-success-50);
  border-color: rgba(22, 163, 74, 0.3);
}

/* Warning */
.badge-soft-warning {
  color: #92400e;
  background-color: var(--signx-warning-50);
  border-color: rgba(217, 119, 6, 0.3);
}

/* Danger */
.badge-soft-danger {
  color: #b91c1c;
  background-color: var(--signx-danger-50);
  border-color: rgba(220, 38, 38, 0.3);
}

/* Info */
.badge-soft-info {
  color: #075985;
  background-color: var(--signx-info-50);
  border-color: rgba(14, 165, 233, 0.3);
}

/* Status pill base */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Optional small dot on left */
.status-pill::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background-color: currentColor;
}

/* Variants */
.status-pill--success {
  color: #166534;
  background-color: var(--signx-success-50);
}

.status-pill--warning {
  color: #92400e;
  background-color: var(--signx-warning-50);
}

.status-pill--danger {
  color: #b91c1c;
  background-color: var(--signx-danger-50);
}

.status-pill--neutral {
  color: var(--text-soft);
  background-color: var(--signx-gray-100);
}

/* ============================================================
   Tables – Soft & Compact Variants
   ============================================================ */

.table-soft {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table-soft thead {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.table-soft thead th {
  border-bottom: 1px solid var(--signx-gray-200);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.table-soft tbody tr+tr td {
  border-top: 1px solid var(--signx-gray-150);
}

/* Compact density version for data-heavy pages */
.table-compact tbody td,
.table-compact thead th {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: var(--font-size-sm);
}

/* Hover rows */
.table-soft.table-hover tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.07);
}

/* ============================================================
   Optional: Generic focus helper you can apply to any element
   ============================================================ */

.is-focusable {
  outline: none;
}

.is-focusable:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: inherit;
}

/* ============================================================
   SignX – Additional Styles Pack 2
   (Layouts, typography, chips, timeline, metrics, inputs, etc.)
   ============================================================ */

/* ---------- Layout helpers ---------- */

.layout-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-fill-height {
  min-height: 100vh;
}

.layout-scroll-y {
  max-height: 100%;
  overflow-y: auto;
}

.layout-constrained {
  max-width: var(--container-max-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-section-x);
  padding-right: var(--space-section-x);
}

/* ---------- Typography / content ---------- */

.text-soft {
  color: var(--text-soft);
}

.text-strong {
  color: var(--text-strong);
}

.text-mono {
  font-family: var(--font-mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace);
}

/* Long-form content for docs / policies */
.prose {
  max-width: 70ch;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.prose p+p {
  margin-top: 0.75em;
}

.prose h1,
.prose h2,
.prose h3 {
  font-weight: 600;
  color: var(--text-strong);
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

.prose ul {
  padding-left: 1.2em;
  margin-bottom: 0.75em;
}

.prose-sm {
  max-width: 60ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* ---------- Filter pills & chips ---------- */

.pill-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid rgba(148, 163, 184, 0.65);
  color: var(--text-soft);
  background-color: rgba(15, 23, 42, 0.02);
  cursor: pointer;
  transition:
    background-color var(--normal) ease,
    color var(--normal) ease,
    border-color var(--normal) ease;
}

.pill-filter:hover {
  background-color: rgba(148, 163, 184, 0.12);
}

.pill-filter--active {
  color: #0f172a;
  background-color: rgba(0, 99, 174, 0.12);
  border-color: rgba(0, 99, 174, 0.35);
}

/* Generic tag chip */
.chip-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--signx-gray-100);
  color: var(--text-soft);
}

/* Assignee / owner chip with avatar space */
.chip-assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-1);
  color: var(--text-strong);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* ---------- Timeline component ---------- */

.timeline {
  position: relative;
  padding-left: 1.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0.4rem;
  width: 2px;
  background: linear-gradient(to bottom,
      rgba(148, 163, 184, 0.7),
      rgba(148, 163, 184, 0.15));
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-md);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item__marker {
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  border: 2px solid var(--surface-0);
  background-color: var(--signx-primary);
  box-shadow: 0 0 0 2px rgba(0, 99, 174, 0.3);
}

.timeline-item__content {
  background-color: var(--surface-0);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow-xs);
}

/* ======================================================
   XIS Avatar System - Professional & Scalable
   ====================================================== */

/* Base Avatar with CSS Variables */
.avatar {
  --avatar-bg: var(--signx-gray-200);
  --avatar-color: var(--signx-gray-800);
  --avatar-border: 2px solid transparent;
  --avatar-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --avatar-size: 2.25rem;
  --avatar-font-size: calc(var(--avatar-size) * 0.45);
  --avatar-border-radius: 999px;
  --avatar-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-border-radius);
  background-color: var(--avatar-bg);
  background-image: var(--avatar-gradient, none);
  border: var(--avatar-border);
  color: var(--avatar-color);
  font-weight: 600;
  font-size: var(--avatar-font-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--avatar-shadow);
  transition: var(--avatar-transition);
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--font-family-sans-serif);
}

/* Avatar Image */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Avatar Initials (fallback when image fails) */
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: inherit;
  color: inherit;
  font-weight: inherit;
}

/* Size Variations */
.avatar-xs {
  --avatar-size: 1.25rem;
  --avatar-border: 1px solid transparent;
  --avatar-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.avatar-sm {
  --avatar-size: 1.6rem;
  --avatar-border: 1px solid transparent;
  --avatar-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.avatar-md {
  --avatar-size: 2.25rem;
  /* Default size */
}

.avatar-lg {
  --avatar-size: 3rem;
  --avatar-border: 2px solid #fff;
  --avatar-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.avatar-xl {
  --avatar-size: 4rem;
  --avatar-border: 3px solid #fff;
  --avatar-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.avatar-xxl {
  --avatar-size: 5rem;
  --avatar-border: 4px solid #fff;
  --avatar-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.avatar-3xl {
  --avatar-size: 6.5rem;
  --avatar-border: 5px solid #fff;
  --avatar-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

/* Shape Variations */
.avatar-square {
  --avatar-border-radius: 8px;
}

.avatar-rounded {
  --avatar-border-radius: 12px;
}

.avatar-pill {
  --avatar-border-radius: 50px;
  padding: 0 0.75rem;
  width: auto;
  min-width: var(--avatar-size);
}

/* Status Indicators */
.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20%;
  height: 20%;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: var(--signx-gray-400);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.avatar-status-online {
  background-color: var(--signx-success);
  animation: status-pulse 2s infinite;
}

.avatar-status-offline {
  background-color: var(--signx-gray-400);
}

.avatar-status-busy {
  background-color: var(--signx-danger);
}

.avatar-status-away {
  background-color: var(--signx-warning);
}

@keyframes status-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* Badge Avatars */
.avatar-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 10px;
  background: var(--signx-danger);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.avatar-badge-success {
  background: var(--signx-success);
}

.avatar-badge-warning {
  background: var(--signx-warning);
  color: var(--signx-gray-900);
}

.avatar-badge-info {
  background: var(--signx-info);
}

/* Color Variations */
.avatar-primary {
  --avatar-bg: linear-gradient(135deg, var(--bs-primary) 0%, #4f46e5 100%);
  --avatar-color: white;
}

.avatar-secondary {
  --avatar-bg: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
  --avatar-color: white;
}

.avatar-success {
  --avatar-bg: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --avatar-color: white;
}

.avatar-warning {
  --avatar-bg: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --avatar-color: var(--signx-gray-900);
}

.avatar-danger {
  --avatar-bg: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  --avatar-color: white;
}

.avatar-info {
  --avatar-bg: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  --avatar-color: white;
}

.avatar-dark {
  --avatar-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --avatar-color: white;
}

.avatar-light {
  --avatar-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --avatar-color: var(--signx-gray-800);
}

/* Glassmorphism Effect */
.avatar-glass {
  --avatar-bg: rgba(255, 255, 255, 0.1);
  --avatar-color: white;
  --avatar-border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover Effects */
.avatar-hover {
  cursor: pointer;
}

.avatar-hover:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: var(--bs-primary);
}

.avatar-hover-primary:hover {
  border-color: var(--bs-primary);
}

.avatar-hover-success:hover {
  border-color: var(--signx-success);
}

.avatar-hover-danger:hover {
  border-color: var(--signx-danger);
}

/* Avatar Groups */
.avatar-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.avatar-group .avatar {
  margin-left: -0.75rem;
  border: 2px solid #fff;
  position: relative;
  transition: transform 0.2s ease;
}

.avatar-group .avatar:hover {
  transform: translateY(-3px);
  z-index: 2;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.avatar-group-stacked {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Avatar with Action Button */
.avatar-action {
  position: relative;
  cursor: pointer;
}

.avatar-action-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  color: white;
  font-size: 1.25rem;
}

.avatar-action:hover .avatar-action-overlay {
  opacity: 1;
}

/* Avatar with Tooltip */
.avatar-tooltip {
  position: relative;
}

.avatar-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--signx-gray-900);
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 4px solid transparent;
  border-top-color: var(--signx-gray-900);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
}

.avatar-tooltip:hover::after,
.avatar-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Avatar Placeholder (Loading) */
.avatar-placeholder {
  background: linear-gradient(90deg,
      var(--signx-gray-200) 25%,
      var(--signx-gray-300) 50%,
      var(--signx-gray-200) 75%);
  background-size: 200% 100%;
  animation: placeholder-shimmer 1.5s infinite;
}

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

  100% {
    background-position: 200% 0;
  }
}

/* Animated Avatars */
.avatar-pulse {
  animation: avatar-pulse 2s infinite;
}

@keyframes avatar-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }
}

.avatar-spin {
  animation: avatar-spin 3s linear infinite;
}

@keyframes avatar-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Border Variations */
.avatar-border-primary {
  --avatar-border: 2px solid var(--bs-primary);
}

.avatar-border-success {
  --avatar-border: 2px solid var(--signx-success);
}

.avatar-border-warning {
  --avatar-border: 2px solid var(--signx-warning);
}

.avatar-border-danger {
  --avatar-border: 2px solid var(--signx-danger);
}

.avatar-border-dashed {
  --avatar-border: 2px dashed var(--signx-gray-400);
}

.avatar-border-dotted {
  --avatar-border: 2px dotted var(--signx-gray-400);
}

/* Avatar in Different Layouts */
.avatar-inline {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.75rem;
}

.avatar-center {
  display: flex;
  margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

  .avatar-xl,
  .avatar-xxl,
  .avatar-3xl {
    --avatar-size: 3.5rem;
    --avatar-border: 3px solid #fff;
  }

  .avatar-group .avatar {
    margin-left: -0.5rem;
  }
}

/* Print Styles */
@media print {
  .avatar {
    border: 1px solid var(--signx-gray-300);
    box-shadow: none;
  }

  .avatar-status,
  .avatar-badge,
  .avatar-action-overlay {
    display: none;
  }
}

/* Accessibility */
.avatar:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .avatar {
    --avatar-bg: var(--signx-gray-800);
    --avatar-color: var(--signx-gray-100);
    --avatar-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .avatar-light {
    --avatar-bg: linear-gradient(135deg, #334155 0%, #475569 100%);
    --avatar-color: var(--signx-gray-100);
  }

  .avatar-border-dashed,
  .avatar-border-dotted {
    --avatar-border: 2px dashed var(--signx-gray-700);
  }
}

/* ======================================================
   Header Org + User Pill
====================================================== */

.org-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ======================================================
   Shared Circle Styles
====================================================== */
/* Ensure avatar circles are true circles + clipping containers */
.org-circle,
.user-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  /* adjust to match your design */
  height: 36px;
  /* adjust to match your design */
  border-radius: 50%;
  overflow: hidden;
  /* IMPORTANT: clip image to circle */
  flex: 0 0 auto;
}

/* The avatar image must fully cover the circle */
.org-circle img,
.user-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* IMPORTANT: fills circle nicely */
  display: block;
}

/* Initials are centered and sit in the same circle area */
.org-initials,
.user-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

/* Hide initials when NOT in fallback mode (i.e., image exists) */
.org-circle:not(.org-fallback) .org-initials {
  display: none !important;
}

.user-circle:not(.user-fallback) .user-initial {
  display: none !important;
}

/* Optional: if fallback, ensure initials are visible */
.org-circle.org-fallback .org-initials,
.user-circle.user-fallback .user-initial {
  display: flex !important;
}

/* ======================================================
   Organization Avatar
====================================================== */

.org-circle {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Hide initials when image loads successfully */
.org-circle:not(.org-fallback) .org-logo-img+.org-initials {
  opacity: 0;
}

/* ======================================================
   User Avatar
====================================================== */

.user-circle {
  background: var(--signx-primary);
  border: 1px solid rgba(19, 14, 14, 0.1);
  color: #ffffff;
}

.user-initial {
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}

.user-circle:not(.user-fallback) .user-initial {
  display: none;
}

.org-logo-img {
  transition: opacity 0.15s ease-in;
}

/* ---------- Metric cards & KPI states ---------- */

.metric-card {
  background-color: var(--surface-0);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 184, 0.28);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metric-card--positive {
  border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(135deg,
      rgba(34, 197, 94, 0.12),
      var(--surface-0));
}

.metric-card--negative {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg,
      rgba(239, 68, 68, 0.12),
      var(--surface-0));
}

/* ---------- Subtle secondary nav (tabs / settings) ---------- */

.nav-subtle {
  border-bottom: 1px solid var(--soft-border-color, rgba(148, 163, 184, 0.3));
  margin-bottom: var(--space-md);
}

.nav-subtle .nav-link {
  padding: 0.6rem 0.9rem;
  margin-right: 0.15rem;
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-size: var(--font-size-sm);
  transition:
    background-color var(--normal) ease,
    color var(--normal) ease;
}

.nav-subtle .nav-link:hover {
  background-color: rgba(148, 163, 184, 0.12);
  color: var(--text-strong);
}

.nav-subtle .nav-link.active {
  background-color: rgba(0, 99, 174, 0.12);
  color: #0f172a;
}

/* Small vertical divider for toolbars */
.toolbar-divider {
  width: 1px;
  align-self: stretch;
  background-color: rgba(148, 163, 184, 0.6);
  opacity: 0.65;
}

/* ---------- Table variants ---------- */

.table-zebra tbody tr:nth-child(odd) {
  background-color: rgba(148, 163, 184, 0.04);
}

.table-zebra tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.1);
}

/* KPI-style table: right-aligned numbers, bold totals */
.table-kpi tbody td:last-child,
.table-kpi thead th:last-child {
  text-align: right;
}

.table-kpi tbody tr:last-child td {
  font-weight: 600;
}

/* ---------- Buttons ---------- */

.btn-ghost {
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--signx-primary);
  background-color: transparent;
  padding-inline: 0.9rem;
  padding-block: 0.4rem;
  font-weight: 500;
  transition:
    background-color var(--normal) ease,
    border-color var(--normal) ease,
    color var(--normal) ease;
}

.btn-ghost:hover {
  background-color: rgba(85, 121, 149, 0.07);
  border-color: rgba(0, 99, 174, 0.35);
}

/* Soft primary button (less intense than .btn-primary) */
.btn-soft-primary {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 99, 174, 0.35);
  background-color: rgba(0, 99, 174, 0.1);
  color: #0f172a;
  padding-inline: 1rem;
  padding-block: 0.45rem;
  font-weight: 600;
  transition:
    background-color var(--normal) ease,
    border-color var(--normal) ease,
    transform var(--normal) ease;
}

.btn-soft-primary:hover {
  background-color: rgba(0, 99, 174, 0.16);
  border-color: rgba(0, 99, 174, 0.5);
  transform: translateY(-1px);
}

/* ---------- Form sections & inputs ---------- */

.form-section {
  border-radius: var(--radius-lg);
  background-color: var(--surface-0);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.form-section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 0.25rem;
}

.form-section-description {
  font-size: var(--font-size-sm);
  color: var(--text-soft);
  margin-bottom: var(--space-md);
}

/* Soft SignX input style (use on .form-control) */
.input-soft {
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.5);
  background-color: var(--surface-0);
  transition:
    border-color var(--normal) ease,
    box-shadow var(--normal) ease,
    background-color var(--normal) ease;
}

.input-soft:focus {
  border-color: var(--signx-primary);
  box-shadow: 0 0 0 1px rgba(0, 99, 174, 0.35);
  background-color: var(--surface-0);
}

/* ---------- Badges & status dots ---------- */

.badge-outline {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.7);
  padding: 0.1rem 0.5rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* Small status dot for inline usage */
.status-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background-color: var(--signx-gray-300);
}

.status-dot--success {
  background-color: var(--signx-success);
}

.status-dot--warning {
  background-color: var(--signx-warning);
}

.status-dot--danger {
  background-color: var(--signx-danger);
}

/* ============================================================
   SignX – Styles Pack 3
   (Dashboard header, breadcrumbs, banners, toasts, stepper,
    skeletons, empty states, tags, etc.)
   ============================================================ */

/* ---------- Dashboard header & sections ---------- */

.dashboard-header-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dashboard-section-shell {
  margin-bottom: var(--space-xl);
}

/* ---------- Breadcrumbs ---------- */

.signx-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  margin-bottom: var(--space-sm);
}

.signx-breadcrumbs a {
  color: var(--signx-primary);
  text-decoration: none;
}

.signx-breadcrumbs a:hover {
  text-decoration: none;
}

.signx-breadcrumbs .separator {
  opacity: 0.6;
}

.signx-breadcrumbs .current {
  color: var(--text-strong);
  font-weight: 500;
}

/* ---------- Notice banners (inline alerts) ---------- */

.notice-banner {
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  border: 1px solid transparent;
}

.notice-banner__icon {
  font-size: 1.1rem;
}

/* Info */
.notice-banner--info {
  background-color: var(--signx-info-50, rgba(59, 130, 246, 0.08));
  border-color: rgba(59, 130, 246, 0.35);
  color: #075985;
}

/* Success */
.notice-banner--success {
  background-color: var(--signx-success-50, rgba(34, 197, 94, 0.08));
  border-color: rgba(34, 197, 94, 0.35);
  color: #166534;
}

/* Warning */
.notice-banner--warning {
  background-color: var(--signx-warning-50, rgba(245, 158, 11, 0.1));
  border-color: rgba(245, 158, 11, 0.4);
  color: #92400e;
}

/* Danger */
.notice-banner--danger {
  background-color: var(--signx-danger-50, rgba(239, 68, 68, 0.08));
  border-color: rgba(239, 68, 68, 0.4);
  color: #b91c1c;
}

/* ---------- Toast notifications (bottom-right) ---------- */

.toast {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.85rem;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  box-shadow: var(--shadow-md);
  background-color: var(--surface-0);
  border: 1px solid rgba(148, 163, 184, 0.4);
  max-width: 320px;
}

.toast--success {
  border-left: 4px solid var(--signx-success);
}

.toast--error {
  border-left: 4px solid var(--signx-danger);
}

.toast--info {
  border-left: 4px solid var(--signx-primary);
}

.toast-title {
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.toast-close {
  margin-left: auto;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text-soft);
}

/* ---------- Progress bar ---------- */

.progress-bar-signx {
  width: 100%;
  display: inline-block;
}

.progress-bar-signx__track {
  width: 100%;
  height: 0.4rem;
  border-radius: 999px;
  background-color: rgba(148, 163, 184, 0.3);
  overflow: hidden;
}

.progress-bar-signx__value {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to right,
      var(--signx-primary),
      var(--signx-blue-3));
  transition: width var(--normal) ease;
}

/* ---------- Stepper component ---------- */

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.stepper-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-sm);
  color: var(--text-soft);
}

.stepper-step__circle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  background-color: var(--surface-0);
}

.stepper-step--current .stepper-step__circle {
  border-color: var(--signx-primary);
  background-color: rgba(0, 99, 174, 0.1);
  color: var(--signx-primary);
}

.stepper-step--completed .stepper-step__circle {
  border-color: var(--signx-success);
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--signx-success);
}

.stepper-step--current {
  color: var(--text-strong);
}

.stepper-label {
  font-weight: 500;
}

/* ---------- Tag cloud ---------- */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag-cloud .chip-tag {
  background-color: var(--surface-1);
  border: 1px solid rgba(148, 163, 184, 0.6);
}

/* ---------- Skeleton loaders ---------- */

.signx-skeleton {
  display: inline-block;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(148, 163, 184, 0.2) 0%,
      rgba(148, 163, 184, 0.35) 50%,
      rgba(148, 163, 184, 0.2) 100%);
  background-size: 200% 100%;
  animation: signx-skeleton-pulse 1.4s ease-in-out infinite;
}

.signx-skeleton--text {
  width: 100%;
  height: 0.7rem;
  border-radius: 999px;
}

.signx-skeleton--avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
}

.signx-skeleton--badge {
  width: 3rem;
  height: 1rem;
  border-radius: var(--radius-pill);
}

@keyframes signx-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ---------- Empty state patterns ---------- */

.empty-state {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at top, rgba(0, 99, 174, 0.06), transparent),
    var(--surface-0);
  border: 1px dashed rgba(148, 163, 184, 0.6);
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  margin-bottom: var(--space-sm);
  background-color: rgba(0, 99, 174, 0.06);
  color: var(--signx-primary);
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 0.25rem;
}

.empty-state-description {
  font-size: var(--font-size-sm);
  color: var(--text-soft);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-md);
}

.empty-state-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Count pill (e.g. "12 items") ---------- */

.pill-count {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  background-color: var(--signx-gray-100);
}

/* ---------- Inline soft list ---------- */

.list-inline-soft {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.list-inline-soft li {
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-1);
  color: var(--text-soft);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* ============================================================
   SignX – Styles Pack 4
   (Side panels, segmented controls, filters, nav, forms, cards,
    analytics helpers, utilities, etc.)
   ============================================================ */

/* ---------- App shell & side panel ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--surface-1);
}

.app-shell-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-shell-main-inner {
  flex: 1 1 auto;
  padding: var(--space-lg) var(--space-section-x);
}

/* Slide-in right panel (e.g., details, filters) */
.side-panel {
  position: relative;
  width: 360px;
  max-width: 100%;
  background-color: var(--surface-0);
  border-left: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: -10px 0 30px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
}

.side-panel-header {
  padding: var(--space-md) var(--space-md);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.side-panel-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-strong);
}

.side-panel-body {
  padding: var(--space-md);
  overflow-y: auto;
}

.side-panel-footer {
  padding: var(--space-md);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ---------- Segmented control (toggle group) ---------- */

.segmented-control {
  display: inline-flex;
  border-radius: var(--radius-pill);
  padding: 0.15rem;
  background-color: var(--surface-1);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.segmented-control__item {
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  cursor: pointer;
  border: none;
  background: transparent;
  transition:
    background-color var(--normal) ease,
    color var(--normal) ease;
}

.segmented-control__item:hover {
  background-color: rgba(148, 163, 184, 0.18);
}

.segmented-control__item--active {
  background-color: var(--surface-0);
  color: var(--text-strong);
}

/* ---------- Search bar patterns ---------- */

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-0);
  border: 1px solid rgba(148, 163, 184, 0.6);
}

.search-bar input {
  border: none;
  background: transparent;
  font-size: var(--font-size-sm);
  width: 100%;
  outline: none;
  color: var(--text-strong);
}

.search-bar-icon {
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* Compact filter bar */
.filter-bar-soft {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-1);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

/* ---------- Mini stats row / strip ---------- */

.mini-stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 0.5rem 0;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 120px;
}

.mini-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.mini-stat-value {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-strong);
}

/* ---------- Dense chip list for filters / tags ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Filter chip with icon slot */
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  border: 1px solid rgba(148, 163, 184, 0.6);
  background-color: var(--surface-0);
  color: var(--text-soft);
  cursor: pointer;
}

.chip-filter--active {
  background-color: rgba(0, 99, 174, 0.12);
  color: #0f172a;
  border-color: rgba(0, 99, 174, 0.5);
}

/* ---------- Role & environment badges ---------- */

.badge-role {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid rgba(148, 163, 184, 0.7);
}

.badge-role--admin {
  color: #7c2d12;
  background-color: rgba(248, 153, 29, 0.15);
  border-color: rgba(248, 153, 29, 0.4);
}

.badge-role--finance {
  color: #0f172a;
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.5);
}

.badge-role--hr {
  color: #312e81;
  background-color: rgba(129, 140, 248, 0.18);
  border-color: rgba(129, 140, 248, 0.5);
}

.badge-role--viewer {
  color: var(--text-soft);
  background-color: var(--signx-gray-100);
  border-color: rgba(148, 163, 184, 0.7);
}

/* Environment badges (DEV / STAGE / PROD) */
.badge-env {
  font-size: var(--font-size-xs);
  border-radius: var(--radius-pill);
  padding: 0.08rem 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(148, 163, 184, 0.8);
  color: var(--text-soft);
}

.badge-env--dev {
  background-color: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.badge-env--stage {
  background-color: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.badge-env--prod {
  background-color: rgba(34, 197, 94, 0.12);
  color: #166534;
}

/* ---------- Vertical nav (secondary sidebar) ---------- */

.nav-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-vertical li+li {
  margin-top: 0.15rem;
}

.nav-vertical .nav-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-soft);
  text-decoration: none;
  transition:
    background-color var(--normal) ease,
    color var(--normal) ease;
}

.nav-vertical .nav-link:hover {
  background-color: rgba(148, 163, 184, 0.16);
  color: var(--text-strong);
}

.nav-vertical .nav-link.active {
  background-color: rgba(0, 99, 174, 0.18);
  color: #0f172a;
}

/* ---------- Data row actions & hover helpers ---------- */

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.row-action-btn {
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.35rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.row-action-btn:hover {
  background-color: rgba(148, 163, 184, 0.12);
  color: var(--text-strong);
}

/* Highlight row (e.g., selected or changed) */
.row-highlight {
  background-color: rgba(0, 99, 174, 0.07);
}

/* ---------- Card layouts: split & list ---------- */

.card-split-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.card-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.1rem;
}

/* ---------- Definition list styles (key-value blocks) ---------- */

.dl-soft {
  margin: 0;
}

.dl-soft-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.dl-soft-row+.dl-soft-row {
  border-top: 1px dashed rgba(148, 163, 184, 0.4);
}

.dl-soft-label {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.dl-soft-value {
  font-size: var(--font-size-sm);
  color: var(--text-strong);
  text-align: right;
}

/* ---------- Page footer / meta info ---------- */

.page-meta-footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* ---------- Pagination controls ---------- */

.pagination-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  padding: 0.2rem;
  background-color: var(--surface-0);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.pagination-soft button,
.pagination-soft a {
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.5rem;
  border: none;
  background: transparent;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  cursor: pointer;
}

.pagination-soft button:hover,
.pagination-soft a:hover {
  background-color: rgba(148, 163, 184, 0.18);
  color: var(--text-strong);
}

.pagination-soft .is-current {
  background-color: rgba(0, 99, 174, 0.16);
  color: #0f172a;
}

/* ---------- Inline label/value pairs ---------- */

.inline-kv {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: var(--font-size-xs);
}

.inline-kv-label {
  color: var(--text-soft);
}

.inline-kv-value {
  color: var(--text-strong);
  font-weight: 500;
}

/* ---------- Chips for risk / priority / status ---------- */

.chip-risk {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-1);
}

.chip-risk--low {
  color: #166534;
  background-color: rgba(34, 197, 94, 0.12);
}

.chip-risk--medium {
  color: #92400e;
  background-color: rgba(245, 158, 11, 0.12);
}

.chip-risk--high {
  color: #b91c1c;
  background-color: rgba(239, 68, 68, 0.12);
}

/* ---------- Form layout helpers ---------- */

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 992px) {
  .form-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .form-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Inline form group (label + field in row) */
.form-inline-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Chips as selectable tabs ---------- */

.chip-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip-tab {
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.6);
  font-size: var(--font-size-xs);
  cursor: pointer;
  background-color: var(--surface-0);
  color: var(--text-soft);
}

.chip-tab--active {
  background-color: rgba(0, 99, 174, 0.16);
  color: #0f172a;
  border-color: rgba(0, 99, 174, 0.6);
}

/* ---------- Chart legend & KPI swatches ---------- */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.chart-legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.15rem;
  background-color: var(--chart-line-1);
}

/* Additional swatches if needed */
.chart-legend-swatch--2 {
  background-color: var(--chart-line-2);
}

.chart-legend-swatch--3 {
  background-color: var(--chart-line-3);
}

/* ---------- Utility helpers ---------- */

.u-align-center {
  text-align: center !important;
}

.u-align-right {
  text-align: right !important;
}

.u-nowrap {
  white-space: nowrap;
}

.u-full-width {
  width: 100% !important;
}

.u-muted {
  color: var(--text-soft) !important;
}

.u-strong {
  color: var(--text-strong) !important;
  font-weight: 600;
}

.u-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Subtle divider line */
.u-divider {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
  margin: var(--space-md) 0;
}

/* ---------- Compact pill for numeric indicators ---------- */

.pill-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--signx-gray-100);
  color: var(--text-soft);
}

/* ============================================================
   SignX – Styles Pack 5
   (Page chrome, headers, widgets, filters, forms, tables,
    modals, utilities – highly generic & reusable)
   ============================================================ */

/* ---------- Page header & hero variants ---------- */

.page-header-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.page-header-compact-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.page-header-compact-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.page-hero {
  padding: var(--space-lg) var(--space-lg);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at top left, rgba(0, 99, 174, 0.12), transparent),
    var(--surface-0);
  border: 1px solid rgba(148, 163, 184, 0.35);
  margin-bottom: var(--space-lg);
}

.page-hero-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 0.3rem;
}

.page-hero-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-soft);
  max-width: 60ch;
}

.page-hero-actions {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Banner band across page (e.g. info about current org/project) */
.page-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-xl);
  background-color: var(--surface-2);
  border: 1px solid rgba(148, 163, 184, 0.4);
  margin-bottom: var(--space-md);
}

.page-band-highlight {
  border-left: 4px solid var(--signx-primary);
}

/* ---------- Widget / tile grid ---------- */

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.widget-tile {
  background-color: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.widget-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.widget-tile-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.widget-tile-meta {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.widget-tile-body {
  margin-top: 0.3rem;
}

.widget-tile-footer {
  margin-top: 0.35rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* ---------- Section header patterns ---------- */

.section-header-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.section-header-inline-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.section-header-inline-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---------- Tag rows & metadata ---------- */

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.meta-label {
  color: var(--text-soft);
}

.meta-value {
  color: var(--text-strong);
}

/* Compact metadata line under titles */
.title-meta {
  margin-top: 0.1rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* ---------- Form shells & groups ---------- */

.form-card {
  background-color: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: var(--shadow-xs);
}

.form-card-header {
  margin-bottom: var(--space-md);
}

.form-card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-strong);
}

.form-card-description {
  font-size: var(--font-size-sm);
  color: var(--text-soft);
}

/* Form group stacked (label above input) */
.form-group-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

/* Form group inline (label left, input right) */
.form-group-inline {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .form-group-inline {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Labels */
.form-label-sm {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.form-label-strong {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-strong);
}

/* Inline hint/error */
.field-hint {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.field-error {
  font-size: var(--font-size-xs);
  color: var(--signx-danger);
}

.field-error-block {
  margin-top: 0.2rem;
}

/* Disabled field appearance helper */
.field-disabled {
  background-color: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.7);
  color: var(--text-muted);
}

/* Group horizontal fields in a row */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---------- Toggle & checkbox chips ---------- */

.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.6);
  background-color: var(--surface-0);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition:
    background-color var(--normal) ease,
    border-color var(--normal) ease,
    color var(--normal) ease;
}

/* Remove composes: references - they are CSS Modules syntax, not standard CSS */

.toggle-chip:hover {
  background-color: rgba(148, 163, 184, 0.15);
}

.toggle-chip--on {
  border-color: rgba(0, 99, 174, 0.7);
  background-color: rgba(0, 99, 174, 0.1);
  color: #0f172a;
}

/* ---------- Tab bars (horizontal) ---------- */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  margin-bottom: var(--space-md);
}

.tabbar-item {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-soft);
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  background-color: transparent;
  transition:
    background-color var(--normal) ease,
    color var(--normal) ease,
    border-color var(--normal) ease;
}

.tabbar-item:hover {
  background-color: rgba(148, 163, 184, 0.1);
  color: var(--text-strong);
}

.tabbar-item--active {
  background-color: var(--surface-0);
  color: var(--text-strong);
  border-color: rgba(148, 163, 184, 0.6);
  border-bottom-color: var(--surface-0);
}

/* ---------- Pill tabs (inside cards/sections) ---------- */

.pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pill-tab {
  padding: 0.25rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  border: 1px solid rgba(148, 163, 184, 0.6);
  background-color: var(--surface-0);
  color: var(--text-soft);
  cursor: pointer;
}

.pill-tab--active {
  background-color: rgba(0, 99, 174, 0.15);
  color: #0f172a;
  border-color: rgba(0, 99, 174, 0.7);
}

/* ---------- Widget header badges ---------- */

.widget-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--signx-gray-100);
  color: var(--text-soft);
}

/* Mini colored dot on left */
.widget-badge::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background-color: currentColor;
}

/* ---------- Data labels / status labels ---------- */

.data-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.data-value {
  font-size: var(--font-size-md);
  color: var(--text-strong);
  font-weight: 600;
}

/* Pill-like data label */
.data-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-1);
  color: var(--text-soft);
}

/* ---------- List tiles (for items, people, projects) ---------- */

.list-tiles {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.list-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.45rem 0.2rem;
  border-radius: var(--radius-md);
  transition: background-color var(--normal) ease;
}

.list-tile:hover {
  background-color: rgba(148, 163, 184, 0.12);
}

.list-tile-main {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.list-tile-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.list-tile-title {
  font-size: var(--font-size-sm);
  color: var(--text-strong);
  font-weight: 500;
}

.list-tile-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.list-tile-meta {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* ---------- Compact timeline variant ---------- */

.timeline-compact {
  position: relative;
  padding-left: 1.1rem;
}

.timeline-compact::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
  width: 1px;
  background-color: rgba(148, 163, 184, 0.7);
}

.timeline-compact-item {
  position: relative;
  padding-bottom: 0.6rem;
}

.timeline-compact-item:last-child {
  padding-bottom: 0;
}

.timeline-compact-marker {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background-color: var(--signx-primary);
}

/* ---------- Cards: border-top and border-accent variants ---------- */

.card-border-top-primary {
  border-top: 3px solid var(--signx-primary);
}

.card-border-top-success {
  border-top: 3px solid var(--signx-success);
}

.card-border-top-warning {
  border-top: 3px solid var(--signx-warning);
}

.card-border-top-danger {
  border-top: 3px solid var(--signx-danger);
}

/* Outline card with dashed border (for drafts, placeholders) */
.card-dashed {
  border-radius: var(--radius-xl);
  border: 1px dashed rgba(148, 163, 184, 0.6);
  background-color: var(--surface-1);
}

/* ---------- Table helpers & states ---------- */

/* Borderless table body, keep header line only */
.table-borderless tbody td,
.table-borderless tbody th {
  border-top: none;
}

/* Tight padding table */
.table-tight tbody td,
.table-tight thead th {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* Row for "total" at bottom */
.table-row-total td {
  font-weight: 600;
  border-top: 2px solid rgba(148, 163, 184, 0.7);
}

/* Row for "sub-total" */
.table-row-subtotal td {
  font-weight: 500;
  background-color: rgba(148, 163, 184, 0.1);
}

/* Row flagged as risk/overdue */
.table-row-flagged {
  background-color: rgba(239, 68, 68, 0.06);
}

/* ---------- Inline tag / chip styles for table cells ---------- */

.cell-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-1);
  color: var(--text-soft);
}

/* ---------- Modal shell & drawers (generic CSS only) ---------- */

.modal-shell {
  background-color: var(--surface-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(148, 163, 184, 0.4);
  max-width: 640px;
  width: 100%;
}

.modal-shell-header {
  padding: var(--space-md) var(--space-md);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.modal-shell-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-strong);
}

.modal-shell-body {
  padding: var(--space-md) var(--space-md);
}

.modal-shell-footer {
  padding: var(--space-md) var(--space-md);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Drawer (full-height side modal) */
.drawer {
  background-color: var(--surface-0);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: -12px 0 30px rgba(15, 23, 42, 0.2);
  border-left: 1px solid rgba(148, 163, 184, 0.4);
  width: min(420px, 100%);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  padding: var(--space-md);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-strong);
}

.drawer-body {
  padding: var(--space-md);
  overflow-y: auto;
}

.drawer-footer {
  padding: var(--space-md);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ---------- Info callouts inside forms or docs ---------- */

.callout {
  border-radius: var(--radius-lg);
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background-color: var(--surface-1);
  font-size: var(--font-size-sm);
  display: flex;
  gap: 0.5rem;
}

.callout-icon {
  font-size: 1rem;
  margin-top: 0.1rem;
}

.callout-title {
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 0.1rem;
}

.callout-body {
  color: var(--text-soft);
}

/* Variants */
.callout-info {
  border-color: rgba(59, 130, 246, 0.45);
  background-color: rgba(59, 130, 246, 0.08);
}

.callout-warning {
  border-color: rgba(245, 158, 11, 0.5);
  background-color: rgba(245, 158, 11, 0.12);
}

.callout-danger {
  border-color: rgba(239, 68, 68, 0.5);
  background-color: rgba(239, 68, 68, 0.09);
}

/* ---------- Progress chips / step count ---------- */

.progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-1);
  color: var(--text-soft);
}

.progress-chip-bar {
  position: relative;
  flex: 1 1 auto;
  height: 0.25rem;
  border-radius: 999px;
  background-color: rgba(148, 163, 184, 0.4);
  overflow: hidden;
}

.progress-chip-bar-value {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background-color: var(--signx-primary);
}

/* ---------- Utility: margin & padding helpers (u-*) ---------- */

.u-mt-xs {
  margin-top: var(--space-xs) !important;
}

.u-mt-sm {
  margin-top: var(--space-sm) !important;
}

.u-mt-md {
  margin-top: var(--space-md) !important;
}

.u-mt-lg {
  margin-top: var(--space-lg) !important;
}

.u-mt-xl {
  margin-top: var(--space-xl) !important;
}

.u-mb-xs {
  margin-bottom: var(--space-xs) !important;
}

.u-mb-sm {
  margin-bottom: var(--space-sm) !important;
}

.u-mb-md {
  margin-bottom: var(--space-md) !important;
}

.u-mb-lg {
  margin-bottom: var(--space-lg) !important;
}

.u-mb-xl {
  margin-bottom: var(--space-xl) !important;
}

.u-pt-xs {
  padding-top: var(--space-xs) !important;
}

.u-pt-sm {
  padding-top: var(--space-sm) !important;
}

.u-pt-md {
  padding-top: var(--space-md) !important;
}

.u-pt-lg {
  padding-top: var(--space-lg) !important;
}

.u-pt-xl {
  padding-top: var(--space-xl) !important;
}

.u-pb-xs {
  padding-bottom: var(--space-xs) !important;
}

.u-pb-sm {
  padding-bottom: var(--space-sm) !important;
}

.u-pb-md {
  padding-bottom: var(--space-md) !important;
}

.u-pb-lg {
  padding-bottom: var(--space-lg) !important;
}

.u-pb-xl {
  padding-bottom: var(--space-xl) !important;
}

/* ---------- Utility: flex alignment & gap helpers ---------- */

.u-flex {
  display: flex !important;
}

.u-flex-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.u-flex-between {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.u-flex-column {
  display: flex !important;
  flex-direction: column;
}

.u-gap-xs {
  gap: var(--space-xs) !important;
}

.u-gap-sm {
  gap: var(--space-sm) !important;
}

.u-gap-md {
  gap: var(--space-md) !important;
}

.u-gap-lg {
  gap: var(--space-lg) !important;
}

/* (Fix truncated rule from above) */
.table-row-total td {
  font-weight: 600;
  border-top: 2px solid rgba(148, 163, 184, 0.7);
}

/* ============================================================
   SignX – Styles Pack 5 (Extended)
   Extra layout, spacing, badges, helpers, tiles, lists, etc.
   ============================================================ */

/* ---------- Margin utilities (mapped to SignX spacing) ---------- */

.m-2xs {
  margin: var(--space-2xs) !important;
}

.m-xs {
  margin: var(--space-xs) !important;
}

.m-sm {
  margin: var(--space-sm) !important;
}

.m-md {
  margin: var(--space-md) !important;
}

.m-lg {
  margin: var(--space-lg) !important;
}

.m-xl {
  margin: var(--space-xl) !important;
}

.m-2xl {
  margin: var(--space-2xl) !important;
}

.mt-2xs {
  margin-top: var(--space-2xs) !important;
}

.mt-xs {
  margin-top: var(--space-xs) !important;
}

.mt-sm {
  margin-top: var(--space-sm) !important;
}

.mt-md {
  margin-top: var(--space-md) !important;
}

.mt-lg {
  margin-top: var(--space-lg) !important;
}

.mt-xl {
  margin-top: var(--space-xl) !important;
}

.mt-2xl {
  margin-top: var(--space-2xl) !important;
}

.mb-2xs {
  margin-bottom: var(--space-2xs) !important;
}

.mb-xs {
  margin-bottom: var(--space-xs) !important;
}

.mb-sm {
  margin-bottom: var(--space-sm) !important;
}

.mb-md {
  margin-bottom: var(--space-md) !important;
}

.mb-lg {
  margin-bottom: var(--space-lg) !important;
}

.mb-xl {
  margin-bottom: var(--space-xl) !important;
}

.mb-2xl {
  margin-bottom: var(--space-2xl) !important;
}

.ms-2xs {
  margin-left: var(--space-2xs) !important;
}

.ms-xs {
  margin-left: var(--space-xs) !important;
}

.ms-sm {
  margin-left: var(--space-sm) !important;
}

.ms-md {
  margin-left: var(--space-md) !important;
}

.ms-lg {
  margin-left: var(--space-lg) !important;
}

.ms-xl {
  margin-left: var(--space-xl) !important;
}

.me-2xs {
  margin-right: var(--space-2xs) !important;
}

.me-xs {
  margin-right: var(--space-xs) !important;
}

.me-sm {
  margin-right: var(--space-sm) !important;
}

.me-md {
  margin-right: var(--space-md) !important;
}

.me-lg {
  margin-right: var(--space-lg) !important;
}

.me-xl {
  margin-right: var(--space-xl) !important;
}

/* ---------- Padding utilities ---------- */

.p-2xs {
  padding: var(--space-2xs) !important;
}

.p-xs {
  padding: var(--space-xs) !important;
}

.p-sm {
  padding: var(--space-sm) !important;
}

.p-md {
  padding: var(--space-md) !important;
}

.p-lg {
  padding: var(--space-lg) !important;
}

.p-xl {
  padding: var(--space-xl) !important;
}

.p-2xl {
  padding: var(--space-2xl) !important;
}

.pt-2xs {
  padding-top: var(--space-2xs) !important;
}

.pt-xs {
  padding-top: var(--space-xs) !important;
}

.pt-sm {
  padding-top: var(--space-sm) !important;
}

.pt-md {
  padding-top: var(--space-md) !important;
}

.pt-lg {
  padding-top: var(--space-lg) !important;
}

.pt-xl {
  padding-top: var(--space-xl) !important;
}

.pb-2xs {
  padding-bottom: var(--space-2xs) !important;
}

.pb-xs {
  padding-bottom: var(--space-xs) !important;
}

.pb-sm {
  padding-bottom: var(--space-sm) !important;
}

.pb-md {
  padding-bottom: var(--space-md) !important;
}

.pb-lg {
  padding-bottom: var(--space-lg) !important;
}

.pb-xl {
  padding-bottom: var(--space-xl) !important;
}

.ps-2xs {
  padding-left: var(--space-2xs) !important;
}

.ps-xs {
  padding-left: var(--space-xs) !important;
}

.ps-sm {
  padding-left: var(--space-sm) !important;
}

.ps-md {
  padding-left: var(--space-md) !important;
}

.ps-lg {
  padding-left: var(--space-lg) !important;
}

.pe-2xs {
  padding-right: var(--space-2xs) !important;
}

.pe-xs {
  padding-right: var(--space-xs) !important;
}

.pe-sm {
  padding-right: var(--space-sm) !important;
}

.pe-md {
  padding-right: var(--space-md) !important;
}

.pe-lg {
  padding-right: var(--space-lg) !important;
}

/* ---------- Flexbox utilities (SignX flavored) ---------- */

.d-flex {
  display: flex !important;
}

.d-inlineflex {
  display: inline-flex !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.items-start {
  align-items: flex-start !important;
}

.items-center {
  align-items: center !important;
}

.items-end {
  align-items: flex-end !important;
}

.items-stretch {
  align-items: stretch !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.flex-1 {
  flex: 1 1 auto !important;
}

.flex-0 {
  flex: 0 0 auto !important;
}

/* ---------- Grid helpers ---------- */

.grid {
  display: grid !important;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-gap-xs {
  gap: var(--space-xs);
}

.grid-gap-sm {
  gap: var(--space-sm);
}

.grid-gap-md {
  gap: var(--space-md);
}

.grid-gap-lg {
  gap: var(--space-lg);
}

.grid-gap-xl {
  gap: var(--space-xl);
}

/* ---------- Text alignment & transform ---------- */

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-muted-soft {
  color: var(--text-muted) !important;
}

/* ---------- Width & max-width helpers ---------- */

.w-100 {
  width: 100% !important;
}

.w-50 {
  width: 50% !important;
}

.w-33 {
  width: 33.3333% !important;
}

.w-25 {
  width: 25% !important;
}

.max-w-sm {
  max-width: var(--container-max-sm);
}

.max-w-md {
  max-width: var(--container-max-md);
}

.max-w-lg {
  max-width: var(--container-max-lg);
}

.max-w-xl {
  max-width: var(--container-max-xl);
}

/* ---------- Simple border & radius helpers ---------- */

.border-soft {
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

.border-dashed {
  border-style: dashed !important;
}

.border-top-soft {
  border-top: 1px solid rgba(148, 163, 184, 0.5) !important;
}

.border-bottom-soft {
  border-bottom: 1px solid rgba(148, 163, 184, 0.5) !important;
}

.rounded-pill {
  border-radius: var(--radius-pill) !important;
}

.rounded-2xl {
  border-radius: var(--radius-2xl) !important;
}

/* ---------- Background helpers ---------- */

.bg-surface-0 {
  background-color: var(--surface-0) !important;
}

.bg-surface-1 {
  background-color: var(--surface-1) !important;
}

.bg-surface-2 {
  background-color: var(--surface-2) !important;
}

.bg-surface-3 {
  background-color: var(--surface-3) !important;
}

.bg-soft-primary {
  background-color: rgba(79, 70, 229, 0.08) !important;
}

.bg-soft-success {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

.bg-soft-warning {
  background-color: rgba(245, 158, 11, 0.08) !important;
}

.bg-soft-danger {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

/* ---------- Alignment helpers for icons/labels ---------- */

.icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-inline-sm {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-inline-lg {
  width: 2.25rem;
  height: 2.25rem;
}

/* ---------- Small badges for counts / labels ---------- */

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-pill);
  padding: 0 0.3rem;
  background-color: var(--signx-gray-100);
  color: var(--text-soft);
}

/* Status flag badge (left colored strip) */
.badge-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-0);
  border: 1px solid rgba(148, 163, 184, 0.6);
}

.badge-flag::before {
  content: "";
  width: 0.2rem;
  height: 0.9rem;
  border-radius: 999px;
  background-color: var(--signx-primary);
}

.badge-flag--success::before {
  background-color: var(--signx-success);
}

.badge-flag--warning::before {
  background-color: var(--signx-warning);
}

.badge-flag--danger::before {
  background-color: var(--signx-danger);
}

/* ---------- Inline key/value tags ---------- */

.inline-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
}

.inline-meta-key {
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.inline-meta-value {
  color: var(--text-strong);
  font-weight: 500;
}

/* ---------- Simple “pill rows” for filters ---------- */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pill-row .pill {
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  border: 1px solid rgba(148, 163, 184, 0.5);
  background-color: var(--surface-0);
  color: var(--text-soft);
  cursor: pointer;
}

.pill-row .pill-active {
  border-color: rgba(79, 70, 229, 0.7);
  background-color: rgba(79, 70, 229, 0.12);
  color: #3730a3;
}

/* ---------- Subtle card with header strip ---------- */

.card-strip {
  border-radius: var(--radius-xl);
  background-color: var(--surface-0);
  border: 1px solid rgba(148, 163, 184, 0.3);
  overflow: hidden;
}

.card-strip-header {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(90deg,
      rgba(79, 70, 229, 0.06),
      rgba(15, 23, 42, 0.02));
}

.card-strip-body {
  padding: 0.75rem 0.85rem;
}

/* ---------- Activity / log list ---------- */

.activity-log {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.activity-log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.4);
}

.activity-log-item:last-child {
  border-bottom: none;
}

.activity-log-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background-color: var(--signx-primary);
  margin-top: 0.25rem;
}

.activity-log-main {
  flex: 1 1 auto;
}

.activity-log-meta {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* ---------- Compact badge row for “filters in effect” ---------- */

.filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
}

.filter-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-1);
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: var(--text-soft);
}

/* ---------- Sticky header section for long pages ---------- */

.sticky-section-header {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 0.45rem 0;
  background: linear-gradient(to bottom,
      rgba(248, 250, 252, 0.96),
      rgba(248, 250, 252, 0.88),
      transparent);
  backdrop-filter: blur(8px);
}

/* ---------- Tag badges for domains (finance, HR, MEAL, etc.) ---------- */

.badge-domain {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--surface-1);
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: var(--text-soft);
}

.badge-domain--finance {
  border-color: rgba(34, 197, 94, 0.4);
  background-color: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.badge-domain--hr {
  border-color: rgba(129, 140, 248, 0.45);
  background-color: rgba(129, 140, 248, 0.16);
  color: #312e81;
}

.badge-domain--meal {
  border-color: rgba(59, 130, 246, 0.45);
  background-color: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}

.badge-domain--logistics {
  border-color: rgba(245, 158, 11, 0.45);
  background-color: rgba(245, 158, 11, 0.14);
  color: #92400e;
}

/* ---------- “Chip row” for roles / permissions ---------- */

.role-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.role-chip {
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  border: 1px solid rgba(148, 163, 184, 0.6);
  background-color: var(--surface-0);
  color: var(--text-soft);
}

/* ---------- Simple label blocks for settings pages ---------- */

.settings-label-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.settings-label-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-strong);
}

.settings-label-description {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* ============================================================
   HR Settings (SignX)
   ============================================================ */

.hr-settings-tabs .nav-pills.signx .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  border: 1px solid var(--signx-gray-200);
  background: var(--surface-0);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
}

.hr-settings-tabs .nav-pills.signx .nav-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(79, 70, 229, 0.25);
}

.hr-settings-tabs .nav-pills.signx .nav-link.active {
  background: linear-gradient(135deg,
      rgba(79, 70, 229, 0.1),
      rgba(16, 185, 129, 0.08));
  color: var(--signx-primary);
  border-color: rgba(79, 70, 229, 0.35);
}

/* Subtle badge style used in header */
.hr-badge {
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-weight: 700;
}

/* Repeater rows for settings (holidays, stages, leave types, roles, etc.) */
.hr-repeater {
  border: 1px dashed rgba(148, 163, 184, 0.65);
  background: linear-gradient(180deg,
      rgba(79, 70, 229, 0.04),
      rgba(255, 255, 255, 0));
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.hr-repeater:hover {
  border-color: rgba(79, 70, 229, 0.28);
  box-shadow: var(--shadow-xs);
}

/* ---------- Simple “card grid” for small tiles ---------- */

.card-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
}

/* ---------- Small notice tag above titles ---------- */

.notice-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--signx-gray-100);
  color: var(--text-soft);
}

/* ---------- Inline help text bubble ---------- */

.help-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background-color: rgba(148, 163, 184, 0.18);
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

/* ---------- Divider label (text in the middle of a line) ---------- */

.divider-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.divider-label::before,
.divider-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(148, 163, 184, 0.6);
}

/* ---------- Tiny utility to dim content ---------- */

.u-dimmed {
  opacity: 0.7;
}

/* ---------- Hover lift utility for any card ---------- */

.u-hover-lift {
  transition:
    transform var(--normal) ease,
    box-shadow var(--normal) ease;
}

.u-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ---------- Clickable list rows (for tables / cards) ---------- */

.clickable-row {
  cursor: pointer;
  transition: background-color var(--normal) ease;
}

.clickable-row:hover {
  background-color: rgba(148, 163, 184, 0.09);
}

/* ---------- Tiny labels for headings (e.g., “BETA”) ---------- */

.label-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: rgba(79, 70, 229, 0.12);
  color: #3730a3;
}

/* ============================================================
   SignX UI – Missing Components Pack (drop-in)
   Adds:
   - Pagination, breadcrumbs, dropdown menu
   - Inputs/selects + validation
   - Empty state + skeleton loader
   - Toolbar + accordion
   - Fixes signx -> signx naming mismatch
   ------------------------------------------------------------
   Notes:
   - Uses your existing CSS variables (radius/surface/shadow/text).
   - Safe to paste at END of style.css (so it overrides earlier rules).
   ============================================================ */

/* ------------------------------------------------------------
   1) Breadcrumbs
------------------------------------------------------------ */
.signx-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 12px 0;
}

.signx-breadcrumb a {
  color: inherit;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 10px);
}

.signx-breadcrumb a:hover {
  background: var(--surface-2, rgba(15, 23, 42, 0.06));
  color: var(--text, #0f172a);
}

.signx-breadcrumb .sep {
  opacity: 0.7;
  user-select: none;
}

.signx-breadcrumb .current {
  color: var(--text, #0f172a);
  font-weight: 600;
}

/* ------------------------------------------------------------
   2) Toolbar Pattern (list pages)
------------------------------------------------------------ */
.signx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-xl, 18px);
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  margin-bottom: 14px;
}

.signx-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.signx-toolbar-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.2;
}

.signx-toolbar-title h1,
.signx-toolbar-title h2,
.signx-toolbar-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.signx-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2, rgba(15, 23, 42, 0.06));
  color: var(--text, #0f172a);
}

.signx-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
}

.signx-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .signx-toolbar {
    padding: 12px;
  }

  .signx-toolbar-left {
    min-width: 100%;
    justify-content: space-between;
  }

  .signx-toolbar-filters {
    width: 100%;
    justify-content: flex-start;
  }

  .signx-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Optional sticky toolbar */
.signx-toolbar.is-sticky {
  position: sticky;
  top: 12px;
  z-index: 20;
  backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------
   3) Inputs / Selects / Textareas + Validation
------------------------------------------------------------ */
.signx-field {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.signx-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.signx-help {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.signx-error {
  font-size: 12px;
  color: var(--danger, #ef4444);
  font-weight: 600;
}

/* Base control */
.signx-control {
  width: 100%;
  appearance: none;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-1, #fff);
  color: var(--text, #0f172a);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.signx-control::placeholder {
  color: var(--text-muted, #6b7280);
  opacity: 0.85;
}

.signx-control:focus {
  outline: none;
  border-color: var(--brand, #4f46e5);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.signx-control:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--surface-2, rgba(15, 23, 42, 0.04));
}

/* Convenience aliases – apply signx-control styles directly */
.signx-input,
.signx-select,
.signx-textarea {
  width: 100%;
  appearance: none;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-1, #fff);
  color: var(--text, #0f172a);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

/* Real fallback: apply styles directly */
input.signx-input,
select.signx-select,
textarea.signx-textarea {
  width: 100%;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-1, #fff);
  color: var(--text, #0f172a);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

input.signx-input::placeholder,
select.signx-select::placeholder,
textarea.signx-textarea::placeholder {
  color: var(--text-muted, #6b7280);
  opacity: 0.85;
}

input.signx-input:focus,
select.signx-select:focus,
textarea.signx-textarea:focus {
  outline: none;
  border-color: var(--brand, #4f46e5);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

/* Select caret */
.signx-select-wrap {
  position: relative;
  display: grid;
}

.signx-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  pointer-events: none;
}

.signx-select-wrap select.signx-select {
  padding-right: 34px;
}

/* Input group (search with icon/button) */
.signx-input-group {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-1, #fff);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
}

.signx-input-group .addon {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-muted, #6b7280);
  background: var(--surface-2, rgba(15, 23, 42, 0.04));
  border-right: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}

.signx-input-group input.signx-input {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.signx-input-group .btn {
  border: 0;
  border-left: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 0;
}

/* Validation states */
.signx-field.is-invalid .signx-control,
.signx-field.is-invalid input.signx-input,
.signx-field.is-invalid select.signx-select,
.signx-field.is-invalid textarea.signx-textarea {
  border-color: var(--danger, #ef4444);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.signx-field.is-valid .signx-control,
.signx-field.is-valid input.signx-input,
.signx-field.is-valid select.signx-select,
.signx-field.is-valid textarea.signx-textarea {
  border-color: var(--success, #10b981);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

/* Inline checkbox / toggle row */
.signx-checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-lg, 14px);
  border: 1px dashed var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-2, rgba(15, 23, 42, 0.03));
}

.signx-checkline input[type="checkbox"] {
  transform: translateY(1px);
}

.signx-checkline .text {
  font-size: 13px;
  color: var(--text, #0f172a);
}

/* ------------------------------------------------------------
   5) Pagination
------------------------------------------------------------ */
.signx-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 2px 0 2px;
}

.signx-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-1, #fff);
  color: var(--text, #0f172a);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.signx-page:hover {
  background: var(--surface-2, rgba(15, 23, 42, 0.06));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.06));
}

.signx-page.is-active,
.signx-page[aria-current="page"] {
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.signx-page.is-disabled,
.signx-page[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.signx-page.ellipsis {
  border-style: dashed;
  cursor: default;
  pointer-events: none;
  opacity: 0.75;
}

@media (max-width: 768px) {
  .signx-pagination {
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   6) Empty State
------------------------------------------------------------ */
.empty-state {
  display: grid;
  gap: 10px;
  place-items: center;
  text-align: center;
  padding: 28px 18px;
  border-radius: var(--radius-2xl, 22px);
  border: 1px dashed var(--border, rgba(15, 23, 42, 0.12));
  background: var(--surface-2, rgba(15, 23, 42, 0.03));
}

.empty-state .icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
  color: var(--text-muted, #6b7280);
}

.empty-state .title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #0f172a);
  margin: 0;
}

.empty-state .text {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  max-width: 560px;
  margin: 0;
}

.empty-state .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}

/* ------------------------------------------------------------
   7) Skeleton Loader (shimmer)
------------------------------------------------------------ */
@keyframes signx-shimmer {
  0% {
    background-position: -500px 0;
  }

  100% {
    background-position: 500px 0;
  }
}

.skeleton {
  border-radius: var(--radius-lg, 14px);
  background: linear-gradient(90deg,
      rgba(15, 23, 42, 0.06) 0%,
      rgba(15, 23, 42, 0.1) 35%,
      rgba(15, 23, 42, 0.06) 70%);
  background-size: 1000px 100%;
  animation: signx-shimmer 1.3s ease-in-out infinite;
}

.skeleton-line {
  height: 12px;
  width: 100%;
  border-radius: 999px;
}

.skeleton-line.sm {
  height: 10px;
  width: 70%;
}

.skeleton-line.md {
  height: 12px;
  width: 85%;
}

.skeleton-line.lg {
  height: 14px;
  width: 95%;
}

.skeleton-card {
  border-radius: var(--radius-2xl, 22px);
  padding: 14px;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-1, #fff);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
}

.skeleton-grid {
  display: grid;
  gap: 10px;
}

/* ------------------------------------------------------------
   8) Accordion
------------------------------------------------------------ */
.signx-accordion {
  display: grid;
  gap: 10px;
}

.signx-accordion-item {
  border-radius: var(--radius-2xl, 22px);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-1, #fff);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
  overflow: hidden;
}

.signx-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.signx-accordion-title {
  display: grid;
  gap: 3px;
}

.signx-accordion-title .t {
  font-weight: 800;
  font-size: 14px;
  color: var(--text, #0f172a);
}

.signx-accordion-title .d {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.signx-accordion-chevron {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-2, rgba(15, 23, 42, 0.04));
  color: var(--text-muted, #6b7280);
  transition: transform 0.18s ease;
}

.signx-accordion-item.is-open .signx-accordion-chevron {
  transform: rotate(180deg);
}

.signx-accordion-body {
  padding: 0 14px 14px 14px;
  display: none;
}

.signx-accordion-item.is-open .signx-accordion-body {
  display: block;
}

.signx-accordion-body .inner {
  border-radius: var(--radius-xl, 18px);
  border: 1px dashed var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface-2, rgba(15, 23, 42, 0.03));
  padding: 12px;
}

/* ------------------------------------------------------------
   9) Utility: soft divider + section title
------------------------------------------------------------ */
.signx-divider {
  height: 1px;
  background: var(--border, rgba(15, 23, 42, 0.1));
  margin: 12px 0;
}

.signx-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 10px 0;
}

.signx-section-title .t {
  font-weight: 900;
  font-size: 14px;
  color: var(--text, #0f172a);
}

.signx-section-title .hint {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

/* ============================================================
   SignX UI — Advanced Missing Components Pack (NON-DUPLICATING)
   - All new styles are namespaced with .signx- to avoid collisions
   - Includes "signxx" -> "signx" compatibility aliases
   ============================================================ */

/* ---------- SignXX naming compatibility (fix) ---------- */
/* Aliases removed - use .signx-* classes directly */

/* ============================================================
   1) Layout helpers (advanced)
   ============================================================ */
.signx-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.signx-stack {
  display: grid;
  gap: 1rem;
}

.signx-stack-sm {
  display: grid;
  gap: 0.6rem;
}

.signx-stack-lg {
  display: grid;
  gap: 1.4rem;
}

.signx-row {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.signx-row-sm {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.signx-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.signx-row-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.signx-grid-2 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signx-grid-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.signx-grid-4 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
  .signx-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signx-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {

  .signx-grid-4,
  .signx-grid-3,
  .signx-grid-2 {
    grid-template-columns: 1fr;
  }
}

.signx-divider {
  height: 1px;
  background: var(--signx-border);
  margin: 0.75rem 0;
}

.signx-spacer-1 {
  height: 0.5rem;
}

.signx-spacer-2 {
  height: 1rem;
}

.signx-spacer-3 {
  height: 1.5rem;
}

.signx-sticky-top {
  position: sticky;
  top: 72px;
  z-index: 5;
}

.signx-sticky-bottom {
  position: sticky;
  bottom: 12px;
  z-index: 5;
}

/* ============================================================
   2) Surfaces / Panels / Glass cards (new)
   ============================================================ */
.signx-surface {
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.signx-surface-soft {
  background: linear-gradient(180deg, var(--signx-soft), var(--surface-0));
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.signx-surface-pad {
  padding: 1rem 1.1rem;
}

.signx-surface-pad-lg {
  padding: 1.35rem 1.35rem;
}

.signx-surface-hover {
  transition:
    transform var(--normal),
    box-shadow var(--normal),
    border-color var(--normal);
}

.signx-surface-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--signx-glow);
  border-color: color-mix(in srgb,
      var(--signx-primary) 18%,
      var(--signx-border));
}

.signx-glass {
  background: color-mix(in srgb, var(--surface-0) 76%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 65%, transparent);
  box-shadow: var(--signx-glow);
  border-radius: var(--radius-xl);
}

.signx-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(900px 200px at 10% 0%,
      rgba(99, 102, 241, 0.18),
      transparent 55%);
  opacity: 0.85;
}

.signx-glass {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   3) Headings / Kicker / Meta (new)
   ============================================================ */
.signx-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.signx-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.signx-subtitle {
  color: var(--text-soft);
  font-weight: 500;
}

.signx-meta {
  font-size: 0.86rem;
  color: var(--text-muted);
}

.signx-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signx-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   4) Badges / Chips / Status pills (new)
   ============================================================ */
.signx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  border: 1px solid var(--signx-border);
  background: var(--surface-1);
  color: var(--text-strong);
}

.signx-badge-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 99px;
  background: var(--signx-gray-400);
  display: inline-block;
}

.signx-badge-primary {
  background: color-mix(in srgb, var(--signx-primary) 12%, var(--surface-0));
  border-color: color-mix(in srgb,
      var(--signx-primary) 22%,
      var(--signx-border));
  color: var(--signx-primary-700);
}

.signx-badge-success {
  background: var(--signx-success-soft);
  border-color: color-mix(in srgb,
      var(--signx-success) 25%,
      var(--signx-border));
  color: color-mix(in srgb, var(--signx-success) 70%, var(--text-strong));
}

.signx-badge-warning {
  background: var(--signx-warning-soft);
  border-color: color-mix(in srgb,
      var(--signx-warning) 25%,
      var(--signx-border));
  color: color-mix(in srgb, var(--signx-warning) 70%, var(--text-strong));
}

.signx-badge-danger {
  background: var(--signx-danger-soft);
  border-color: color-mix(in srgb,
      var(--signx-danger) 25%,
      var(--signx-border));
  color: color-mix(in srgb, var(--signx-danger) 70%, var(--text-strong));
}

.signx-badge-info {
  background: var(--signx-info-soft);
  border-color: color-mix(in srgb, var(--signx-info) 25%, var(--signx-border));
  color: color-mix(in srgb, var(--signx-info) 70%, var(--text-strong));
}

.signx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.signx-chip .signx-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  border: 1px solid var(--signx-border);
  background: var(--surface-1);
  color: var(--text-soft);
}

.signx-chip .signx-x:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

/* ============================================================
   5) Avatars / stacks (new)
   ============================================================ */
.signx-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--signx-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--text-strong);
}

.signx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.signx-avatar-sm {
  width: 28px;
  height: 28px;
}

.signx-avatar-lg {
  width: 44px;
  height: 44px;
}

.signx-avatar-ring {
  box-shadow: var(--signx-ring);
}

.signx-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.signx-avatar-stack .signx-avatar {
  margin-left: -10px;
  border: 2px solid var(--surface-0);
}

.signx-avatar-stack .signx-avatar:first-child {
  margin-left: 0;
}

.signx-avatar-count {
  margin-left: 0.5rem;
  font-weight: 700;
  color: var(--text-soft);
}

/* ============================================================
   8) Progress / Meter (new)
   ============================================================ */
.signx-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid var(--signx-border);
}

.signx-progress>span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
      var(--signx-primary),
      color-mix(in srgb, var(--signx-primary) 65%, white));
}

.signx-meter {
  display: grid;
  gap: 0.4rem;
}

.signx-meter-top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: var(--text-soft);
}

.signx-meter-top strong {
  color: var(--text-strong);
  font-weight: 800;
}

/* ============================================================
   9) Timeline / Activity (new)
   ============================================================ */
.signx-timeline {
  position: relative;
  padding-left: 1.25rem;
  display: grid;
  gap: 1rem;
}

.signx-timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--signx-gray-200) 75%, transparent);
}

.signx-timeline-item {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
}

.signx-timeline-item::before {
  content: "";
  position: absolute;
  left: -1.12rem;
  top: 1.1rem;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--signx-primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}

.signx-timeline-title {
  font-weight: 800;
  color: var(--text-strong);
}

.signx-timeline-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.signx-timeline-body {
  color: var(--text-base);
}

/* ============================================================
   10) Toasts (new)
   ============================================================ */
.signx-toasts {
  position: fixed;
  right: 16px;
  top: 72px;
  z-index: 9999;
  display: grid;
  gap: 0.6rem;
  width: min(420px, calc(100vw - 32px));
}

.signx-toast {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-0) 86%, transparent);
  border: 1px solid var(--signx-border);
  box-shadow: var(--signx-glow-strong);
  padding: 0.85rem 0.95rem;
  display: grid;
  gap: 0.25rem;
  backdrop-filter: blur(10px);
}

.signx-toast-title {
  font-weight: 900;
  color: var(--text-strong);
}

.signx-toast-desc {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.signx-toast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.signx-toast-success {
  border-color: color-mix(in srgb,
      var(--signx-success) 30%,
      var(--signx-border));
}

.signx-toast-warning {
  border-color: color-mix(in srgb,
      var(--signx-warning) 30%,
      var(--signx-border));
}

.signx-toast-danger {
  border-color: color-mix(in srgb,
      var(--signx-danger) 30%,
      var(--signx-border));
}

.signx-toast-info {
  border-color: color-mix(in srgb, var(--signx-info) 30%, var(--signx-border));
}

/* ============================================================
   11) Modal / Drawer (new)
   ============================================================ */
.signx-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.45);
  z-index: 9990;
}

.signx-modal {
  position: fixed;
  inset: 0;
  z-index: 9991;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.signx-modal-card {
  width: min(720px, 96vw);
  border-radius: var(--radius-xl);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  box-shadow: var(--signx-glow-strong);
  overflow: hidden;
}

.signx-modal-head {
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--signx-border);
  background: linear-gradient(180deg, var(--surface-1), transparent);
}

.signx-modal-title {
  font-weight: 900;
  color: var(--text-strong);
}

.signx-modal-body {
  padding: 1.15rem;
}

.signx-modal-foot {
  padding: 0.95rem 1.15rem;
  border-top: 1px solid var(--signx-border);
  background: var(--surface-1);
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.signx-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: var(--surface-0);
  border-left: 1px solid var(--signx-border);
  box-shadow: var(--signx-glow-strong);
  z-index: 9992;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.signx-drawer-head {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--signx-border);
}

.signx-drawer-body {
  padding: 1.1rem;
  overflow: auto;
}

.signx-drawer-foot {
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--signx-border);
  background: var(--surface-1);
}

/* ============================================================
   12) Stepper (new)
   ============================================================ */
.signx-stepper {
  display: grid;
  gap: 0.7rem;
}

.signx-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.75rem;
  align-items: start;
}

.signx-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--signx-border);
  background: var(--surface-1);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--signx-primary);
}

.signx-step-title {
  font-weight: 900;
  color: var(--text-strong);
  line-height: 1.2;
}

.signx-step-desc {
  color: var(--text-soft);
  font-size: 0.92rem;
}

.signx-step.is-done .signx-step-icon {
  background: var(--signx-success-soft);
  color: color-mix(in srgb, var(--signx-success) 80%, var(--text-strong));
  border-color: color-mix(in srgb,
      var(--signx-success) 28%,
      var(--signx-border));
}

.signx-step.is-active .signx-step-icon {
  box-shadow: var(--signx-ring);
  border-color: color-mix(in srgb,
      var(--signx-primary) 35%,
      var(--signx-border));
}

/* ============================================================
   13) Data display (new): description list, key-value, code block
   ============================================================ */
.signx-kv {
  display: grid;
  gap: 0.6rem;
}

.signx-kv-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
}

.signx-kv-key {
  color: var(--text-soft);
  font-weight: 800;
  font-size: 0.9rem;
}

.signx-kv-val {
  color: var(--text-strong);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .signx-kv-row {
    grid-template-columns: 1fr;
  }
}

.signx-codeblock {
  background: var(--signx-code);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  font-family: var(--font-mono);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

.signx-codeblock .signx-code-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--font-sans);
  margin-bottom: 0.6rem;
}

.signx-codeblock .signx-code-meta span {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 700;
}

.signx-codeblock pre {
  margin: 0;
}

/* ============================================================
   14) Table enhancements (new; non-Bootstrap)
   ============================================================ */
.signx-table-wrap {
  border-radius: var(--radius-xl);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.signx-table-tools {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--signx-border);
  background: linear-gradient(180deg, var(--surface-1), transparent);
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.signx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.signx-table thead th {
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--signx-border);
  background: var(--surface-1);
}

.signx-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--signx-border) 70%, transparent);
  color: var(--text-strong);
  vertical-align: middle;
}

.signx-table tbody tr:hover td {
  background: color-mix(in srgb, var(--surface-1) 60%, transparent);
}

.signx-table .signx-cell-muted {
  color: var(--text-soft);
  font-weight: 600;
}

.signx-table .signx-cell-strong {
  color: var(--text-strong);
  font-weight: 900;
}

.signx-table .signx-cell-right {
  text-align: right;
}

.signx-table .signx-row-selected td {
  background: color-mix(in srgb, var(--signx-primary) 10%, var(--surface-0));
}

/* ============================================================
   15) Search box (new)
   ============================================================ */
.signx-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
  min-width: min(360px, 92vw);
}

.signx-search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  color: var(--text-strong);
  font-weight: 700;
}

.signx-search input::placeholder {
  color: var(--text-muted);
  font-weight: 600;
}

.signx-search:focus-within {
  box-shadow: var(--signx-ring);
  border-color: color-mix(in srgb,
      var(--signx-primary) 35%,
      var(--signx-border));
}

/* ============================================================
   16) Dropdown / Menu (new, headless-friendly)
   ============================================================ */
.signx-menu {
  position: relative;
  display: inline-block;
}

.signx-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  box-shadow: var(--signx-glow-strong);
  overflow: hidden;
  z-index: 60;
}

.signx-menu-header {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--signx-border);
  background: linear-gradient(180deg, var(--surface-1), transparent);
}

.signx-menu-title {
  font-weight: 900;
  color: var(--text-strong);
  font-size: 0.92rem;
}

.signx-menu-list {
  padding: 0.35rem;
  display: grid;
  gap: 0.15rem;
}

.signx-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  color: var(--text-strong);
  font-weight: 750;
  border: 1px solid transparent;
  background: transparent;
}

.signx-menu-item:hover {
  background: var(--surface-1);
  border-color: var(--signx-border);
}

.signx-menu-item.is-danger {
  color: color-mix(in srgb, var(--signx-danger) 75%, var(--text-strong));
}

.signx-menu-item.is-danger:hover {
  background: var(--signx-danger-soft);
  border-color: color-mix(in srgb,
      var(--signx-danger) 25%,
      var(--signx-border));
}

.signx-menu-sep {
  height: 1px;
  background: var(--signx-border);
  margin: 0.25rem 0.35rem;
}

/* ============================================================
   17) Breadcrumbs (new, separate from your .signx-breadcrumb)
   ============================================================ */
.signx-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  color: var(--text-soft);
  font-weight: 700;
}

.signx-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.signx-crumb a {
  color: var(--text-soft);
  font-weight: 800;
}

.signx-crumb a:hover {
  color: var(--signx-primary);
}

.signx-crumb-sep {
  color: var(--text-muted);
  font-weight: 900;
  margin: 0 0.15rem;
}

/* ============================================================
   18) Pagination (new, separate from Bootstrap)
   ============================================================ */
.signx-pagination {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.signx-page {
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  color: var(--text-strong);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast);
}

.signx-page:hover {
  transform: translateY(-1px);
  box-shadow: var(--signx-glow);
  background: var(--surface-1);
}

.signx-page.is-active {
  background: var(--signx-primary);
  color: #fff;
  border-color: color-mix(in srgb,
      var(--signx-primary) 55%,
      var(--signx-border));
}

.signx-page.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.signx-page-ellipsis {
  padding: 0 0.4rem;
  color: var(--text-muted);
  font-weight: 900;
}

/* ============================================================
   19) Toolbar (new)
   ============================================================ */
.signx-toolbar {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.signx-toolbar-left,
.signx-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.signx-toolbar-title {
  font-weight: 950;
  color: var(--text-strong);
}

.signx-toolbar-sub {
  color: var(--text-soft);
  font-weight: 650;
  font-size: 0.92rem;
}

/* ============================================================
   20) Accordion (new)
   ============================================================ */
.signx-accordion {
  display: grid;
  gap: 0.6rem;
}

.signx-acc-item {
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
}

.signx-acc-btn {
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, var(--surface-1), transparent);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 950;
  color: var(--text-strong);
}

.signx-acc-btn:hover {
  background: var(--surface-1);
}

.signx-acc-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid var(--signx-border);
  display: grid;
  place-items: center;
  background: var(--surface-0);
  color: var(--text-soft);
}

.signx-acc-body {
  padding: 0.95rem 1rem 1rem;
  color: var(--text-base);
  border-top: 1px solid var(--signx-border);
}

.signx-acc-item.is-open .signx-acc-icon {
  color: var(--signx-primary);
  border-color: color-mix(in srgb,
      var(--signx-primary) 28%,
      var(--signx-border));
  box-shadow: var(--signx-ring);
}

/* ============================================================
   21) Empty states (new)
   ============================================================ */
.signx-empty {
  border: 1px dashed color-mix(in srgb, var(--signx-gray-300) 80%, transparent);
  background: linear-gradient(180deg, var(--surface-1), transparent);
  border-radius: var(--radius-xl);
  padding: 1.6rem 1.2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.signx-empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  margin: 0 auto 0.85rem;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  display: grid;
  place-items: center;
  color: var(--signx-primary);
  box-shadow: var(--shadow-sm);
}

.signx-empty-title {
  font-weight: 950;
  color: var(--text-strong);
  margin-bottom: 0.25rem;
}

.signx-empty-desc {
  color: var(--text-soft);
  max-width: 52ch;
  margin: 0 auto 1rem;
}

.signx-empty-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   22) Skeleton loader (new)
   Note: @keyframes signx-shimmer defined in Section 7 Skeleton
   ============================================================ */

.signx-skel {
  border-radius: 12px;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--surface-2) 80%, white) 25%,
      color-mix(in srgb, var(--surface-1) 70%, white) 37%,
      color-mix(in srgb, var(--surface-2) 80%, white) 63%);
  background-size: 400% 100%;
  animation: signx-shimmer 1.2s ease-in-out infinite;
  border: 1px solid color-mix(in srgb, var(--signx-border) 70%, transparent);
}

.signx-skel-line {
  height: 12px;
}

.signx-skel-line.sm {
  height: 10px;
}

.signx-skel-line.lg {
  height: 16px;
}

.signx-skel-card {
  height: 120px;
  border-radius: var(--radius-xl);
}

.signx-skel-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.signx-skel-btn {
  width: 120px;
  height: 40px;
  border-radius: 999px;
}

/* ============================================================
   23) Form fields (new, non-duplicating)
   ============================================================ */
.signx-field {
  display: grid;
  gap: 0.4rem;
}

.signx-label {
  font-weight: 900;
  color: var(--text-strong);
  font-size: 0.9rem;
}

.signx-hint {
  color: var(--text-muted);
  font-weight: 650;
  font-size: 0.85rem;
}

.signx-control {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  padding: 0.65rem 0.8rem;
  color: var(--text-strong);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--fast),
    border-color var(--fast),
    background var(--fast);
}

.signx-control::placeholder {
  color: var(--text-muted);
  font-weight: 650;
}

.signx-control:focus {
  outline: none;
  box-shadow: var(--signx-ring);
  border-color: color-mix(in srgb,
      var(--signx-primary) 35%,
      var(--signx-border));
}

.signx-control:disabled {
  opacity: 0.65;
  background: var(--surface-1);
  cursor: not-allowed;
}

.signx-textarea {
  min-height: 110px;
  resize: vertical;
}

.signx-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.signx-helprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.signx-validation {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 0.86rem;
}

.signx-validation.ok {
  color: color-mix(in srgb, var(--signx-success) 75%, var(--text-strong));
}

.signx-validation.err {
  color: color-mix(in srgb, var(--signx-danger) 75%, var(--text-strong));
}

.signx-control.is-valid {
  border-color: color-mix(in srgb,
      var(--signx-success) 35%,
      var(--signx-border));
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

.signx-control.is-invalid {
  border-color: color-mix(in srgb,
      var(--signx-danger) 35%,
      var(--signx-border));
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

.signx-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}

.signx-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.signx-switch-track {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--signx-border);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition:
    background var(--fast),
    border-color var(--fast);
}

.signx-switch-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  position: absolute;
  top: 1px;
  left: 1px;
  transition: transform var(--fast);
}

.signx-switch input:checked+.signx-switch-track {
  background: color-mix(in srgb, var(--signx-primary) 20%, var(--surface-2));
  border-color: color-mix(in srgb,
      var(--signx-primary) 30%,
      var(--signx-border));
}

.signx-switch input:checked+.signx-switch-track .signx-switch-thumb {
  transform: translateX(20px);
}

.signx-switch-text {
  font-weight: 800;
  color: var(--text-strong);
}

/* ============================================================
   24) Command palette / quick find (new)
   ============================================================ */
.signx-cmdk {
  border-radius: var(--radius-xl);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  box-shadow: var(--signx-glow-strong);
  overflow: hidden;
}

.signx-cmdk-top {
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid var(--signx-border);
  display: flex;
  gap: 0.6rem;
  align-items: center;
  background: linear-gradient(180deg, var(--surface-1), transparent);
}

.signx-cmdk-input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  font-weight: 850;
  color: var(--text-strong);
}

.signx-cmdk-input::placeholder {
  color: var(--text-muted);
  font-weight: 650;
}

.signx-cmdk-list {
  max-height: 340px;
  overflow: auto;
  padding: 0.35rem;
  display: grid;
  gap: 0.2rem;
}

.signx-cmdk-item {
  padding: 0.65rem 0.7rem;
  border-radius: 14px;
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  font-weight: 800;
  color: var(--text-strong);
}

.signx-cmdk-item:hover {
  background: var(--surface-1);
  border-color: var(--signx-border);
}

.signx-cmdk-kbd {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  border-radius: 10px;
  padding: 0.15rem 0.35rem;
}

/* ============================================================
   25) Callouts / Inline alerts (new)
   ============================================================ */
.signx-callout {
  border-radius: var(--radius-xl);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.35rem;
  box-shadow: var(--shadow-sm);
}

.signx-callout-title {
  font-weight: 950;
  color: var(--text-strong);
}

.signx-callout-desc {
  color: var(--text-soft);
}

.signx-callout.primary {
  border-color: color-mix(in srgb,
      var(--signx-primary) 30%,
      var(--signx-border));
  background: color-mix(in srgb, var(--signx-primary) 9%, var(--surface-0));
}

.signx-callout.success {
  border-color: color-mix(in srgb,
      var(--signx-success) 30%,
      var(--signx-border));
  background: var(--signx-success-soft);
}

.signx-callout.warning {
  border-color: color-mix(in srgb,
      var(--signx-warning) 30%,
      var(--signx-border));
  background: var(--signx-warning-soft);
}

.signx-callout.danger {
  border-color: color-mix(in srgb,
      var(--signx-danger) 30%,
      var(--signx-border));
  background: var(--signx-danger-soft);
}

.signx-callout.info {
  border-color: color-mix(in srgb, var(--signx-info) 30%, var(--signx-border));
  background: var(--signx-info-soft);
}

/* ============================================================
   26) Mini stat cards (new)
   ============================================================ */
.signx-stat {
  border-radius: var(--radius-xl);
  border: 1px solid var(--signx-border);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--shadow-sm);
  padding: 1rem 1rem;
  display: grid;
  gap: 0.35rem;
}

.signx-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.signx-stat-label {
  color: var(--text-soft);
  font-weight: 800;
  font-size: 0.9rem;
}

.signx-stat-value {
  font-weight: 950;
  color: var(--text-strong);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  letter-spacing: -0.02em;
}

.signx-stat-foot {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.signx-stat-trend {
  font-weight: 900;
  font-size: 0.86rem;
}

.signx-stat-trend.up {
  color: color-mix(in srgb, var(--signx-success) 80%, var(--text-strong));
}

.signx-stat-trend.down {
  color: color-mix(in srgb, var(--signx-danger) 80%, var(--text-strong));
}

/* ============================================================
   27) Hover lift + soft outline utilities (new)
   ============================================================ */
.signx-lift {
  transition:
    transform var(--normal),
    box-shadow var(--normal),
    border-color var(--normal);
}

.signx-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--signx-glow);
  border-color: color-mix(in srgb,
      var(--signx-primary) 18%,
      var(--signx-border));
}

.signx-outline {
  border: 1px solid var(--signx-border);
}

.signx-outline-primary {
  border-color: color-mix(in srgb,
      var(--signx-primary) 28%,
      var(--signx-border));
}

.signx-outline-success {
  border-color: color-mix(in srgb,
      var(--signx-success) 28%,
      var(--signx-border));
}

.signx-outline-warning {
  border-color: color-mix(in srgb,
      var(--signx-warning) 28%,
      var(--signx-border));
}

.signx-outline-danger {
  border-color: color-mix(in srgb,
      var(--signx-danger) 28%,
      var(--signx-border));
}

.signx-outline-info {
  border-color: color-mix(in srgb, var(--signx-info) 28%, var(--signx-border));
}

/* ============================================================
   28) Dark theme friendliness (new pack)
   ============================================================ */
html[data-theme="dark"] .signx-surface,
body.theme-dark .signx-surface,
html[data-theme="dark"] .signx-surface-soft,
body.theme-dark .signx-surface-soft,
html[data-theme="dark"] .signx-table-wrap,
body.theme-dark .signx-table-wrap,
html[data-theme="dark"] .signx-modal-card,
body.theme-dark .signx-modal-card,
html[data-theme="dark"] .signx-drawer,
body.theme-dark .signx-drawer,
html[data-theme="dark"] .signx-menu-panel,
body.theme-dark .signx-menu-panel {
  background: color-mix(in srgb,
      var(--surface-0) 92%,
      rgba(255, 255, 255, 0.02));
  border-color: color-mix(in srgb, var(--signx-gray-200) 70%, transparent);
}

html[data-theme="dark"] .signx-overlay,
body.theme-dark .signx-overlay {
  background: rgba(2, 6, 23, 0.62);
}

/* ============================================================
   SignX UI — signx Mega Utilities Pack (500+ new styles)
   Prefix: .signx-
   Safe: utility-only, no overlap required with your existing rules.
   Paste at END of style.css
   ============================================================ */

/* Margin utilities (m, mx, my, mt, mr, mb, ml) */
.signx-m-0 {
  margin: var(--signx-s0) !important;
}

.signx-m-1 {
  margin: var(--signx-s1) !important;
}

.signx-m-2 {
  margin: var(--signx-s2) !important;
}

.signx-m-3 {
  margin: var(--signx-s3) !important;
}

.signx-m-4 {
  margin: var(--signx-s4) !important;
}

.signx-m-5 {
  margin: var(--signx-s5) !important;
}

.signx-m-6 {
  margin: var(--signx-s6) !important;
}

.signx-m-7 {
  margin: var(--signx-s7) !important;
}

.signx-m-8 {
  margin: var(--signx-s8) !important;
}

.signx-m-9 {
  margin: var(--signx-s9) !important;
}

.signx-m-10 {
  margin: var(--signx-s10) !important;
}

.signx-mx-0 {
  margin-left: var(--signx-s0) !important;
  margin-right: var(--signx-s0) !important;
}

.signx-mx-1 {
  margin-left: var(--signx-s1) !important;
  margin-right: var(--signx-s1) !important;
}

.signx-mx-2 {
  margin-left: var(--signx-s2) !important;
  margin-right: var(--signx-s2) !important;
}

.signx-mx-3 {
  margin-left: var(--signx-s3) !important;
  margin-right: var(--signx-s3) !important;
}

.signx-mx-4 {
  margin-left: var(--signx-s4) !important;
  margin-right: var(--signx-s4) !important;
}

.signx-mx-5 {
  margin-left: var(--signx-s5) !important;
  margin-right: var(--signx-s5) !important;
}

.signx-mx-6 {
  margin-left: var(--signx-s6) !important;
  margin-right: var(--signx-s6) !important;
}

.signx-mx-7 {
  margin-left: var(--signx-s7) !important;
  margin-right: var(--signx-s7) !important;
}

.signx-mx-8 {
  margin-left: var(--signx-s8) !important;
  margin-right: var(--signx-s8) !important;
}

.signx-mx-9 {
  margin-left: var(--signx-s9) !important;
  margin-right: var(--signx-s9) !important;
}

.signx-mx-10 {
  margin-left: var(--signx-s10) !important;
  margin-right: var(--signx-s10) !important;
}

.signx-my-0 {
  margin-top: var(--signx-s0) !important;
  margin-bottom: var(--signx-s0) !important;
}

.signx-my-1 {
  margin-top: var(--signx-s1) !important;
  margin-bottom: var(--signx-s1) !important;
}

.signx-my-2 {
  margin-top: var(--signx-s2) !important;
  margin-bottom: var(--signx-s2) !important;
}

.signx-my-3 {
  margin-top: var(--signx-s3) !important;
  margin-bottom: var(--signx-s3) !important;
}

.signx-my-4 {
  margin-top: var(--signx-s4) !important;
  margin-bottom: var(--signx-s4) !important;
}

.signx-my-5 {
  margin-top: var(--signx-s5) !important;
  margin-bottom: var(--signx-s5) !important;
}

.signx-my-6 {
  margin-top: var(--signx-s6) !important;
  margin-bottom: var(--signx-s6) !important;
}

.signx-my-7 {
  margin-top: var(--signx-s7) !important;
  margin-bottom: var(--signx-s7) !important;
}

.signx-my-8 {
  margin-top: var(--signx-s8) !important;
  margin-bottom: var(--signx-s8) !important;
}

.signx-my-9 {
  margin-top: var(--signx-s9) !important;
  margin-bottom: var(--signx-s9) !important;
}

.signx-my-10 {
  margin-top: var(--signx-s10) !important;
  margin-bottom: var(--signx-s10) !important;
}

.signx-mt-0 {
  margin-top: var(--signx-s0) !important;
}

.signx-mt-1 {
  margin-top: var(--signx-s1) !important;
}

.signx-mt-2 {
  margin-top: var(--signx-s2) !important;
}

.signx-mt-3 {
  margin-top: var(--signx-s3) !important;
}

.signx-mt-4 {
  margin-top: var(--signx-s4) !important;
}

.signx-mt-5 {
  margin-top: var(--signx-s5) !important;
}

.signx-mt-6 {
  margin-top: var(--signx-s6) !important;
}

.signx-mt-7 {
  margin-top: var(--signx-s7) !important;
}

.signx-mt-8 {
  margin-top: var(--signx-s8) !important;
}

.signx-mt-9 {
  margin-top: var(--signx-s9) !important;
}

.signx-mt-10 {
  margin-top: var(--signx-s10) !important;
}

.signx-mr-0 {
  margin-right: var(--signx-s0) !important;
}

.signx-mr-1 {
  margin-right: var(--signx-s1) !important;
}

.signx-mr-2 {
  margin-right: var(--signx-s2) !important;
}

.signx-mr-3 {
  margin-right: var(--signx-s3) !important;
}

.signx-mr-4 {
  margin-right: var(--signx-s4) !important;
}

.signx-mr-5 {
  margin-right: var(--signx-s5) !important;
}

.signx-mr-6 {
  margin-right: var(--signx-s6) !important;
}

.signx-mr-7 {
  margin-right: var(--signx-s7) !important;
}

.signx-mr-8 {
  margin-right: var(--signx-s8) !important;
}

.signx-mr-9 {
  margin-right: var(--signx-s9) !important;
}

.signx-mr-10 {
  margin-right: var(--signx-s10) !important;
}

.signx-mb-0 {
  margin-bottom: var(--signx-s0) !important;
}

.signx-mb-1 {
  margin-bottom: var(--signx-s1) !important;
}

.signx-mb-2 {
  margin-bottom: var(--signx-s2) !important;
}

.signx-mb-3 {
  margin-bottom: var(--signx-s3) !important;
}

.signx-mb-4 {
  margin-bottom: var(--signx-s4) !important;
}

.signx-mb-5 {
  margin-bottom: var(--signx-s5) !important;
}

.signx-mb-6 {
  margin-bottom: var(--signx-s6) !important;
}

.signx-mb-7 {
  margin-bottom: var(--signx-s7) !important;
}

.signx-mb-8 {
  margin-bottom: var(--signx-s8) !important;
}

.signx-mb-9 {
  margin-bottom: var(--signx-s9) !important;
}

.signx-mb-10 {
  margin-bottom: var(--signx-s10) !important;
}

.signx-ml-0 {
  margin-left: var(--signx-s0) !important;
}

.signx-ml-1 {
  margin-left: var(--signx-s1) !important;
}

.signx-ml-2 {
  margin-left: var(--signx-s2) !important;
}

.signx-ml-3 {
  margin-left: var(--signx-s3) !important;
}

.signx-ml-4 {
  margin-left: var(--signx-s4) !important;
}

.signx-ml-5 {
  margin-left: var(--signx-s5) !important;
}

.signx-ml-6 {
  margin-left: var(--signx-s6) !important;
}

.signx-ml-7 {
  margin-left: var(--signx-s7) !important;
}

.signx-ml-8 {
  margin-left: var(--signx-s8) !important;
}

.signx-ml-9 {
  margin-left: var(--signx-s9) !important;
}

.signx-ml-10 {
  margin-left: var(--signx-s10) !important;
}

/* Padding utilities (p, px, py, pt, pr, pb, pl) */
.signx-p-0 {
  padding: var(--signx-s0) !important;
}

.signx-p-1 {
  padding: var(--signx-s1) !important;
}

.signx-p-2 {
  padding: var(--signx-s2) !important;
}

.signx-p-3 {
  padding: var(--signx-s3) !important;
}

.signx-p-4 {
  padding: var(--signx-s4) !important;
}

.signx-p-5 {
  padding: var(--signx-s5) !important;
}

.signx-p-6 {
  padding: var(--signx-s6) !important;
}

.signx-p-7 {
  padding: var(--signx-s7) !important;
}

.signx-p-8 {
  padding: var(--signx-s8) !important;
}

.signx-p-9 {
  padding: var(--signx-s9) !important;
}

.signx-p-10 {
  padding: var(--signx-s10) !important;
}

.signx-px-0 {
  padding-left: var(--signx-s0) !important;
  padding-right: var(--signx-s0) !important;
}

.signx-px-1 {
  padding-left: var(--signx-s1) !important;
  padding-right: var(--signx-s1) !important;
}

.signx-px-2 {
  padding-left: var(--signx-s2) !important;
  padding-right: var(--signx-s2) !important;
}

.signx-px-3 {
  padding-left: var(--signx-s3) !important;
  padding-right: var(--signx-s3) !important;
}

.signx-px-4 {
  padding-left: var(--signx-s4) !important;
  padding-right: var(--signx-s4) !important;
}

.signx-px-5 {
  padding-left: var(--signx-s5) !important;
  padding-right: var(--signx-s5) !important;
}

.signx-px-6 {
  padding-left: var(--signx-s6) !important;
  padding-right: var(--signx-s6) !important;
}

.signx-px-7 {
  padding-left: var(--signx-s7) !important;
  padding-right: var(--signx-s7) !important;
}

.signx-px-8 {
  padding-left: var(--signx-s8) !important;
  padding-right: var(--signx-s8) !important;
}

.signx-px-9 {
  padding-left: var(--signx-s9) !important;
  padding-right: var(--signx-s9) !important;
}

.signx-px-10 {
  padding-left: var(--signx-s10) !important;
  padding-right: var(--signx-s10) !important;
}

.signx-py-0 {
  padding-top: var(--signx-s0) !important;
  padding-bottom: var(--signx-s0) !important;
}

.signx-py-1 {
  padding-top: var(--signx-s1) !important;
  padding-bottom: var(--signx-s1) !important;
}

.signx-py-2 {
  padding-top: var(--signx-s2) !important;
  padding-bottom: var(--signx-s2) !important;
}

.signx-py-3 {
  padding-top: var(--signx-s3) !important;
  padding-bottom: var(--signx-s3) !important;
}

.signx-py-4 {
  padding-top: var(--signx-s4) !important;
  padding-bottom: var(--signx-s4) !important;
}

.signx-py-5 {
  padding-top: var(--signx-s5) !important;
  padding-bottom: var(--signx-s5) !important;
}

.signx-py-6 {
  padding-top: var(--signx-s6) !important;
  padding-bottom: var(--signx-s6) !important;
}

.signx-py-7 {
  padding-top: var(--signx-s7) !important;
  padding-bottom: var(--signx-s7) !important;
}

.signx-py-8 {
  padding-top: var(--signx-s8) !important;
  padding-bottom: var(--signx-s8) !important;
}

.signx-py-9 {
  padding-top: var(--signx-s9) !important;
  padding-bottom: var(--signx-s9) !important;
}

.signx-py-10 {
  padding-top: var(--signx-s10) !important;
  padding-bottom: var(--signx-s10) !important;
}

.signx-pt-0 {
  padding-top: var(--signx-s0) !important;
}

.signx-pt-1 {
  padding-top: var(--signx-s1) !important;
}

.signx-pt-2 {
  padding-top: var(--signx-s2) !important;
}

.signx-pt-3 {
  padding-top: var(--signx-s3) !important;
}

.signx-pt-4 {
  padding-top: var(--signx-s4) !important;
}

.signx-pt-5 {
  padding-top: var(--signx-s5) !important;
}

.signx-pt-6 {
  padding-top: var(--signx-s6) !important;
}

.signx-pt-7 {
  padding-top: var(--signx-s7) !important;
}

.signx-pt-8 {
  padding-top: var(--signx-s8) !important;
}

.signx-pt-9 {
  padding-top: var(--signx-s9) !important;
}

.signx-pt-10 {
  padding-top: var(--signx-s10) !important;
}

.signx-pr-0 {
  padding-right: var(--signx-s0) !important;
}

.signx-pr-1 {
  padding-right: var(--signx-s1) !important;
}

.signx-pr-2 {
  padding-right: var(--signx-s2) !important;
}

.signx-pr-3 {
  padding-right: var(--signx-s3) !important;
}

.signx-pr-4 {
  padding-right: var(--signx-s4) !important;
}

.signx-pr-5 {
  padding-right: var(--signx-s5) !important;
}

.signx-pr-6 {
  padding-right: var(--signx-s6) !important;
}

.signx-pr-7 {
  padding-right: var(--signx-s7) !important;
}

.signx-pr-8 {
  padding-right: var(--signx-s8) !important;
}

.signx-pr-9 {
  padding-right: var(--signx-s9) !important;
}

.signx-pr-10 {
  padding-right: var(--signx-s10) !important;
}

.signx-pb-0 {
  padding-bottom: var(--signx-s0) !important;
}

.signx-pb-1 {
  padding-bottom: var(--signx-s1) !important;
}

.signx-pb-2 {
  padding-bottom: var(--signx-s2) !important;
}

.signx-pb-3 {
  padding-bottom: var(--signx-s3) !important;
}

.signx-pb-4 {
  padding-bottom: var(--signx-s4) !important;
}

.signx-pb-5 {
  padding-bottom: var(--signx-s5) !important;
}

.signx-pb-6 {
  padding-bottom: var(--signx-s6) !important;
}

.signx-pb-7 {
  padding-bottom: var(--signx-s7) !important;
}

.signx-pb-8 {
  padding-bottom: var(--signx-s8) !important;
}

.signx-pb-9 {
  padding-bottom: var(--signx-s9) !important;
}

.signx-pb-10 {
  padding-bottom: var(--signx-s10) !important;
}

.signx-pl-0 {
  padding-left: var(--signx-s0) !important;
}

.signx-pl-1 {
  padding-left: var(--signx-s1) !important;
}

.signx-pl-2 {
  padding-left: var(--signx-s2) !important;
}

.signx-pl-3 {
  padding-left: var(--signx-s3) !important;
}

.signx-pl-4 {
  padding-left: var(--signx-s4) !important;
}

.signx-pl-5 {
  padding-left: var(--signx-s5) !important;
}

.signx-pl-6 {
  padding-left: var(--signx-s6) !important;
}

.signx-pl-7 {
  padding-left: var(--signx-s7) !important;
}

.signx-pl-8 {
  padding-left: var(--signx-s8) !important;
}

.signx-pl-9 {
  padding-left: var(--signx-s9) !important;
}

.signx-pl-10 {
  padding-left: var(--signx-s10) !important;
}

/* Gap utilities */
.signx-gap-0 {
  gap: 0 !important;
}

.signx-gap-1 {
  gap: var(--signx-s1) !important;
}

.signx-gap-2 {
  gap: var(--signx-s2) !important;
}

.signx-gap-3 {
  gap: var(--signx-s3) !important;
}

.signx-gap-4 {
  gap: var(--signx-s4) !important;
}

.signx-gap-5 {
  gap: var(--signx-s5) !important;
}

.signx-gap-6 {
  gap: var(--signx-s6) !important;
}

.signx-gap-7 {
  gap: var(--signx-s7) !important;
}

.signx-gap-8 {
  gap: var(--signx-s8) !important;
}

.signx-gap-9 {
  gap: var(--signx-s9) !important;
}

.signx-gap-10 {
  gap: var(--signx-s10) !important;
}

.signx-gapx-1 {
  column-gap: var(--signx-s1) !important;
}

.signx-gapx-2 {
  column-gap: var(--signx-s2) !important;
}

.signx-gapx-3 {
  column-gap: var(--signx-s3) !important;
}

.signx-gapx-4 {
  column-gap: var(--signx-s4) !important;
}

.signx-gapx-5 {
  column-gap: var(--signx-s5) !important;
}

.signx-gapx-6 {
  column-gap: var(--signx-s6) !important;
}

.signx-gapy-1 {
  row-gap: var(--signx-s1) !important;
}

.signx-gapy-2 {
  row-gap: var(--signx-s2) !important;
}

.signx-gapy-3 {
  row-gap: var(--signx-s3) !important;
}

.signx-gapy-4 {
  row-gap: var(--signx-s4) !important;
}

.signx-gapy-5 {
  row-gap: var(--signx-s5) !important;
}

.signx-gapy-6 {
  row-gap: var(--signx-s6) !important;
}

/* ---------------------------
   B) Display / Layout
--------------------------- */
.signx-block {
  display: block !important;
}

.signx-inline {
  display: inline !important;
}

.signx-inline-block {
  display: inline-block !important;
}

.signx-flex {
  display: flex !important;
}

.signx-inline-flex {
  display: inline-flex !important;
}

.signx-grid {
  display: grid !important;
}

.signx-inline-grid {
  display: inline-grid !important;
}

.signx-hidden {
  display: none !important;
}

.signx-flex-row {
  flex-direction: row !important;
}

.signx-flex-col {
  flex-direction: column !important;
}

.signx-flex-wrap {
  flex-wrap: wrap !important;
}

.signx-flex-nowrap {
  flex-wrap: nowrap !important;
}

.signx-items-start {
  align-items: flex-start !important;
}

.signx-items-center {
  align-items: center !important;
}

.signx-items-end {
  align-items: flex-end !important;
}

.signx-items-stretch {
  align-items: stretch !important;
}

.signx-justify-start {
  justify-content: flex-start !important;
}

.signx-justify-center {
  justify-content: center !important;
}

.signx-justify-end {
  justify-content: flex-end !important;
}

.signx-justify-between {
  justify-content: space-between !important;
}

.signx-justify-around {
  justify-content: space-around !important;
}

.signx-self-start {
  align-self: flex-start !important;
}

.signx-self-center {
  align-self: center !important;
}

.signx-self-end {
  align-self: flex-end !important;
}

.signx-self-stretch {
  align-self: stretch !important;
}

.signx-grow {
  flex: 1 1 auto !important;
}

.signx-shrink-0 {
  flex-shrink: 0 !important;
}

.signx-basis-0 {
  flex-basis: 0 !important;
}

.signx-basis-auto {
  flex-basis: auto !important;
}

.signx-grid-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.signx-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.signx-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.signx-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.signx-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.signx-grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

@media (max-width: 991.98px) {
  .signx-md-grid-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .signx-md-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .signx-md-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 575.98px) {
  .signx-sm-grid-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .signx-sm-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------------------------
   C) Sizing utilities
--------------------------- */
.signx-w-auto {
  width: auto !important;
}

.signx-w-full {
  width: 100% !important;
}

.signx-w-screen {
  width: 100vw !important;
}

.signx-w-25 {
  width: 25% !important;
}

.signx-w-33 {
  width: 33.333% !important;
}

.signx-w-50 {
  width: 50% !important;
}

.signx-w-66 {
  width: 66.666% !important;
}

.signx-w-75 {
  width: 75% !important;
}

.signx-maxw-sm {
  max-width: 480px !important;
}

.signx-maxw-md {
  max-width: 720px !important;
}

.signx-maxw-lg {
  max-width: 960px !important;
}

.signx-maxw-xl {
  max-width: 1200px !important;
}

.signx-h-auto {
  height: auto !important;
}

.signx-h-full {
  height: 100% !important;
}

.signx-h-screen {
  height: 100vh !important;
}

.signx-minh-0 {
  min-height: 0 !important;
}

.signx-minh-screen {
  min-height: 100vh !important;
}

.signx-ov-hidden {
  overflow: hidden !important;
}

.signx-ov-auto {
  overflow: auto !important;
}

.signx-ovx-auto {
  overflow-x: auto !important;
}

.signx-ovy-auto {
  overflow-y: auto !important;
}

.signx-scroll-smooth {
  scroll-behavior: smooth !important;
}

/* ---------------------------
   D) Typography
--------------------------- */
.signx-text-xs {
  font-size: 0.75rem !important;
}

.signx-text-sm {
  font-size: 0.875rem !important;
}

.signx-text-base {
  font-size: 1rem !important;
}

.signx-text-lg {
  font-size: 1.125rem !important;
}

.signx-text-xl {
  font-size: 1.25rem !important;
}

.signx-text-2xl {
  font-size: 1.5rem !important;
}

.signx-text-3xl {
  font-size: 1.875rem !important;
}

.signx-font-400 {
  font-weight: 400 !important;
}

.signx-font-500 {
  font-weight: 500 !important;
}

.signx-font-600 {
  font-weight: 600 !important;
}

.signx-font-700 {
  font-weight: 700 !important;
}

.signx-font-800 {
  font-weight: 800 !important;
}

.signx-font-900 {
  font-weight: 900 !important;
}

.signx-leading-tight {
  line-height: 1.15 !important;
}

.signx-leading-snug {
  line-height: 1.25 !important;
}

.signx-leading-normal {
  line-height: 1.5 !important;
}

.signx-leading-relaxed {
  line-height: 1.65 !important;
}

.signx-tracking-tight {
  letter-spacing: -0.02em !important;
}

.signx-tracking-normal {
  letter-spacing: 0 !important;
}

.signx-tracking-wide {
  letter-spacing: 0.06em !important;
}

.signx-uppercase {
  text-transform: uppercase !important;
}

.signx-lowercase {
  text-transform: lowercase !important;
}

.signx-capitalize {
  text-transform: capitalize !important;
}

.signx-text-left {
  text-align: left !important;
}

.signx-text-center {
  text-align: center !important;
}

.signx-text-right {
  text-align: right !important;
}

.signx-nowrap {
  white-space: nowrap !important;
}

.signx-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.signx-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.signx-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ---------------------------
   E) Colors (text/background/border) mapped to your SignX tokens
--------------------------- */
.signx-text-strong {
  color: var(--text-strong) !important;
}

.signx-text-basec {
  color: var(--text-base) !important;
}

.signx-text-soft {
  color: var(--text-soft) !important;
}

.signx-text-muted {
  color: var(--text-muted) !important;
}

.signx-text-primary {
  color: var(--signx-primary) !important;
}

.signx-text-success {
  color: var(--signx-success) !important;
}

.signx-text-warning {
  color: var(--signx-warning) !important;
}

.signx-text-danger {
  color: var(--signx-danger) !important;
}

.signx-text-info {
  color: var(--signx-info) !important;
}

.signx-bg-0 {
  background: var(--surface-0) !important;
}

.signx-bg-1 {
  background: var(--surface-1) !important;
}

.signx-bg-2 {
  background: var(--surface-2) !important;
}

.signx-bg-primary-soft {
  background: color-mix(in srgb,
      var(--signx-primary) 10%,
      var(--surface-0)) !important;
}

.signx-bg-success-soft {
  background: color-mix(in srgb,
      var(--signx-success) 12%,
      var(--surface-0)) !important;
}

.signx-bg-warning-soft {
  background: color-mix(in srgb,
      var(--signx-warning) 12%,
      var(--surface-0)) !important;
}

.signx-bg-danger-soft {
  background: color-mix(in srgb,
      var(--signx-danger) 10%,
      var(--surface-0)) !important;
}

.signx-bg-info-soft {
  background: color-mix(in srgb,
      var(--signx-info) 12%,
      var(--surface-0)) !important;
}

.signx-border {
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent) !important;
}

.signx-border-0 {
  border: 0 !important;
}

.signx-border-top {
  border-top: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent) !important;
}

.signx-border-bottom {
  border-bottom: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent) !important;
}

.signx-border-left {
  border-left: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent) !important;
}

.signx-border-right {
  border-right: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent) !important;
}

.signx-border-primary {
  border-color: color-mix(in srgb,
      var(--signx-primary) 30%,
      var(--signx-gray-200)) !important;
}

.signx-border-success {
  border-color: color-mix(in srgb,
      var(--signx-success) 30%,
      var(--signx-gray-200)) !important;
}

.signx-border-warning {
  border-color: color-mix(in srgb,
      var(--signx-warning) 30%,
      var(--signx-gray-200)) !important;
}

.signx-border-danger {
  border-color: color-mix(in srgb,
      var(--signx-danger) 30%,
      var(--signx-gray-200)) !important;
}

.signx-border-info {
  border-color: color-mix(in srgb,
      var(--signx-info) 30%,
      var(--signx-gray-200)) !important;
}

/* ---------------------------
   F) Radius / Shadow / Effects
--------------------------- */
.signx-rounded-none {
  border-radius: 0 !important;
}

.signx-rounded-sm {
  border-radius: var(--radius-sm) !important;
}

.signx-rounded-md {
  border-radius: var(--radius-md) !important;
}

.signx-rounded-lg {
  border-radius: var(--radius-lg) !important;
}

.signx-rounded-xl {
  border-radius: var(--radius-xl) !important;
}

.signx-rounded-2xl {
  border-radius: var(--radius-2xl) !important;
}

.signx-rounded-full {
  border-radius: 9999px !important;
}

.signx-shadow-xs {
  box-shadow: var(--shadow-xs) !important;
}

.signx-shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.signx-shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.signx-shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.signx-shadow-none {
  box-shadow: none !important;
}

.signx-ring {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18) !important;
}

.signx-ring-success {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18) !important;
}

.signx-ring-warning {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important;
}

.signx-ring-danger {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18) !important;
}

.signx-backdrop-blur {
  backdrop-filter: blur(10px) !important;
}

.signx-glass {
  background: color-mix(in srgb, var(--surface-0) 78%, transparent) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 60%, transparent) !important;
}

/* ---------------------------
   G) Positioning / Z-index
--------------------------- */
.signx-relative {
  position: relative !important;
}

.signx-absolute {
  position: absolute !important;
}

.signx-fixed {
  position: fixed !important;
}

.signx-sticky {
  position: sticky !important;
}

.signx-top-0 {
  top: 0 !important;
}

.signx-right-0 {
  right: 0 !important;
}

.signx-bottom-0 {
  bottom: 0 !important;
}

.signx-left-0 {
  left: 0 !important;
}

.signx-inset-0 {
  inset: 0 !important;
}

.signx-z-1 {
  z-index: 1 !important;
}

.signx-z-10 {
  z-index: 10 !important;
}

.signx-z-20 {
  z-index: 20 !important;
}

.signx-z-50 {
  z-index: 50 !important;
}

.signx-z-100 {
  z-index: 100 !important;
}

/* ---------------------------
   H) Interaction helpers
--------------------------- */
.signx-cursor-pointer {
  cursor: pointer !important;
}

.signx-cursor-default {
  cursor: default !important;
}

.signx-cursor-notallowed {
  cursor: not-allowed !important;
}

.signx-select-none {
  user-select: none !important;
}

.signx-select-text {
  user-select: text !important;
}

.signx-pointer-none {
  pointer-events: none !important;
}

.signx-pointer-auto {
  pointer-events: auto !important;
}

/* ---------------------------
   I) Transitions / Animations (advanced)
--------------------------- */
.signx-transition {
  transition: all 0.18s ease !important;
}

.signx-transition-fast {
  transition: all 0.12s ease !important;
}

.signx-transition-slow {
  transition: all 0.28s ease !important;
}

.signx-ease-in {
  transition-timing-function: ease-in !important;
}

.signx-ease-out {
  transition-timing-function: ease-out !important;
}

.signx-ease-inout {
  transition-timing-function: ease-in-out !important;
}

@keyframes signx-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes signx-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes signx-pop {
  0% {
    transform: scale(0.98);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes signx-slide-right {
  from {
    transform: translateX(-10px);
    opacity: 0.6;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes signx-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

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

  100% {
    background-position: -200% 0;
  }
}

.signx-anim-fade-in {
  animation: signx-fade-in 0.18s ease both !important;
}

.signx-anim-fade-up {
  animation: signx-fade-up 0.22s ease both !important;
}

.signx-anim-pop {
  animation: signx-pop 0.16s ease both !important;
}

.signx-anim-slide-right {
  animation: signx-slide-right 0.2s ease both !important;
}

.signx-anim-pulse {
  animation: signx-pulse 1.2s ease-in-out infinite !important;
}

/* ---------------------------
   J) Advanced Components (each adds multiple new styles)
--------------------------- */

/* 1) Elevated panel */
.signx-panel {
  background: var(--surface-0);
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.signx-panel-head {
  padding: 0.9rem 1.05rem;
  border-bottom: 1px solid color-mix(in srgb, var(--signx-gray-200) 75%, transparent);
  background: linear-gradient(180deg, var(--surface-1), transparent);
}

.signx-panel-body {
  padding: 1.05rem;
}

.signx-panel-foot {
  padding: 0.9rem 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--signx-gray-200) 75%, transparent);
  background: var(--surface-1);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* 2) Hero header */
.signx-hero {
  border-radius: var(--radius-2xl);
  padding: 1.25rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--signx-primary) 18%, var(--signx-gray-200));
  background:
    radial-gradient(900px 240px at 12% 0%,
      rgba(99, 102, 241, 0.18),
      transparent 60%),
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--shadow-md);
}

.signx-hero-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-size: 1.4rem;
}

.signx-hero-sub {
  color: var(--text-soft);
  font-weight: 600;
  margin-top: 0.25rem;
}

.signx-hero-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

/* 3) KPI strip */
.signx-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 991.98px) {
  .signx-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .signx-kpi-strip {
    grid-template-columns: 1fr;
  }
}

.signx-kpi {
  padding: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.signx-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb,
      var(--signx-primary) 18%,
      var(--signx-gray-200));
}

.signx-kpi-label {
  color: var(--text-soft);
  font-weight: 700;
  font-size: 0.9rem;
}

.signx-kpi-value {
  color: var(--text-strong);
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  margin-top: 0.25rem;
}

.signx-kpi-meta {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* 4) Fancy button set */
.signx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--signx-radius-pill);
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  color: var(--text-strong);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast),
    border-color var(--fast),
    color var(--fast);
}

.signx-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: var(--surface-1);
}

.signx-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.signx-btn:focus-visible {
  outline: none;
  box-shadow: var(--signx-ring);
}

.signx-btn:disabled,
.signx-btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  box-shadow: none;
}

.signx-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lms-border);
  background: var(--lms-surface);
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.76);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.signx-btn-primary:hover {
  background: var(--signx-primary-hover);
}

.signx-btn-outline {
  background: transparent;
  color: var(--signx-primary);
  border-color: color-mix(in srgb,
      var(--signx-primary) 60%,
      var(--signx-border));
  box-shadow: none;
}

.signx-btn-outline:hover {
  background: color-mix(in srgb, var(--signx-primary) 12%, transparent);
  border-color: var(--signx-primary);
}

.signx-btn-soft {
  background: var(--surface-1);
}

.signx-btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.signx-btn-ghost:hover {
  background: var(--surface-1);
  border-color: var(--signx-border);
  box-shadow: var(--shadow-sm);
}

.signx-btn-danger {
  background: var(--danger-gradient);
  color: #fff;
  border-color: color-mix(in srgb,
      var(--signx-danger) 60%,
      var(--signx-border));
}

.signx-btn-xs {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

.signx-btn-sm {
  padding: 0.45rem 0.75rem;
  font-size: 0.92rem;
}

.signx-btn-lg {
  padding: 0.7rem 1.15rem;
  font-size: 1.02rem;
}

.signx-btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--signx-radius-md);
}

/* 5) Pill tabs */
.signx-tabs {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.signx-tab {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  color: var(--text-soft);
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.signx-tab:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

.signx-tab.is-active {
  background: var(--surface-0);
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  box-shadow: var(--shadow-xs);
}

/* 6) Badges */
.signx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  background: var(--surface-1);
  color: var(--text-strong);
}

.signx-badge-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 99px;
  background: var(--signx-gray-400);
  display: inline-block;
}

.signx-badge-primary {
  background: color-mix(in srgb, var(--signx-primary) 12%, var(--surface-0));
  border-color: color-mix(in srgb,
      var(--signx-primary) 22%,
      var(--signx-gray-200));
  color: color-mix(in srgb, var(--signx-primary) 80%, var(--text-strong));
}

.signx-badge-success {
  background: color-mix(in srgb, var(--signx-success) 12%, var(--surface-0));
  border-color: color-mix(in srgb,
      var(--signx-success) 22%,
      var(--signx-gray-200));
  color: color-mix(in srgb, var(--signx-success) 80%, var(--text-strong));
}

.signx-badge-warning {
  background: color-mix(in srgb, var(--signx-warning) 12%, var(--surface-0));
  border-color: color-mix(in srgb,
      var(--signx-warning) 22%,
      var(--signx-gray-200));
  color: color-mix(in srgb, var(--signx-warning) 80%, var(--text-strong));
}

.signx-badge-danger {
  background: color-mix(in srgb, var(--signx-danger) 10%, var(--surface-0));
  border-color: color-mix(in srgb,
      var(--signx-danger) 22%,
      var(--signx-gray-200));
  color: color-mix(in srgb, var(--signx-danger) 80%, var(--text-strong));
}

.signx-badge-info {
  background: color-mix(in srgb, var(--signx-info) 12%, var(--surface-0));
  border-color: color-mix(in srgb,
      var(--signx-info) 22%,
      var(--signx-gray-200));
  color: color-mix(in srgb, var(--signx-info) 80%, var(--text-strong));
}

/* 7) Chips */
.signx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  background: var(--surface-0);
  box-shadow: var(--shadow-xs);
  font-weight: 700;
  color: var(--text-strong);
}

.signx-chip-x {
  width: 18px;
  height: 18px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  color: var(--text-muted);
}

.signx-chip-x:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

/* 8) Avatar */
.signx-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 85%, transparent);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--text-strong);
}

.signx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.signx-avatar-sm {
  width: 28px;
  height: 28px;
}

.signx-avatar-lg {
  width: 44px;
  height: 44px;
}

.signx-avatar-ring {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}

/* 9) Progress */
.signx-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 75%, transparent);
  overflow: hidden;
}

.signx-progress>span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
      var(--signx-primary),
      color-mix(in srgb, var(--signx-primary) 60%, #fff));
}

.signx-progress.success>span {
  background: linear-gradient(90deg,
      var(--signx-success),
      color-mix(in srgb, var(--signx-success) 60%, #fff));
}

.signx-progress.warning>span {
  background: linear-gradient(90deg,
      var(--signx-warning),
      color-mix(in srgb, var(--signx-warning) 60%, #fff));
}

.signx-progress.danger>span {
  background: linear-gradient(90deg,
      var(--signx-danger),
      color-mix(in srgb, var(--signx-danger) 60%, #fff));
}

/* 10) Skeleton */
.signx-skeleton {
  border-radius: 14px;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--surface-2) 80%, #fff) 25%,
      color-mix(in srgb, var(--surface-1) 70%, #fff) 37%,
      color-mix(in srgb, var(--surface-2) 80%, #fff) 63%);
  background-size: 400% 100%;
  animation: signx-shimmer 1.2s ease-in-out infinite;
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 70%, transparent);
}

.signx-skel-line {
  height: 12px;
}

.signx-skel-line.sm {
  height: 10px;
}

.signx-skel-line.lg {
  height: 16px;
}

.signx-skel-card {
  height: 120px;
  border-radius: var(--radius-xl);
}

.signx-skel-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

/* 11) Tooltip (pure CSS, hover) */
.signx-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.signx-tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  bottom: calc(100% + 10px);
  white-space: nowrap;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 75%, transparent);
  background: color-mix(in srgb, var(--surface-0) 85%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  color: var(--text-strong);
  font-weight: 700;
  font-size: 0.78rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.signx-tip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 12) Divider with label */
.signx-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signx-divider::before,
.signx-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: color-mix(in srgb, var(--signx-gray-200) 80%, transparent);
}

/* 13) Ribbon corner label */
.signx-ribbon {
  position: relative;
  overflow: hidden;
}

.signx-ribbon::before {
  content: attr(data-ribbon);
  position: absolute;
  top: 12px;
  right: -46px;
  transform: rotate(45deg);
  background: var(--signx-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 3rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.signx-ribbon.danger::before {
  background: var(--signx-danger);
}

.signx-ribbon.success::before {
  background: var(--signx-success);
}

.signx-ribbon.warning::before {
  background: var(--signx-warning);
}

/* 14) Aspect ratios */
.signx-aspect-1 {
  aspect-ratio: 1/1;
}

.signx-aspect-4x3 {
  aspect-ratio: 4/3;
}

.signx-aspect-16x9 {
  aspect-ratio: 16/9;
}

.signx-aspect-21x9 {
  aspect-ratio: 21/9;
}

/* 15) Image frame */
.signx-imgframe {
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--signx-gray-200) 80%, transparent);
  background: var(--surface-1);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.signx-imgframe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 16) Focus helpers */
.signx-focus-ring:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18) !important;
}

.signx-focus-ring:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22) !important;
}

/* 17) Table row accents */
.signx-row-accent-primary {
  box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--signx-primary) 70%, transparent);
}

.signx-row-accent-success {
  box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--signx-success) 70%, transparent);
}

.signx-row-accent-warning {
  box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--signx-warning) 70%, transparent);
}

.signx-row-accent-danger {
  box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--signx-danger) 70%, transparent);
}

.signx-row-accent-info {
  box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--signx-info) 70%, transparent);
}

/* 18) Responsive hide/show */
@media (max-width: 575.98px) {
  .signx-hide-sm {
    display: none !important;
  }

  .signx-show-sm {
    display: block !important;
  }
}

@media (max-width: 991.98px) {
  .signx-hide-md {
    display: none !important;
  }

  .signx-show-md {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .signx-hide-lg {
    display: none !important;
  }

  .signx-show-lg {
    display: block !important;
  }
}

/* Governance-specific styles */
.border-start-3 {
  border-left-width: 3px !important;
}

.meeting-card .card-header {
  background-color: var(--signx-gray-50);
}

.meeting-card.completed .card-header {
  background-color: var(--success-bg-subtle);
}

.meeting-card.cancelled .card-header {
  background-color: var(--danger-bg-subtle);
}

.meeting-card.upcoming .card-header {
  background-color: var(--warning-bg-subtle);
}

/* Election status colors */
.election-status-planned {
  color: var(--secondary);
}

.election-status-nominations_open {
  color: var(--warning);
}

.election-status-voting_open {
  color: var(--danger);
}

.election-status-completed {
  color: var(--success);
}

/* Responsive table */
@media (max-width: 768px) {
  #electionsTable {
    display: block;
    overflow-x: auto;
  }
}

/* Modal animations */
.modal.fade .modal-dialog {
  transform: translate(0, -50px);
  transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
  transform: translate(0, 0);
}

/* Loading animations */
.spinner-border {
  width: 3rem;
  height: 3rem;
}

/* public/css/notifications.css */
/* Notification styles matching your dashboard theme */

.notification-unread:hover {
  background-color: rgba(13, 110, 253, 0.1);
}

.mark-as-read-btn {
  font-size: 11px;
  padding: 2px 8px;
}

.notify-list::-webkit-scrollbar {
  width: 6px;
}

.notify-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.notify-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.notify-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Notification items */
.notification-item {
  transition: background-color 0.2s;
  cursor: pointer;
  position: relative;
}

.notification-unread {
  background-color: rgba(13, 110, 253, 0.05);
  border-left: 3px solid #0d6efd;
}

.notification-item:hover {
  background-color: rgba(2, 6, 23, 0.02);
}

.notification-item.unread {
  background-color: rgba(14, 165, 233, 0.05);
  border-left: 4px solid rgba(14, 165, 233, 0.3);
}

.notification-item.unread:hover {
  background-color: rgba(14, 165, 233, 0.08);
}

/* Priority indicators */
.notification-priority-low {
  border-left-color: rgba(100, 116, 139, 0.3);
}

.notification-priority-normal {
  border-left-color: rgba(14, 165, 233, 0.3);
}

.notification-priority-high {
  border-left-color: rgba(245, 158, 11, 0.3);
}

.notification-priority-critical {
  border-left-color: rgba(220, 38, 38, 0.3);
}

/* Badges */
.notification-badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}

/* Dropdown styles */
#notificationDropdownMenu {
  width: 380px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
}

.notification-dropdown-header {
  padding: 1rem;
  border-bottom: 1px solid rgba(2, 6, 23, 0.1);
}

.notification-dropdown-footer {
  padding: 0.75rem;
  border-top: 1px solid rgba(2, 6, 23, 0.1);
}

/* Unread count badge */
.notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.7rem;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animation for new notifications */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.pulse-animation {
  animation: pulse 0.5s ease-in-out;
}

/* Preview card */
.notification-preview {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.02), transparent);
  border: 1px solid rgba(2, 6, 23, 0.06);
  border-radius: 0.75rem;
}

/* Empty state */
.notification-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: #6b7280;
}

.notification-empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Loading skeleton */
.notification-skeleton {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(90deg,
      rgba(2, 6, 23, 0.05) 25%,
      rgba(2, 6, 23, 0.1) 50%,
      rgba(2, 6, 23, 0.05) 75%);
  background-size: 200% 100%;
}

/* Note: @keyframes shimmer defined in Section 14 Loaders */

/* Responsive adjustments */
@media (max-width: 768px) {
  #notificationDropdownMenu {
    width: 300px;
  }

  .notification-item {
    padding: 0.75rem;
  }
}

/* ============================================================
   SignX Icon System (Fixed)
   ============================================================ */

/* Icon size classes for inline SVGs */
.signx-icon-xs {
  width: 1rem !important;
  height: 1rem !important;
  stroke-width: 1.5;
}

.signx-icon-sm {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke-width: 2;
}

.signx-icon-md {
  width: 1.5rem !important;
  height: 1.5rem !important;
  stroke-width: 2;
}

.signx-icon-lg {
  width: 2rem !important;
  height: 2rem !important;
  stroke-width: 2;
}

.signx-icon-xl {
  width: 2.5rem !important;
  height: 2.5rem !important;
  stroke-width: 2.5;
}

/* Icon color utilities */
.signx-icon-primary {
  stroke: var(--signx-primary) !important;
}

.signx-icon-success {
  stroke: var(--signx-success) !important;
}

.signx-icon-warning {
  stroke: var(--signx-warning) !important;
}

.signx-icon-danger {
  stroke: var(--signx-danger) !important;
}

.signx-icon-info {
  stroke: var(--signx-info) !important;
}

.signx-icon-light {
  stroke: var(--signx-white) !important;
}

.signx-icon-dark {
  stroke: var(--signx-900) !important;
}

/* Icon inline alignment */
.signx-icon-inline {
  vertical-align: -0.125em;
}

/* Icon button states */
.btn-signx .signx-icon-xs,
.btn-signx .signx-icon-sm,
.btn-signx .signx-icon-md {
  transition: transform 0.2s ease;
}

.btn-signx:hover .signx-icon-xs,
.btn-signx:hover .signx-icon-sm,
.btn-signx:hover .signx-icon-md {
  transform: translateY(-1px);
}

/* Empty state icons */
.signx-empty-icon {
  width: 3rem;
  height: 3rem;
  stroke-width: 1;
  color: var(--signx-gray-400);
  margin-bottom: 1rem;
}

/* Alert icons */
.signx-alert-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  flex-shrink: 0;
}

/* KPI icons */
.signx-kpi-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-kpi-icon-primary {
  background: rgba(79, 70, 229, 0.1);
  color: var(--signx-primary);
}

.signx-kpi-icon-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--signx-success);
}

.signx-kpi-icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--signx-warning);
}

.signx-kpi-icon-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--signx-danger);
}

.signx-kpi-icon-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--signx-info);
}

/* Tab icons */
.signx-tab .signx-icon-xs,
.signx-tab .signx-icon-sm {
  margin-right: 0.5rem;
}

/* Note: @keyframes spin defined in Section 14 Loaders */

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Responsive icons */
@media (max-width: 768px) {
  .signx-icon-lg {
    width: 1.75rem;
    height: 1.75rem;
  }

  .signx-icon-xl {
    width: 2rem;
    height: 2rem;
  }
}

/* Modal close button */
.signx-modal-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  color: var(--signx-gray-500);
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}

.signx-modal-close:hover {
  background: var(--signx-gray-100);
  color: var(--signx-gray-700);
}

.signx-modal-close svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
}

/* ============================================================
   Network Dashboard Styles
   ============================================================ */
.network-dashboard {
  --network-primary: var(--primary-gradient);
  --network-success: var(--success-gradient);
  --network-warning: var(--warning-gradient);
  --network-info: var(--info-gradient);
  --network-purple: var(--purple-gradient);
  --network-blue: var(--indigo-gradient);
}

/* Hero Section */
.network-hero {
  position: relative;
  background: var(--primary-gradient);
  border-radius: 1.25rem;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--signx-shadow-lg);
}

.network-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity: 0.5;
  transform: rotate(15deg);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem 2rem;
  color: white;
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 2rem;
}

.hero-main {
  flex: 1;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.network-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.network-logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--signx-primary);
  box-shadow: var(--signx-shadow-md);
}

.hero-title-text h1 {
  color: white;
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.hero-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.95rem;
  opacity: 0.95;
}

.subtitle-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-description {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: 2rem;
  max-width: 800px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-stat {
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hero-stat:hover {
  transform: translateY(-2px);
}

.hero-stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.hero-stat-label {
  font-size: 0.85rem;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

/* Main Stats Grid */
.network-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.network-stat-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.network-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--stat-gradient);
}

.network-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.network-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.network-stat-label {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.network-stat-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.network-stat-progress {
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  margin-top: 1rem;
  overflow: hidden;
}

.network-stat-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* Quick Actions */
.dashboard-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.dashboard-section:hover {
  border-color: #4f46e5;
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.dashboard-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-section-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4f46e5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.dashboard-section-link:hover {
  color: #3730a3;
  gap: 0.5rem;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.quick-action-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}

.quick-action-card:hover {
  transform: translateY(-3px);
  border-color: #4f46e5;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.1);
}

.quick-action-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--action-gradient);
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: white;
  font-size: 1.25rem;
  background: var(--action-gradient);
}

.quick-action-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.quick-action-desc {
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.quick-action-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: #94a3b8;
  transition: all 0.3s ease;
}

.quick-action-card:hover .quick-action-arrow {
  color: #4f46e5;
  transform: translateX(3px);
}

/* Network List */
.network-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.network-list-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.network-list-item-content {
  flex: 1;
}

.network-list-item-title {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.network-list-item-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.network-list-item-title a:hover {
  color: #4f46e5;
}

.network-list-item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.network-list-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.network-list-badge.active {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  color: #065f46;
}

.network-list-badge.role {
  background: #eef2ff;
  color: #3730a3;
}

.network-list-actions {
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.network-list-item:hover .network-list-actions {
  opacity: 1;
}

.btn-network-sm {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-network-sm:hover {
  background: #4f46e5;
  border-color: #4f46e5;
  color: white;
}

/* Timeline */
.timeline-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeline-item:hover {
  background: #f8fafc;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  border-radius: 6px;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f46e5;
  margin-top: 0.5rem;
  flex-shrink: 0;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #64748b;
}

/* Alerts */
.alert-network {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-left: 4px solid #f59e0b;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.alert-network:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
}

.alert-network-icon {
  font-size: 1.5rem;
  color: #f59e0b;
}

.alert-network-content {
  flex: 1;
}

.alert-network-title {
  font-weight: 700;
  color: #92400e;
  margin-bottom: 0.25rem;
}

.alert-network-message {
  color: #b45309;
  font-size: 0.875rem;
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  border: 2px dashed #cbd5e1;
  transition: all 0.3s ease;
}

.empty-state:hover {
  border-color: #94a3b8;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.empty-state h5 {
  color: #334155;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: #64748b;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Layout */
.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Buttons */
.btn-network-primary {
  background: var(--primary-gradient);
  border: none;
  color: white;
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-network-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
  color: white;
}

.btn-network-outline {
  background: white;
  border: 2px solid #4f46e5;
  color: #4f46e5;
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-network-outline:hover {
  background: #4f46e5;
  color: white;
}

/* Responsive */
@media (max-width: 1200px) {
  .hero-title-text h1 {
    font-size: 1.75rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .two-column-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 2rem 1.5rem;
  }

  .hero-header {
    flex-direction: column;
    gap: 1.5rem;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .hero-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .network-stats-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr;
  }

  .alert-network {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .alert-network-content {
    text-align: center;
  }
}

/* ============================================
   GENERAL REUSABLE COMPONENTS & UTILITIES
   ============================================ */

/* General Shell Layout */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--rail-width, 64px) var(--sidebar-width, 300px) 1fr;
  background: var(--bs-body-bg);
}

/* Left Icon Rail */
.app-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--background-white, #fff);
  border-right: 1px solid var(--border-color, #eef0f4);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  gap: 12px;
  z-index: 10;
}

.rail-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: var(--logo-gradient, linear-gradient(135deg, #5b5ce8, #7c3aed));
  box-shadow: 0 10px 20px rgba(91, 92, 232, 0.25);
  user-select: none;
  margin-bottom: 10px;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  flex: 1;
}

.rail-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
}

.rail-item,
.rail-fab,
.rail-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--text-tertiary, #6b7280);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  position: relative;
  user-select: none;
  text-decoration: none;
}

.rail-item:hover {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 10%,
      transparent);
  color: var(--primary-color, #5b5ce8);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 20%,
      transparent);
  transform: translateY(-1px);
}

.rail-item.active {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 14%,
      transparent);
  color: var(--primary-color, #5b5ce8);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 28%,
      transparent);
  box-shadow: 0 8px 16px rgba(91, 92, 232, 0.1);
}

.rail-fab.primary {
  background: var(--primary-color, #5b5ce8);
  color: #fff;
  box-shadow: 0 10px 20px rgba(91, 92, 232, 0.25);
}

.rail-fab.primary:hover {
  transform: translateY(-1px);
}

.rail-fab.accent {
  background: var(--accent-yellow, #facc15);
  color: var(--text-primary, #111827);
  box-shadow: 0 10px 20px rgba(245, 158, 11, 0.25);
}

.rail-avatar {
  border-radius: 999px;
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 14%,
      var(--background-white, #fff));
  border-color: var(--border-color, #eef0f4);
  font-weight: 800;
  color: var(--primary-color, #5b5ce8);
}

/* Sidebar */
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--background-gray, #f6f6f8);
  border-right: 1px solid var(--border-color, #eef0f4);
  padding: 18px 16px;
  overflow: auto;
}

.sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 12px;
}

.sb-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--primary-color, #5b5ce8);
}

.sb-collapse {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-tertiary, #6b7280);
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.sb-collapse:hover {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 10%,
      transparent);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 20%,
      transparent);
  color: var(--primary-color, #5b5ce8);
}

.sb-menu {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  gap: 6px;
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  color: var(--text-secondary, #374151);
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  user-select: none;
  text-decoration: none;
}

.sb-link i {
  width: 18px;
  opacity: 0.65;
}

.sb-link:hover {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 10%,
      transparent);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 18%,
      transparent);
  color: var(--primary-color, #5b5ce8);
}

.sb-link.active {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 14%,
      transparent);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 26%,
      transparent);
  color: var(--primary-color, #5b5ce8);
  box-shadow: 0 10px 18px rgba(91, 92, 232, 0.08);
}

.sb-section {
  margin-top: 18px;
  padding: 0 4px;
}

.sb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sb-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-tertiary, #6b7280);
  margin: 0;
}

.sb-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-tertiary, #6b7280);
  background: color-mix(in srgb, var(--border-color, #eef0f4) 60%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #eef0f4);
}

.sb-add {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color, #eef0f4);
  color: var(--text-tertiary, #6b7280);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.sb-add:hover {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 10%,
      transparent);
  color: var(--primary-color, #5b5ce8);
  transform: translateY(-1px);
}

/* Content Area */
.app-content {
  padding: 18px 20px 30px;
  overflow-y: auto;
  height: 100vh;
}

.app-content .wrap {
  max-width: var(--content-max-width, 1400px);
  margin: 0 auto;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 6px;
  flex-wrap: wrap;
}

.ws {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
}

.ws-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--icon-gradient, linear-gradient(135deg, #5b5ce8, #7c3aed));
  box-shadow: 0 12px 22px rgba(91, 92, 232, 0.18);
}

.ws-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary, #111827);
}

.ws-users {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.ava {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--border-color, #eef0f4);
  background: #fff;
  color: var(--text-tertiary, #6b7280);
}

.ava.big {
  width: 32px;
  height: 32px;
  background: var(--accent-light-yellow, #fde68a);
  color: #92400e;
  border-color: color-mix(in srgb,
      var(--accent-yellow, #facc15) 25%,
      var(--border-color, #eef0f4));
}

.ava.a {
  background: #dbeafe;
  color: #1e40af;
}

.ava.b {
  background: #d1fae5;
  color: #065f46;
}

.ava.add {
  cursor: pointer;
  color: var(--text-tertiary, #6b7280);
  background: color-mix(in srgb, var(--border-color, #eef0f4) 40%, transparent);
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buttons */
.btn-lite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color, #eef0f4);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
  color: var(--text-secondary, #374151);
  text-decoration: none;
}

.btn-lite:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 18%,
      var(--border-color, #eef0f4));
}

.btn-primary-lite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lms-border);
  background: var(--lms-surface);
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.76);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.btn-primary-lite:hover {
  box-shadow: 0 18px 30px rgba(91, 92, 232, 0.26);
}

/* KPI Strip */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 6px;
}

@media (max-width: 780px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kpis {
    grid-template-columns: 1fr;
  }
}

.kpi {
  background: #fff;
  border: 1px solid var(--border-color, #eef0f4);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(17, 24, 39, 0.06));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kpi .meta {
  display: grid;
  gap: 2px;
}

.kpi .lbl {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-tertiary, #6b7280);
}

.kpi .val {
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.02em;
  color: var(--text-primary, #111827);
}

.kpi .curr {
  font-size: 12px;
  color: var(--text-secondary, #374151);
  font-weight: 800;
}

.kpi .mini {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary-color, #5b5ce8) 10%, #fff);
  border: 1px solid var(--border-color, #eef0f4);
  color: var(--primary-color, #5b5ce8);
}

/* Tables */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.data-table thead th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--border-color, #eef0f4);
  font-weight: 900;
  color: var(--text-tertiary, #6b7280);
  background: color-mix(in srgb,
      var(--background-light, #f7f7fb) 95%,
      transparent);
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border-color, #eef0f4);
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-color, #5b5ce8) 6%, transparent);
}

.data-table tbody td {
  padding: 12px 14px;
  color: var(--text-secondary, #374151);
}

.data-table .amount {
  text-align: right;
  font-weight: 800;
  color: var(--text-primary, #111827);
}

.data-table .status {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-block;
}

/* Cards */
.cardx {
  background: #fff;
  border: 1px solid var(--border-color, #eef0f4);
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(17, 24, 39, 0.06));
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  position: relative;
}

.cardx:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg,
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05));
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 18%,
      var(--border-color, #eef0f4));
}

.cardx .head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color, #eef0f4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cardx .head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -0.01em;
  color: var(--text-primary, #111827);
}

.cardx .body {
  padding: 18px;
}

/* Grid */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 30px;
}

@media (max-width: 1200px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .app-shell {
    grid-template-columns: var(--rail-width, 64px) 1fr;
  }

  .app-sidebar {
    display: none;
  }
}

/* Status Badges */
.badge-draft {
  background: color-mix(in srgb, #6b7280 15%, transparent);
  color: #374151;
}

.badge-pending {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #92400e;
}

.badge-approved {
  background: color-mix(in srgb, #10b981 15%, transparent);
  color: #065f46;
}

.badge-posted {
  background: color-mix(in srgb, #059669 15%, transparent);
  color: #064e3b;
}

.badge-rejected {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  color: #991b1b;
}

/* Floating Help */
.help {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--background-dark, #111827);
  color: #fff;
  box-shadow: 0 20px 30px rgba(2, 6, 23, 0.25);
  cursor: pointer;
  z-index: 20;
  user-select: none;
  transition: transform 0.2s ease;
}

.help:hover {
  transform: scale(1.1);
}

/* Empty State */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary, #6b7280);
}

.empty-state i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* Detail Groups */
.detail-group {
  margin-bottom: 16px;
}

.detail-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-tertiary, #6b7280);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  padding: 8px 0;
}

/* Dimension Items */
.dimension-item {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color, #eef0f4);
  background: #fff;
  text-align: center;
  transition: all 0.2s ease;
}

.dimension-item.active {
  background: color-mix(in srgb, var(--primary-color, #5b5ce8) 8%, transparent);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 25%,
      transparent);
}

.dimension-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb,
      var(--background-light, #f7f7fb) 80%,
      transparent);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  color: var(--text-tertiary, #6b7280);
}

.dimension-item.active .dimension-icon {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 15%,
      transparent);
  color: var(--primary-color, #5b5ce8);
}

.dimension-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text-primary, #111827);
}

.dimension-status {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-color, #eef0f4) 60%, transparent);
  color: var(--text-tertiary, #6b7280);
  display: inline-block;
}

.dimension-item.active .dimension-status {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 15%,
      transparent);
  color: var(--primary-dark, #4a4bd8);
}

/* Action Cards */
.action-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.action-card:hover {
  transform: translateY(-4px);
}

.action-card h4 {
  margin-bottom: 8px;
  color: var(--text-primary, #111827);
}

/* Alerts */
.alert {
  border-radius: 14px;
  border: none;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(17, 24, 39, 0.06));
}

.alert-success {
  background: color-mix(in srgb, #10b981 15%, transparent);
  color: #065f46;
  border-left: 4px solid #059669;
}

.alert-danger {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  color: #991b1b;
  border-left: 4px solid #dc2626;
}

.alert-info {
  background: color-mix(in srgb, #3b82f6 15%, transparent);
  color: #1e40af;
  border-left: 4px solid #2563eb;
}

.alert-warning {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #92400e;
  border-left: 4px solid #d97706;
}

/* Tooltip */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-wrapper .tooltip-text {
  visibility: hidden;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--background-dark, #111827);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.25);
  transition: opacity 0.12s ease;
  z-index: 50;
}

.tooltip-wrapper:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Progress Ring */
.progress-ring {
  width: 42px;
  height: 42px;
  position: relative;
  display: grid;
  place-items: center;
}

.progress-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.progress-ring .bg {
  stroke: color-mix(in srgb, var(--border-color, #eef0f4) 55%, transparent);
  stroke-width: 4;
  fill: none;
}

.progress-ring .fg {
  stroke: var(--success-color, #10b981);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}

.progress-ring .pct {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-tertiary, #6b7280);
}

/* Icon Button */
.iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #eef0f4);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-tertiary, #6b7280);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  user-select: none;
}

.iconbtn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 20%,
      var(--border-color, #eef0f4));
  color: var(--primary-color, #5b5ce8);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 18px;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border-color, #eef0f4);
  margin-top: 10px;
  overflow: auto;
}

.tab {
  padding: 10px 4px;
  font-weight: 800;
  color: var(--text-tertiary, #6b7280);
  cursor: pointer;
  position: relative;
  user-select: none;
  white-space: nowrap;
}

.tab.active {
  color: var(--text-primary, #111827);
}

.tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 99px;
  background: var(--primary-color, #5b5ce8);
  box-shadow: 0 10px 20px rgba(91, 92, 232, 0.2);
}

/* Filters */
.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0 6px;
  flex-wrap: wrap;
}

.pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color, #eef0f4);
  background: color-mix(in srgb, var(--primary-color, #5b5ce8) 10%, #fff);
  color: var(--primary-color, #5b5ce8);
  font-weight: 900;
  font-size: 13px;
}

.pill .x {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-color, #eef0f4);
  color: color-mix(in srgb, var(--primary-color, #5b5ce8) 80%, transparent);
  cursor: pointer;
}

.reset {
  margin-left: 4px;
  color: var(--primary-color, #5b5ce8);
  font-weight: 800;
  cursor: pointer;
}

.add-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color, #eef0f4);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  color: var(--text-secondary, #374151);
}

.add-filter:hover {
  border-color: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 18%,
      var(--border-color, #eef0f4));
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.sort {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-tertiary, #6b7280);
  font-weight: 800;
}

.sort .toggle {
  display: flex;
  border: 1px solid var(--border-color, #eef0f4);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.sort .opt {
  width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-tertiary, #6b7280);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.sort .opt.active {
  background: color-mix(in srgb,
      var(--primary-color, #5b5ce8) 12%,
      transparent);
  color: var(--primary-color, #5b5ce8);
}

/* Search Row */
.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0 18px;
  flex-wrap: wrap;
}

.count {
  color: var(--text-tertiary, #6b7280);
  font-weight: 800;
}

.search {
  min-width: 340px;
  max-width: 520px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #eef0f4);
  background: #fff;
  border-radius: 14px;
  color: var(--text-tertiary, #6b7280);
}

.search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .app-shell {
    grid-template-columns: var(--rail-width-mobile, 56px) 1fr;
  }

  .app-sidebar {
    position: fixed;
    left: var(--rail-width-mobile, 56px);
    top: 0;
    width: var(--sidebar-width-mobile, 280px);
    z-index: 100;
    display: none;
  }

  .app-sidebar.open {
    display: block;
  }
}

@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md, 1rem);
  }

  .ws {
    min-width: auto;
    width: 100%;
  }

  .actions {
    width: 100%;
    justify-content: space-between;
  }

  .search {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================
   Enhanced Card Styles (Roles/Users Stats Cards)
   ============================================================ */

/* Generic Enhanced Card Base */
.enhanced-card {
  background: var(--signx-surface, var(--signx-bg-surface));
  border-radius: var(--signx-radius-lg, 16px);
  padding: 1.75rem;
  border: 1px solid var(--signx-border-color, rgba(226, 232, 240, 0.6));
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--signx-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
}

.enhanced-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  opacity: 0.8;
}

.enhanced-card:hover {
  border-color: var(--signx-primary, #4f46e5);
  transform: translateY(-4px);
  box-shadow: var(--signx-shadow-lg, 0 12px 32px rgba(79, 70, 229, 0.12));
}

/* Enhanced Card Header */
.enhanced-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

/* Enhanced Card Icon */
.enhanced-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--signx-radius-md, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  background: var(--primary-gradient);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Enhanced Card Value (for stats) */
.enhanced-card-value {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Enhanced Card Label */
.enhanced-card-label {
  color: var(--signx-text-muted, var(--text-muted));
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================================
   Tab Header Patterns
   ============================================================ */

/* Generic Tab Header */
.tab-header-enhanced {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--signx-border-color, rgba(226, 232, 240, 0.6));
}

.tab-header-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--signx-text-heading, var(--text-strong));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tab-header-content p {
  color: var(--signx-text-muted, var(--text-muted));
  font-size: 0.95rem;
  margin: 0.5rem 0 0 0;
  max-width: 600px;
  line-height: 1.6;
}

.tab-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ============================================================
   Button Extensions
   ============================================================ */

/* Gradient Primary Button */
.btn-gradient-primary {
  background: var(--primary-gradient);
  border: 1px solid color-mix(in srgb, var(--signx-primary) 60%, var(--signx-border-color));
  color: #fff;
  padding: 0.75rem 1.75rem;
  border-radius: var(--signx-radius-sm, 12px);
  font-weight: 600;
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  box-shadow: var(--signx-shadow-sm);
}

.btn-gradient-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--signx-shadow-md);
  color: #fff;
}

.btn-gradient-primary:focus-visible {
  outline: none;
  box-shadow: var(--signx-ring);
}

/* Gradient Danger Button */
.btn-gradient-danger {
  background: var(--danger-gradient);
  border: 1px solid color-mix(in srgb, var(--signx-danger) 60%, var(--signx-border-color));
  color: #fff;
  padding: 0.75rem 1.75rem;
  border-radius: var(--signx-radius-sm, 12px);
  font-weight: 600;
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  box-shadow: var(--signx-shadow-sm);
}

.btn-gradient-danger:hover {
  transform: translateY(-1px);
  box-shadow: var(--signx-shadow-md);
  color: #fff;
}

.btn-gradient-danger:focus-visible {
  outline: none;
  box-shadow: var(--signx-ring);
}

/* Glass Effect Button */
.btn-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--signx-primary, #4f46e5);
  padding: 0.75rem 1.75rem;
  border-radius: var(--signx-radius-sm, 12px);
  font-weight: 600;
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.btn-glass:hover {
  background: var(--primary-gradient);
  border-color: var(--signx-primary, #4f46e5);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   Avatar & Profile Extensions
   ============================================================ */

/* Enhanced Avatar */
.avatar-enhanced {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: var(--signx-shadow-md);
  overflow: hidden;
}

.avatar-enhanced img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Profile Status Indicator */
.profile-status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--signx-success, #10b981);
  border: 2px solid white;
}

.profile-status-indicator.inactive {
  background: var(--signx-warning, #f59e0b);
}

/* ============================================================
   Badge & Chip Extensions
   ============================================================ */

/* Role Badge */
.badge-role {
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  backdrop-filter: blur(10px);
}

.badge-role.primary {
  background: rgba(79, 70, 229, 0.1);
  color: var(--signx-primary, #4f46e5);
  border: 1px solid rgba(79, 70, 229, 0.2);
}

.badge-role.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--signx-success, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-role.warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--signx-warning, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-role.danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--signx-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ============================================================
   Action Button Groups
   ============================================================ */

.action-group {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--signx-border-color, rgba(226, 232, 240, 0.6));
}

.btn-action {
  background: var(--signx-gray-100, #f1f5f9);
  border: 1px solid var(--signx-border-color, #e2e8f0);
  color: var(--signx-text-muted, #64748b);
  padding: 0.75rem 1.125rem;
  border-radius: var(--signx-radius-sm, 10px);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border: none;
  flex: 1;
  justify-content: center;
}

.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-action.edit {
  background: rgba(16, 185, 129, 0.1);
  color: var(--signx-success, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.btn-action.edit:hover {
  background: var(--signx-success, #10b981);
  color: white;
  border-color: var(--signx-success, #10b981);
}

.btn-action.view,
.btn-action.permissions {
  background: rgba(79, 70, 229, 0.1);
  color: var(--signx-primary, #4f46e5);
  border: 1px solid rgba(79, 70, 229, 0.2);
}

.btn-action.view:hover,
.btn-action.permissions:hover {
  background: var(--signx-primary, #4f46e5);
  color: white;
  border-color: var(--signx-primary, #4f46e5);
}

/* ============================================================
   Stats Grid
   ============================================================ */

.stats-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* ============================================================
   Content Grid
   ============================================================ */

.content-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .content-grid-enhanced {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Empty State Enhanced
   ============================================================ */

.empty-state-enhanced {
  text-align: center;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: var(--signx-radius-lg, 16px);
  border: 2px dashed #cbd5e1;
  margin: 3rem 0;
}

.empty-state-enhanced i {
  font-size: 4.5rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
}

.empty-state-enhanced h4 {
  color: var(--signx-gray-800, #1e293b);
  font-weight: 800;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.empty-state-enhanced p {
  color: var(--signx-gray-500, #64748b);
  margin-bottom: 2rem;
  font-size: 1.125rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ============================================================
   Hero Header
   ============================================================ */

.hero-header {
  background: var(--primary-gradient);
  padding: 2.5rem;
  border-radius: var(--signx-radius-lg, 20px);
  color: white;
  margin-bottom: 2.5rem;
  box-shadow: var(--signx-shadow-md, 0 4px 20px rgba(0, 0, 0, 0.08));
  position: relative;
  overflow: hidden;
}

.hero-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 70%);
  border-radius: 50%;
}

.hero-header h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-header .subtitle {
  font-size: 1rem;
  opacity: 0.95;
  position: relative;
  z-index: 1;
  font-weight: 400;
  max-width: 600px;
  line-height: 1.6;
}

/* ============================================================
   Flash/Alerts Extensions
   ============================================================ */

.alert-enhanced {
  border-radius: 14px;
  border: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--signx-shadow-md, 0 4px 20px rgba(0, 0, 0, 0.08));
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-enhanced.success {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  color: #065f46;
  border-left: 5px solid var(--signx-success, #10b981);
}

.alert-enhanced.danger {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #92400e;
  border-left: 5px solid var(--signx-danger, #ef4444);
}

.alert-enhanced.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-left: 5px solid var(--signx-warning, #f59e0b);
}

.alert-enhanced.info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border-left: 5px solid var(--signx-info, #3b82f6);
}

/* ============================================================
   Role Distribution Items
   ============================================================ */

.distribution-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  border-radius: var(--signx-radius-sm, 12px);
  background: var(--signx-gray-100, #f1f5f9);
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.distribution-item:hover {
  background: white;
  border-color: var(--signx-border-color, #e2e8f0);
  transform: translateX(4px);
}

.distribution-item:last-child {
  margin-bottom: 0;
}

.distribution-count {
  background: var(--primary-gradient);
  color: white;
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 700;
  min-width: 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

/* ============================================================
   Responsive Utilities
   ============================================================ */

@media (max-width: 768px) {
  .stats-grid-enhanced {
    grid-template-columns: 1fr;
  }

  .tab-header-enhanced {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .tab-header-content {
    text-align: center;
  }

  .tab-header-actions {
    justify-content: center;
    width: 100%;
  }

  .btn-gradient-primary,
  .btn-glass {
    flex: 1;
    justify-content: center;
  }

  .action-group {
    flex-direction: column;
  }

  .hero-header {
    padding: 1.75rem;
  }

  .hero-header h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .hero-header .row {
    flex-direction: column;
    text-align: center;
  }
}

/* End of Network Dashboard Styles */
/* ============================================================ */
/* ============================================================
   SignX Admin Dashboard - Extended Components Pack
   200+ Professional Admin Dashboard Components
   ============================================================ */

/* ============================================================
   SECTION 1: SIDEBAR VARIATIONS
   ============================================================ */

/* ---------- 1.1 Dark Menu Sidebar ---------- */
.sidebar-dark,
.signx-sidebar.sidebar-dark {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border-right: 1px solid #334155;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

.sidebar-dark .nav-link {
  color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  margin: 2px 8px;
  transition: all 0.25s ease;
}

.sidebar-dark .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-dark .nav-link.active {
  background: linear-gradient(135deg, var(--signx-primary), #6366f1);
  color: #fff;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.sidebar-dark .sidebar-header {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 1rem 1rem 0.5rem;
}

/* ---------- 1.2 Gradient Menu Sidebar ---------- */
.sidebar-gradient,
.signx-sidebar.sidebar-gradient {
  background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
  border-right: none;
  box-shadow: 0 0 50px rgba(79, 70, 229, 0.3);
}

.sidebar-gradient .nav-link {
  color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  margin: 3px 10px;
  backdrop-filter: blur(10px);
}

.sidebar-gradient .nav-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateX(4px);
}

.sidebar-gradient .nav-link.active {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-gradient .sidebar-brand {
  color: #fff;
  font-weight: 800;
}

/* ---------- 1.3 Gray Menu Sidebar ---------- */
.sidebar-gray,
.signx-sidebar.sidebar-gray {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-right: 1px solid #cbd5e1;
}

.sidebar-gray .nav-link {
  color: #475569;
  border-radius: 8px;
  margin: 2px 8px;
}

.sidebar-gray .nav-link:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.sidebar-gray .nav-link.active {
  background: #fff;
  color: var(--signx-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

/* ---------- 1.4 Image Background Menu Sidebar ---------- */
.sidebar-image,
.signx-sidebar.sidebar-image {
  background:
    linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%234f46e5" stroke-width="0.5" opacity="0.3"/></svg>');
  background-size:
    cover,
    100px 100px;
}

.sidebar-image .nav-link {
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  margin: 3px 8px;
}

.sidebar-image .nav-link.active {
  background: rgba(79, 70, 229, 0.8);
  color: #fff;
}

/* ---------- 1.5 Compact Sidebar ---------- */
.sidebar-compact,
.signx-sidebar.sidebar-compact {
  width: 80px;
  padding: 1rem 0.5rem;
}

.sidebar-compact .nav-link {
  flex-direction: column;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.7rem;
  gap: 0.25rem;
  border-radius: 12px;
  margin: 4px;
}

.sidebar-compact .nav-link i,
.sidebar-compact .nav-link svg {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.sidebar-compact .sidebar-label {
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

/* ---------- 1.6 Icon View Menu (Icons Only) ---------- */
.sidebar-icon-only,
.signx-sidebar.sidebar-icon-only {
  width: 70px;
  padding: 1rem 0.5rem;
}

.sidebar-icon-only .nav-link {
  justify-content: center;
  padding: 0.85rem;
  border-radius: 14px;
  margin: 4px;
  position: relative;
}

.sidebar-icon-only .nav-link i {
  font-size: 1.3rem;
}

.sidebar-icon-only .sidebar-label {
  display: none;
}

.sidebar-icon-only .nav-link::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  margin-left: 10px;
  background: #1e293b;
  color: #fff;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

.sidebar-icon-only .nav-link:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ---------- 1.7 On Hover Expand Sidebar ---------- */
.sidebar-hover-expand,
.signx-sidebar.sidebar-hover-expand {
  width: 80px;
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar-hover-expand:hover {
  width: 260px;
}

.sidebar-hover-expand .sidebar-label {
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.sidebar-hover-expand:hover .sidebar-label {
  opacity: 1;
}

/* ---------- 1.8 On Hover Active Sidebar ---------- */
.sidebar-hover-active .nav-link {
  position: relative;
  overflow: hidden;
}

.sidebar-hover-active .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--signx-primary);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.sidebar-hover-active .nav-link:hover::before,
.sidebar-hover-active .nav-link.active::before {
  transform: scaleY(1);
}

/* ---------- 1.9 Offcanvas Sidebar ---------- */
.sidebar-offcanvas,
.signx-sidebar.sidebar-offcanvas {
  position: fixed;
  left: -280px;
  top: 0;
  bottom: 0;
  width: 280px;
  z-index: 1050;
  transition: left 0.3s ease;
  box-shadow: none;
}

.sidebar-offcanvas.show {
  left: 0;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}

/* ---------- 1.10 No Icons with Lines Sidebar ---------- */
.sidebar-no-icons,
.signx-sidebar.sidebar-no-icons {
  background: var(--surface-0);
}

.sidebar-no-icons .nav-link {
  padding-left: 1.5rem;
  border-left: 2px solid transparent;
  border-radius: 0;
  margin: 0;
}

.sidebar-no-icons .nav-link:hover {
  border-left-color: #cbd5e1;
  background: var(--surface-1);
}

.sidebar-no-icons .nav-link.active {
  border-left-color: var(--signx-primary);
  background: rgba(79, 70, 229, 0.05);
  color: var(--signx-primary);
}

.sidebar-no-icons .nav-link i {
  display: none;
}

/* ---------- 1.11 Sidebar with Lines ---------- */
.sidebar-lined,
.signx-sidebar.sidebar-lined {
  background: var(--surface-0);
}

.sidebar-lined .nav-item {
  border-bottom: 1px solid var(--signx-gray-200);
}

.sidebar-lined .nav-link {
  padding: 0.9rem 1.25rem;
  border-radius: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-lined .nav-link::after {
  content: "→";
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.sidebar-lined .nav-link:hover::after {
  opacity: 1;
  transform: translateX(4px);
}

/* ---------- 1.12 Sidebar Mini (Ultra Compact) ---------- */
.sidebar-mini,
.signx-sidebar.sidebar-mini {
  width: 60px;
  padding: 0.75rem 0.25rem;
}

.sidebar-mini .nav-link {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 4px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.sidebar-mini .sidebar-label,
.sidebar-mini .sidebar-header {
  display: none;
}

/* ============================================================
   SECTION 2: IMAGE COMPONENTS
   ============================================================ */

/* ---------- 2.1 Image Gallery ---------- */
.signx-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.signx-gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.signx-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.signx-gallery-item:hover img {
  transform: scale(1.1);
}

.signx-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.signx-gallery-item:hover .signx-gallery-item-overlay {
  opacity: 1;
}

.signx-gallery-item-title {
  color: #fff;
  font-weight: 600;
}

/* ---------- 2.2 Image Masonry ---------- */
.signx-masonry {
  columns: 3;
  column-gap: 1rem;
}

@media (max-width: 992px) {
  .signx-masonry {
    columns: 2;
  }
}

@media (max-width: 576px) {
  .signx-masonry {
    columns: 1;
  }
}

.signx-masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.signx-masonry-item img {
  width: 100%;
  display: block;
}

/* ---------- 2.3 Image Avatar Styles ---------- */
.img-avatar-square {
  border-radius: 12px;
  object-fit: cover;
}

.img-avatar-rounded {
  border-radius: 999px;
  object-fit: cover;
}

.img-avatar-ring {
  border: 3px solid var(--signx-primary);
  padding: 3px;
  border-radius: 999px;
}

.img-avatar-ring-gradient {
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #4f46e5, #a855f7) border-box;
  border-radius: 999px;
}

/* ---------- 2.4 Image Lightbox ---------- */
.signx-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.signx-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.signx-lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.signx-lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.signx-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

/* ---------- 2.5 Image Hover Effects ---------- */
.img-hover-zoom {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.img-hover-zoom img {
  transition: transform 0.4s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.15);
}

.img-hover-rotate {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.img-hover-rotate img {
  transition: transform 0.5s ease;
}

.img-hover-rotate:hover img {
  transform: scale(1.1) rotate(3deg);
}

.img-hover-blur {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.img-hover-blur img {
  transition: filter 0.3s ease;
}

.img-hover-blur:hover img {
  filter: blur(3px);
}

.img-hover-grayscale img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.img-hover-grayscale:hover img {
  filter: grayscale(0%);
}

/* ============================================================
   SECTION 3: VIDEO COMPONENTS
   ============================================================ */

/* ---------- 3.1 Video Player Container ---------- */
.signx-video-player {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}

.signx-video-player video {
  width: 100%;
  display: block;
}

.signx-video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.signx-video-player:hover .signx-video-controls {
  opacity: 1;
}

.signx-video-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-video-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.signx-video-progress {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
}

.signx-video-progress-bar {
  height: 100%;
  background: var(--signx-primary);
  width: 0%;
  transition: width 0.1s linear;
}

.signx-video-time {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---------- 3.2 Video Thumbnail Card ---------- */
.signx-video-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.signx-video-card-thumbnail {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.signx-video-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.signx-video-card:hover .signx-video-card-thumbnail img {
  transform: scale(1.1);
}

.signx-video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--signx-primary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.signx-video-card:hover .signx-video-card-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--signx-primary);
  color: #fff;
}

.signx-video-card-duration {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.signx-video-card-info {
  padding: 1rem;
  background: var(--surface-0);
}

.signx-video-card-title {
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 0.25rem;
}

.signx-video-card-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- 3.3 Video Playlist ---------- */
.signx-video-playlist {
  display: grid;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

.signx-video-playlist-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-video-playlist-item:hover {
  background: var(--surface-1);
  transform: translateX(4px);
}

.signx-video-playlist-item.active {
  border-color: var(--signx-primary);
  background: rgba(79, 70, 229, 0.05);
}

.signx-video-playlist-thumb {
  width: 120px;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.signx-video-playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 3.4 Video Embed Responsive ---------- */
.signx-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.signx-embed iframe,
.signx-embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.signx-embed-21by9 {
  padding-bottom: 42.857%;
}

.signx-embed-4by3 {
  padding-bottom: 75%;
}

.signx-embed-1by1 {
  padding-bottom: 100%;
}

/* ============================================================
   SECTION 4: CAROUSEL COMPONENTS
   ============================================================ */

/* ---------- 4.1 Basic Carousel ---------- */
.signx-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.signx-carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}

.signx-carousel-item {
  flex: 0 0 100%;
  min-width: 0;
}

.signx-carousel-item img {
  width: 100%;
  display: block;
}

.signx-carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
}

.signx-carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-strong);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-carousel-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

.signx-carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.signx-carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.signx-carousel-indicator.active {
  background: #fff;
  width: 30px;
}

/* ---------- 4.2 Card Carousel ---------- */
.signx-card-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
  scrollbar-width: none;
}

.signx-card-carousel::-webkit-scrollbar {
  display: none;
}

.signx-card-carousel>* {
  scroll-snap-align: start;
  flex: 0 0 300px;
}

/* ---------- 4.3 Testimonial Carousel ---------- */
.signx-testimonial-carousel {
  position: relative;
  padding: 2rem;
  background: linear-gradient(135deg, var(--signx-primary) 0%, #6366f1 100%);
  border-radius: var(--radius-xl);
  color: #fff;
}

.signx-testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.signx-testimonial-quote::before {
  content: '"';
  font-size: 4rem;
  line-height: 1;
  display: block;
  opacity: 0.3;
  font-family: serif;
}

.signx-testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.signx-testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.signx-testimonial-name {
  font-weight: 700;
}

.signx-testimonial-role {
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   SECTION 5: OFFCANVAS COMPONENTS
   ============================================================ */

/* ---------- 5.1 Offcanvas Base ---------- */
.signx-offcanvas {
  position: fixed;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  box-shadow: var(--signx-glow-strong);
  transition: transform 0.3s ease;
}

.signx-offcanvas-start {
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  transform: translateX(-100%);
  border-right: 1px solid var(--signx-border);
}

.signx-offcanvas-end {
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  transform: translateX(100%);
  border-left: 1px solid var(--signx-border);
}

.signx-offcanvas-top {
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 80vh;
  transform: translateY(-100%);
  border-bottom: 1px solid var(--signx-border);
}

.signx-offcanvas-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 80vh;
  transform: translateY(100%);
  border-top: 1px solid var(--signx-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.signx-offcanvas.show {
  transform: translate(0);
}

.signx-offcanvas-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--signx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.signx-offcanvas-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-strong);
}

.signx-offcanvas-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.signx-offcanvas-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--signx-border);
  background: var(--surface-1);
}

.signx-offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.signx-offcanvas-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   SECTION 6: LIST GROUP COMPONENTS
   ============================================================ */

/* ---------- 6.1 Basic List Group ---------- */
.signx-list-group {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
}

.signx-list-group-item {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--signx-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s ease;
  color: var(--text-base);
  text-decoration: none;
}

.signx-list-group-item:last-child {
  border-bottom: none;
}

.signx-list-group-item:hover {
  background: var(--surface-1);
}

.signx-list-group-item.active {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.1), transparent);
  color: var(--signx-primary);
  border-left: 3px solid var(--signx-primary);
}

/* ---------- 6.2 List Group with Actions ---------- */
.signx-list-group-actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.signx-list-group-action {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-list-group-action:hover {
  background: var(--signx-primary);
  border-color: var(--signx-primary);
  color: #fff;
}

/* ---------- 6.3 Flush List Group ---------- */
.signx-list-group-flush {
  border: none;
  border-radius: 0;
}

.signx-list-group-flush .signx-list-group-item {
  border-left: none;
  border-right: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- 6.4 Horizontal List Group ---------- */
.signx-list-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.signx-list-group-horizontal .signx-list-group-item {
  border-bottom: none;
  border-right: 1px solid var(--signx-border);
}

.signx-list-group-horizontal .signx-list-group-item:last-child {
  border-right: none;
}

/* ---------- 6.5 Numbered List Group ---------- */
.signx-list-group-numbered {
  counter-reset: list-counter;
}

.signx-list-group-numbered .signx-list-group-item {
  counter-increment: list-counter;
}

.signx-list-group-numbered .signx-list-group-item::before {
  content: counter(list-counter);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================================================
   SECTION 7: POPOVERS
   ============================================================ */

/* ---------- 7.1 Basic Popover ---------- */
.signx-popover {
  position: absolute;
  z-index: 1070;
  max-width: 320px;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--signx-glow-strong);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.signx-popover.show {
  opacity: 1;
  visibility: visible;
}

.signx-popover-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--signx-border);
  font-weight: 700;
  color: var(--text-strong);
  background: var(--surface-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.signx-popover-body {
  padding: 0.875rem 1rem;
  color: var(--text-base);
}

.signx-popover-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  transform: rotate(45deg);
}

/* Popover positions */
.signx-popover-top .signx-popover-arrow {
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  border-top: none;
  border-left: none;
}

.signx-popover-bottom .signx-popover-arrow {
  top: -7px;
  left: 50%;
  margin-left: -6px;
  border-bottom: none;
  border-right: none;
}

.signx-popover-left .signx-popover-arrow {
  right: -7px;
  top: 50%;
  margin-top: -6px;
  border-left: none;
  border-bottom: none;
}

.signx-popover-right .signx-popover-arrow {
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border-right: none;
  border-top: none;
}

/* ============================================================
   SECTION 8: SCROLLSPY
   ============================================================ */

.signx-scrollspy-nav {
  position: sticky;
  top: 100px;
}

.signx-scrollspy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--signx-gray-200);
}

.signx-scrollspy-item {
  padding: 0.5rem 0 0.5rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.signx-scrollspy-item a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.signx-scrollspy-item:hover a {
  color: var(--text-strong);
}

.signx-scrollspy-item.active {
  border-left-color: var(--signx-primary);
}

.signx-scrollspy-item.active a {
  color: var(--signx-primary);
  font-weight: 700;
}

/* ============================================================
   SECTION 9: FORM COMPONENTS
   ============================================================ */

/* ---------- 9.1 Date Picker ---------- */
.signx-datepicker {
  position: relative;
}

.signx-datepicker-input {
  width: 100%;
  padding: 0.65rem 1rem;
  padding-right: 3rem;
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--text-strong);
  font-size: 0.925rem;
}

.signx-datepicker-input:focus {
  border-color: var(--signx-primary);
  box-shadow: var(--signx-ring);
  outline: none;
}

.signx-datepicker-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.signx-datepicker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--signx-glow-strong);
  padding: 1rem;
  z-index: 100;
  min-width: 280px;
}

.signx-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.signx-datepicker-month {
  font-weight: 700;
  color: var(--text-strong);
}

.signx-datepicker-nav {
  display: flex;
  gap: 0.5rem;
}

.signx-datepicker-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-datepicker-nav-btn:hover {
  background: var(--surface-1);
}

.signx-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.signx-datepicker-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem;
}

.signx-datepicker-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
}

.signx-datepicker-day:hover {
  background: var(--surface-1);
}

.signx-datepicker-day.today {
  border: 1px solid var(--signx-primary);
}

.signx-datepicker-day.selected {
  background: var(--signx-primary);
  color: #fff;
}

.signx-datepicker-day.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- 9.2 Time Picker ---------- */
.signx-timepicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}

.signx-timepicker-input {
  width: 48px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-strong);
}

.signx-timepicker-input:focus {
  outline: none;
}

.signx-timepicker-separator {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-muted);
}

.signx-timepicker-ampm {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.signx-timepicker-ampm-btn {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-timepicker-ampm-btn.active {
  background: var(--signx-primary);
  border-color: var(--signx-primary);
  color: #fff;
}

/* ---------- 9.3 Color Picker ---------- */
.signx-colorpicker {
  position: relative;
}

.signx-colorpicker-preview {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 2px solid var(--signx-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-colorpicker-preview:hover {
  box-shadow: var(--signx-ring);
}

.signx-colorpicker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--signx-glow-strong);
  padding: 1rem;
  z-index: 100;
}

.signx-colorpicker-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.signx-colorpicker-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-colorpicker-swatch:hover {
  transform: scale(1.15);
}

.signx-colorpicker-swatch.selected {
  border-color: var(--text-strong);
  box-shadow: 0 0 0 2px var(--surface-0);
}

/* ---------- 9.4 File Upload ---------- */
.signx-file-upload {
  position: relative;
  border: 2px dashed var(--signx-gray-300);
  border-radius: var(--radius-xl);
  padding: 3rem 2rem;
  text-align: center;
  background: var(--surface-1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.signx-file-upload:hover {
  border-color: var(--signx-primary);
  background: rgba(79, 70, 229, 0.05);
}

.signx-file-upload.dragover {
  border-color: var(--signx-primary);
  background: rgba(79, 70, 229, 0.1);
  transform: scale(1.02);
}

.signx-file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.signx-file-upload-icon {
  font-size: 3rem;
  color: var(--signx-gray-400);
  margin-bottom: 1rem;
}

.signx-file-upload-title {
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 0.5rem;
}

.signx-file-upload-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.signx-file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background: var(--signx-primary);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-file-upload-btn:hover {
  background: var(--signx-primary-hover);
  transform: translateY(-2px);
}

/* File preview list */
.signx-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.signx-file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
}

.signx-file-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--signx-primary);
  font-size: 1.25rem;
}

.signx-file-item-info {
  flex: 1;
  min-width: 0;
}

.signx-file-item-name {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signx-file-item-size {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.signx-file-item-remove {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: var(--signx-danger);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-file-item-remove:hover {
  background: var(--signx-danger);
  color: #fff;
}

/* ---------- 9.5 Range Slider ---------- */
.signx-range {
  position: relative;
  padding: 1rem 0;
}

.signx-range-input {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--signx-border);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.signx-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--signx-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.signx-range-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--signx-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.4);
  cursor: pointer;
}

.signx-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.signx-range-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.signx-range-value {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--signx-primary);
  color: #fff;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ---------- 9.6 Form Wizard ---------- */
.signx-wizard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.signx-wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--surface-1);
  border-radius: var(--radius-xl);
  border: 1px solid var(--signx-border);
  flex-wrap: wrap;
}

.signx-wizard-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.signx-wizard-step-number {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid var(--signx-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s ease;
  background: var(--surface-0);
}

.signx-wizard-step-label {
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.signx-wizard-step.active .signx-wizard-step-number {
  background: var(--signx-primary);
  border-color: var(--signx-primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.signx-wizard-step.active .signx-wizard-step-label {
  color: var(--signx-primary);
}

.signx-wizard-step.completed .signx-wizard-step-number {
  background: var(--signx-success);
  border-color: var(--signx-success);
  color: #fff;
}

.signx-wizard-step.completed .signx-wizard-step-label {
  color: var(--signx-success);
}

.signx-wizard-connector {
  flex: 1;
  height: 3px;
  background: var(--signx-gray-200);
  border-radius: 999px;
  max-width: 100px;
}

.signx-wizard-connector.active {
  background: linear-gradient(90deg,
      var(--signx-success),
      var(--signx-primary));
}

.signx-wizard-content {
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
}

.signx-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--signx-border);
}

/* ---------- 9.7 Text Editor ---------- */
.signx-editor {
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-0);
}

.signx-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--signx-border);
}

.signx-editor-toolbar-group {
  display: flex;
  gap: 0.25rem;
  padding-right: 0.75rem;
  margin-right: 0.75rem;
  border-right: 1px solid var(--signx-border);
}

.signx-editor-toolbar-group:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.signx-editor-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-editor-btn:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

.signx-editor-btn.active {
  background: var(--signx-primary);
  color: #fff;
}

.signx-editor-content {
  min-height: 200px;
  padding: 1rem;
  outline: none;
}

.signx-editor-content:focus {
  background: var(--surface-1);
}

/* ---------- 9.8 Password Meter ---------- */
.signx-password-meter {
  margin-top: 0.5rem;
}

.signx-password-meter-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.signx-password-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.signx-password-meter-fill.weak {
  width: 25%;
  background: var(--signx-danger);
}

.signx-password-meter-fill.fair {
  width: 50%;
  background: var(--signx-warning);
}

.signx-password-meter-fill.good {
  width: 75%;
  background: var(--signx-info);
}

.signx-password-meter-fill.strong {
  width: 100%;
  background: var(--signx-success);
}

.signx-password-meter-label {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.signx-password-meter-text {
  font-weight: 600;
}

.signx-password-meter-text.weak {
  color: var(--signx-danger);
}

.signx-password-meter-text.fair {
  color: var(--signx-warning);
}

.signx-password-meter-text.good {
  color: var(--signx-info);
}

.signx-password-meter-text.strong {
  color: var(--signx-success);
}

/* ---------- 9.9 Input Groups ---------- */
.signx-input-group {
  display: flex;
  align-items: stretch;
}

.signx-input-group .form-control {
  flex: 1;
  border-radius: 0;
}

.signx-input-group .form-control:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.signx-input-group .form-control:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.signx-input-group-text {
  display: flex;
  align-items: center;
  padding: 0.65rem 1rem;
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  color: var(--text-muted);
  font-weight: 500;
}

.signx-input-group-text:first-child {
  border-right: none;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.signx-input-group-text:last-child {
  border-left: none;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* ---------- 9.10 Floating Labels ---------- */
.signx-floating-label {
  position: relative;
}

.signx-floating-label .form-control {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.signx-floating-label label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  transition: all 0.2s ease;
  pointer-events: none;
  font-size: 0.9rem;
}

.signx-floating-label .form-control:focus~label,
.signx-floating-label .form-control:not(:placeholder-shown)~label {
  top: 0.75rem;
  transform: translateY(0);
  font-size: 0.75rem;
  color: var(--signx-primary);
}

/* ============================================================
   SECTION 10: ADVANCED COMPONENTS
   ============================================================ */

/* ---------- 10.1 Tree View ---------- */
.signx-tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

.signx-tree-item {
  position: relative;
}

.signx-tree-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-tree-content:hover {
  background: var(--surface-1);
}

.signx-tree-toggle {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.signx-tree-item.open>.signx-tree-content .signx-tree-toggle {
  transform: rotate(90deg);
}

.signx-tree-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--signx-primary);
}

.signx-tree-label {
  font-weight: 500;
  color: var(--text-strong);
}

.signx-tree-children {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
  display: none;
}

.signx-tree-item.open>.signx-tree-children {
  display: block;
}

.signx-tree-children::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--signx-gray-200);
}

/* ---------- 10.2 Tour / Onboarding ---------- */
.signx-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.signx-tour-spotlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-lg);
  z-index: 9999;
}

.signx-tour-tooltip {
  position: absolute;
  max-width: 360px;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--signx-glow-strong);
  z-index: 10000;
  padding: 1.25rem;
}

.signx-tour-step {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--signx-primary);
  margin-bottom: 0.5rem;
}

.signx-tour-title {
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 0.5rem;
}

.signx-tour-description {
  color: var(--text-base);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.signx-tour-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.signx-tour-progress {
  display: flex;
  gap: 0.35rem;
  margin-top: 1rem;
  justify-content: center;
}

.signx-tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--signx-gray-200);
  transition: all 0.3s ease;
}

.signx-tour-dot.active {
  background: var(--signx-primary);
  width: 20px;
}

/* ---------- 10.3 Sweet Alert Style ---------- */
.signx-alert-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.signx-alert-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.signx-alert-box {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: var(--surface-0);
  border-radius: var(--radius-2xl);
  box-shadow: var(--signx-glow-strong);
  text-align: center;
  padding: 2rem;
  animation: sweetAlertIn 0.3s ease;
}

@keyframes sweetAlertIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.signx-alert-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.signx-alert-icon.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--signx-success);
  border: 3px solid var(--signx-success);
}

.signx-alert-icon.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--signx-danger);
  border: 3px solid var(--signx-danger);
}

.signx-alert-icon.warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--signx-warning);
  border: 3px solid var(--signx-warning);
}

.signx-alert-icon.info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--signx-info);
  border: 3px solid var(--signx-info);
}

.signx-alert-icon.question {
  background: rgba(79, 70, 229, 0.1);
  color: var(--signx-primary);
  border: 3px solid var(--signx-primary);
}

.signx-alert-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 0.75rem;
}

.signx-alert-text {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.signx-alert-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* ---------- 10.4 Sortable List ---------- */
.signx-sortable {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.signx-sortable-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  cursor: move;
  transition: all 0.2s ease;
}

.signx-sortable-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.signx-sortable-item.dragging {
  opacity: 0.5;
  box-shadow: var(--shadow-lg);
}

.signx-sortable-handle {
  color: var(--text-muted);
  cursor: grab;
}

.signx-sortable-handle:active {
  cursor: grabbing;
}

.signx-sortable-content {
  flex: 1;
}

/* ---------- 10.5 Clipboard Copy ---------- */
.signx-clipboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
}

.signx-clipboard-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signx-clipboard-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-clipboard-btn:hover {
  background: var(--signx-primary);
  border-color: var(--signx-primary);
  color: #fff;
}

.signx-clipboard-btn.copied {
  background: var(--signx-success);
  border-color: var(--signx-success);
  color: #fff;
}

/* ---------- 10.6 PDF Viewer ---------- */
.signx-pdf-viewer {
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #525659;
}

.signx-pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #323639;
  color: #fff;
  flex-wrap: wrap;
}

.signx-pdf-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.signx-pdf-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-pdf-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.signx-pdf-page-info {
  font-size: 0.9rem;
}

.signx-pdf-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.signx-pdf-zoom-value {
  font-size: 0.9rem;
  min-width: 50px;
  text-align: center;
}

.signx-pdf-canvas {
  display: flex;
  justify-content: center;
  padding: 1rem;
  min-height: 400px;
}

/* ---------- 10.7 i18n Language Selector ---------- */
.signx-lang-selector {
  position: relative;
}

.signx-lang-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-lang-btn:hover {
  background: var(--surface-1);
}

.signx-lang-flag {
  width: 24px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
}

.signx-lang-code {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 0.9rem;
}

.signx-lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 180px;
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--signx-glow);
  z-index: 100;
  display: none;
}

.signx-lang-dropdown.show {
  display: block;
}

.signx-lang-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.signx-lang-option:hover {
  background: var(--surface-1);
}

.signx-lang-option.active {
  background: rgba(79, 70, 229, 0.1);
  color: var(--signx-primary);
}

.signx-lang-name {
  font-weight: 500;
}

/* ============================================================
   SECTION 11: SPINNERS & LOADERS
   ============================================================ */

/* ---------- 11.1 Spinner Variations ---------- */
.signx-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--signx-gray-200);
  border-top-color: var(--signx-primary);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

/* Note: @keyframes spin defined in Section 14 Loaders */

.signx-spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.signx-spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

.signx-spinner-xl {
  width: 56px;
  height: 56px;
  border-width: 5px;
}

/* Dot spinner */
.signx-spinner-dots {
  display: inline-flex;
  gap: 6px;
}

.signx-spinner-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--signx-primary);
  animation: dots 1.4s ease-in-out infinite both;
}

.signx-spinner-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.signx-spinner-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes dots {

  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Pulse spinner */
.signx-spinner-pulse {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--signx-primary);
  animation: pulse-spin 1.5s ease-in-out infinite;
}

@keyframes pulse-spin {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Bars spinner */
.signx-spinner-bars {
  display: inline-flex;
  gap: 4px;
  align-items: flex-end;
  height: 24px;
}

.signx-spinner-bars span {
  width: 4px;
  background: var(--signx-primary);
  border-radius: 2px;
  animation: bars 1s ease-in-out infinite;
}

.signx-spinner-bars span:nth-child(1) {
  animation-delay: -0.45s;
}

.signx-spinner-bars span:nth-child(2) {
  animation-delay: -0.3s;
}

.signx-spinner-bars span:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes bars {

  0%,
  100% {
    height: 8px;
  }

  50% {
    height: 24px;
  }
}

/* ============================================================
   SECTION 12: ADDITIONAL UTILITIES
   ============================================================ */

/* ---------- 12.1 Aspect Ratios ---------- */
.aspect-1x1 {
  aspect-ratio: 1 / 1;
}

.aspect-4x3 {
  aspect-ratio: 4 / 3;
}

.aspect-16x9 {
  aspect-ratio: 16 / 9;
}

.aspect-21x9 {
  aspect-ratio: 21 / 9;
}

/* ---------- 12.2 Object Fit ---------- */
.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

.object-fill {
  object-fit: fill;
}

.object-none {
  object-fit: none;
}

/* ---------- 12.3 Cursor Utilities ---------- */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

/* ---------- 12.4 User Select ---------- */
.select-none {
  -webkit-user-select: none;
  user-select: none;
}

.select-text {
  -webkit-user-select: text;
  user-select: text;
}

.select-all {
  -webkit-user-select: all;
  user-select: all;
}

/* ---------- 12.5 Pointer Events ---------- */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* ---------- 12.6 Visibility ---------- */
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/* ---------- 12.7 Overflow Utilities ---------- */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

/* ---------- 12.8 Z-Index Utilities ---------- */
.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-auto {
  z-index: auto;
}

.z-dropdown {
  z-index: 1000;
}

.z-sticky {
  z-index: 1020;
}

.z-fixed {
  z-index: 1030;
}

.z-modal-backdrop {
  z-index: 1040;
}

.z-modal {
  z-index: 1050;
}

.z-popover {
  z-index: 1060;
}

.z-tooltip {
  z-index: 1070;
}

.z-toast {
  z-index: 1090;
}

/* ---------- 12.9 Border Utilities ---------- */
.border-ext {
  border: 1px solid var(--signx-border);
}

.border-0-ext {
  border: none;
}

.border-top-ext {
  border-top: 1px solid var(--signx-border);
}

.border-right-ext {
  border-right: 1px solid var(--signx-border);
}

.border-bottom-ext {
  border-bottom: 1px solid var(--signx-border);
}

.border-left-ext {
  border-left: 1px solid var(--signx-border);
}

.border-primary-ext {
  border-color: var(--signx-primary) !important;
}

.border-success-ext {
  border-color: var(--signx-success) !important;
}

.border-warning-ext {
  border-color: var(--signx-warning) !important;
}

.border-danger-ext {
  border-color: var(--signx-danger) !important;
}

.border-info-ext {
  border-color: var(--signx-info) !important;
}

.border-dashed-ext {
  border-style: dashed;
}

.border-dotted-ext {
  border-style: dotted;
}

.rounded-none-ext {
  border-radius: 0;
}

.rounded-sm-ext {
  border-radius: var(--radius-sm);
}

.rounded-md-ext {
  border-radius: var(--radius-md);
}

.rounded-lg-ext {
  border-radius: var(--radius-lg);
}

.rounded-xl-ext {
  border-radius: var(--radius-xl);
}

.rounded-full-ext {
  border-radius: 999px;
}

/* ---------- 12.10 Shadow Utilities ---------- */
.shadow-none-ext {
  box-shadow: none;
}

.shadow-sm-ext {
  box-shadow: var(--shadow-sm);
}

.shadow-ext {
  box-shadow: var(--shadow-md);
}

.shadow-lg-ext {
  box-shadow: var(--shadow-lg);
}

.shadow-glow-ext {
  box-shadow: var(--signx-glow);
}

.shadow-glow-strong-ext {
  box-shadow: var(--signx-glow-strong);
}

/* ---------- 12.11 Opacity Utilities ---------- */
.opacity-0-ext {
  opacity: 0;
}

.opacity-25-ext {
  opacity: 0.25;
}

.opacity-50-ext {
  opacity: 0.5;
}

.opacity-75-ext {
  opacity: 0.75;
}

.opacity-100-ext {
  opacity: 1;
}

/* ---------- 12.12 Text Alignment ---------- */
.text-left-ext {
  text-align: left;
}

.text-center-ext {
  text-align: center;
}

.text-right-ext {
  text-align: right;
}

.text-justify-ext {
  text-align: justify;
}

/* ---------- 12.13 Font Weight ---------- */
.font-thin-ext {
  font-weight: 100;
}

.font-light-ext {
  font-weight: 300;
}

.font-normal-ext {
  font-weight: 400;
}

.font-medium-ext {
  font-weight: 500;
}

.font-semibold-ext {
  font-weight: 600;
}

.font-bold-ext {
  font-weight: 700;
}

.font-extrabold-ext {
  font-weight: 800;
}

.font-black-ext {
  font-weight: 900;
}

/* ---------- 12.14 Text Transform ---------- */
.uppercase-ext {
  text-transform: uppercase;
}

.lowercase-ext {
  text-transform: lowercase;
}

.capitalize-ext {
  text-transform: capitalize;
}

.normal-case-ext {
  text-transform: none;
}

/* ---------- 12.15 Text Decoration ---------- */
.underline-ext {
  text-decoration: underline;
}

.line-through-ext {
  text-decoration: line-through;
}

.no-underline-ext {
  text-decoration: none;
}

/* ---------- 12.16 White Space ---------- */
.whitespace-normal-ext {
  white-space: normal;
}

.whitespace-nowrap-ext {
  white-space: nowrap;
}

.whitespace-pre-ext {
  white-space: pre;
}

.whitespace-pre-line-ext {
  white-space: pre-line;
}

.whitespace-pre-wrap-ext {
  white-space: pre-wrap;
}

/* ---------- 12.17 Line Clamp ---------- */
.line-clamp-1-ext {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2-ext {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3-ext {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 12.18 Background Colors ---------- */
.bg-primary-ext {
  background-color: var(--signx-primary);
}

.bg-secondary-ext {
  background-color: var(--signx-secondary);
}

.bg-success-ext {
  background-color: var(--signx-success);
}

.bg-warning-ext {
  background-color: var(--signx-warning);
}

.bg-danger-ext {
  background-color: var(--signx-danger);
}

.bg-info-ext {
  background-color: var(--signx-info);
}

.bg-white-ext {
  background-color: #fff;
}

.bg-transparent-ext {
  background-color: transparent;
}

.bg-surface-0-ext {
  background-color: var(--surface-0);
}

.bg-surface-1-ext {
  background-color: var(--surface-1);
}

.bg-surface-2-ext {
  background-color: var(--surface-2);
}

/* ---------- 12.19 Text Colors ---------- */
.text-primary-ext {
  color: var(--signx-primary);
}

.text-secondary-ext {
  color: var(--signx-secondary);
}

.text-success-ext {
  color: var(--signx-success);
}

.text-warning-ext {
  color: var(--signx-warning);
}

.text-danger-ext {
  color: var(--signx-danger);
}

.text-info-ext {
  color: var(--signx-info);
}

.text-white-ext {
  color: #fff;
}

.text-black-ext {
  color: #000;
}

.text-strong-ext {
  color: var(--text-strong);
}

.text-base-ext {
  color: var(--text-base);
}

.text-soft-ext {
  color: var(--text-soft);
}

.text-muted-ext {
  color: var(--text-muted);
}

/* ---------- 12.20 Transition Utilities ---------- */
.transition-none-ext {
  transition: none;
}

.transition-all-ext {
  transition: all 0.2s ease;
}

.transition-colors-ext {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.transition-opacity-ext {
  transition: opacity 0.2s ease;
}

.transition-transform-ext {
  transition: transform 0.2s ease;
}

.duration-75-ext {
  transition-duration: 75ms;
}

.duration-100-ext {
  transition-duration: 100ms;
}

.duration-150-ext {
  transition-duration: 150ms;
}

.duration-200-ext {
  transition-duration: 200ms;
}

.duration-300-ext {
  transition-duration: 300ms;
}

.duration-500-ext {
  transition-duration: 500ms;
}

.ease-linear-ext {
  transition-timing-function: linear;
}

.ease-in-ext {
  transition-timing-function: ease-in;
}

.ease-out-ext {
  transition-timing-function: ease-out;
}

.ease-in-out-ext {
  transition-timing-function: ease-in-out;
}

/* ---------- 12.21 Animation Utilities ---------- */
.animate-none-ext {
  animation: none;
}

.animate-spin-ext {
  animation: spin 1s linear infinite;
}

.animate-ping-ext {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse-ext {
  animation: pulse-anim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce-ext {
  animation: bounce 1s infinite;
}

@keyframes ping {

  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse-anim {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* ---------- 12.22 Hover Utilities ---------- */
.hover-scale-105:hover {
  transform: scale(1.05);
}

.hover-scale-110:hover {
  transform: scale(1.1);
}

.hover-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.hover-translate-y-2:hover {
  transform: translateY(-0.5rem);
}

.hover-shadow-lg:hover {
  box-shadow: var(--shadow-lg);
}

.hover-shadow-glow:hover {
  box-shadow: var(--signx-glow);
}

/* ============================================================
   SECTION 13: PRINT STYLES
   ============================================================ */

@media print {

  .signx-sidebar,
  .sidebar,
  .signx-navbar,
  .navbar,
  .signx-offcanvas,
  .btn,
  .signx-btn,
  .signx-toast,
  .signx-modal,
  .no-print {
    display: none !important;
  }

  .signx-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .card,
  .signx-card {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  a[href]::after {
    content: " ("attr(href) ")";
    font-size: 0.8em;
  }
}

/* ============================================================
   SECTION 14: RTL (Right-to-Left) SUPPORT
   ============================================================ */

[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .signx-sidebar,
[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--signx-border);
}

[dir="rtl"] .signx-content {
  margin-left: 0;
  margin-right: var(--sidebar-width);
}

[dir="rtl"] .nav-link {
  border-radius: 0 2rem 2rem 0;
  margin-left: 1rem;
  margin-right: 0;
}

[dir="rtl"] .signx-offcanvas-start {
  left: auto;
  right: -320px;
  transform: translateX(100%);
  border-left: 1px solid var(--signx-border);
  border-right: none;
}

[dir="rtl"] .signx-offcanvas-start.show {
  right: 0;
  transform: translateX(0);
}

[dir="rtl"] .signx-offcanvas-end {
  right: auto;
  left: -320px;
  transform: translateX(-100%);
  border-right: 1px solid var(--signx-border);
  border-left: none;
}

[dir="rtl"] .signx-offcanvas-end.show {
  left: 0;
  transform: translateX(0);
}

/* ============================================================
   ERP Core Overrides
   ============================================================ */

.btn-lite,
.btn-primary-lite,
.btn-network-primary,
.btn-network-outline,
.btn-network-sm,
.btn-network-action,
.btn-ghost,
.btn-soft-primary,
.btn-subtle,
.btn-chip,
.btn-nizam {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lms-border);
  background: var(--lms-surface);
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.76);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.btn-lite:hover,
.btn-primary-lite:hover,
.btn-network-primary:hover,
.btn-network-outline:hover,
.btn-network-sm:hover,
.btn-network-action:hover,
.btn-ghost:hover,
.btn-soft-primary:hover,
.btn-subtle:hover,
.btn-chip:hover,
.btn-nizam:hover {
  transform: translateY(-1px);
  box-shadow: var(--signx-shadow);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--signx-ring);
}

.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--signx-radius-md);
}

.card,
.signx-card {
  border: 1px solid var(--signx-border-color);
  border-radius: var(--signx-radius-lg);
  background: var(--surface-0);
  box-shadow: var(--signx-shadow-sm);
}

.card-header,
.signx-card .card-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--signx-border-color);
  font-weight: 600;
}

.card-footer,
.signx-card .card-footer {
  background: var(--surface-1);
  border-top: 1px solid var(--signx-border-color);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--signx-shadow-lg);
}

.table {
  --bs-table-bg: var(--surface-0);
  --bs-table-color: var(--text-base);
  --bs-table-border-color: var(--signx-border-color);
  --bs-table-striped-bg: color-mix(in srgb,
      var(--signx-primary) 6%,
      transparent);
  --bs-table-hover-bg: color-mix(in srgb,
      var(--signx-primary) 10%,
      transparent);
  border-color: var(--signx-border-color);
}

.table thead th {
  background: var(--surface-1);
  color: var(--text-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}

.signx-table-wrapper {
  border: 1px solid var(--signx-border-color);
  border-radius: var(--signx-radius-lg);
  overflow: visible;
  box-shadow: var(--signx-shadow-sm);
  background: var(--surface-0);
}

.signx-table-wrapper .table {
  margin-bottom: 0;
}

.signx-table-wrapper thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.signx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-0);
}

.signx-table thead th {
  background: var(--surface-1);
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  font-weight: 700;
}

.signx-table tbody tr:hover {
  background: color-mix(in srgb, var(--signx-primary) 8%, transparent);
}

.signx-table.table-striped tbody tr:nth-of-type(odd) {
  background: color-mix(in srgb, var(--signx-primary) 5%, transparent);
}

.badge {
  font-weight: 600;
  border-radius: var(--signx-radius-pill);
}

.breadcrumb {
  margin-bottom: 0;
  gap: 0.35rem;
}

.pagination .page-link {
  border-radius: var(--signx-radius-sm);
  color: var(--text-base);
}

.pagination .page-item.active .page-link {
  background: var(--signx-primary);
  border-color: var(--signx-primary);
}

.nav-tabs .nav-link {
  border-radius: var(--signx-radius-sm) var(--signx-radius-sm) 0 0;
}

.nav-tabs .nav-link.active {
  background: var(--surface-0);
  border-color: var(--signx-border-color) var(--signx-border-color) transparent;
}

.nav-pills .nav-link {
  border-radius: var(--signx-radius-pill);
}

/* Table filter/toolbars */
.signx-pagebar {
  background: var(--surface-0);
  border: 1px solid var(--signx-border-color);
  border-radius: var(--signx-radius-lg);
  box-shadow: var(--signx-shadow-sm);
}

/* Modern Dashboard Components - Add to existing style.css */

/* Utility Classes */
.text-primary-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-primary {
  background: var(--primary-gradient);
}

.glassmorphism {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
}

/* Modern Card Styles */
.card-modern {
  border: 1px solid var(--signx-border-color);
  border-radius: var(--signx-radius-lg);
  overflow: hidden;
  box-shadow: var(--signx-shadow-sm);
  transition:
    transform var(--normal),
    box-shadow var(--normal),
    border-color var(--normal);
}

.card-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--signx-shadow-lg);
  border-color: var(--signx-border-strong);
}

.card-modern .card-header {
  border-bottom: 1px solid var(--signx-border-color);
  background: var(--surface-1);
}

/* Animated Stats */
.stat-animated {
  position: relative;
  overflow: hidden;
}

.stat-animated::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(30deg);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }

  100% {
    transform: translateX(100%) rotate(30deg);
  }
}

/* Progress Bars */
.progress-modern {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.progress-modern .progress-bar {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.progress-modern .progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%);
  animation: shimmer 2s infinite;
}

/* Badge Styles */
.badge-modern {
  padding: 0.35em 0.65em;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--signx-radius-pill);
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  color: var(--text-strong);
}

.badge-gradient {
  background: var(--primary-gradient);
  color: white;
}

/* Button Styles */
.btn-gradient {
  background: var(--primary-gradient);
  border: 1px solid color-mix(in srgb, var(--signx-primary) 60%, var(--signx-border-color));
  color: #fff;
  box-shadow: var(--signx-shadow-sm);
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast);
}

.btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: var(--signx-shadow-md);
  color: #fff;
}

/* Loading States */
.loading-skeleton {
  background: linear-gradient(90deg,
      var(--surface-1) 25%,
      var(--surface-2) 50%,
      var(--surface-1) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

  100% {
    background-position: -200% 0;
  }
}

/* Tooltips */
.tooltip-modern {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Scrollbar Styling */
.dashboard-container::-webkit-scrollbar {
  width: 8px;
}

.dashboard-container::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 4px;
}

.dashboard-container::-webkit-scrollbar-thumb {
  background: var(--primary-gradient);
  border-radius: 4px;
}

.dashboard-container::-webkit-scrollbar-thumb:hover {
  background: var(--primary-gradient);
}

/* ============================================================
   SignX ERP Utilities (missing classes from views)
   ============================================================ */
.signx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-app {
  min-height: 100vh;
  background: var(--signx-bg-body);
}

.signx-content-box {
  background: var(--surface-0);
  border: 1px solid var(--signx-border);
  border-radius: var(--signx-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.signx-card-header,
.signx-card-body,
.signx-card-footer {
  padding: 1rem 1.25rem;
}

.signx-card-header {
  border-bottom: 1px solid var(--signx-border-color);
  font-weight: 600;
  background: var(--surface-1);
}

.signx-card-footer {
  border-top: 1px solid var(--signx-border-color);
  background: var(--surface-1);
}

.signx-card-soft {
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  border-radius: var(--signx-radius-lg);
  box-shadow: var(--shadow-sm);
}

.signx-form-stacked {
  display: grid;
  gap: var(--space-md);
}

.signx-readonly {
  background: var(--surface-1) !important;
  border-style: dashed !important;
  color: var(--text-soft) !important;
}

.signx-pre {
  background: var(--signx-code);
  border: 1px solid var(--signx-border);
  border-radius: var(--signx-radius-md);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow: auto;
}

.signx-copy-code {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--signx-radius-sm);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
  font-size: 0.85rem;
}

.signx-note {
  background: var(--surface-1);
  border-left: 3px solid var(--signx-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--signx-radius-md);
  color: var(--text-base);
}

.signx-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.signx-section-header {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-strong);
}

.signx-section-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.signx-row-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 991.98px) {
  .signx-row-two {
    grid-template-columns: 1fr;
  }
}

.signx-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--signx-radius-pill);
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-strong);
}

.signx-badge-soft {
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  color: var(--text-soft);
  padding: 0.2rem 0.55rem;
  border-radius: var(--signx-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}

.signx-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--signx-primary);
  display: inline-block;
}

.signx-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: var(--signx-radius-md);
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  box-shadow: var(--shadow-sm);
}

.signx-stat-num {
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--text-strong);
}

.signx-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--font-mono);
  font-weight: 600;
}

.signx-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--signx-border);
}

.signx-list-item:last-child {
  border-bottom: 0;
}

.signx-list-label {
  color: var(--text-muted);
  font-weight: 600;
}

.signx-list-value {
  color: var(--text-strong);
  font-weight: 700;
}

.signx-checklist {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signx-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-base);
}

.signx-cta {
  background: var(--primary-gradient);
  color: #fff;
  border-radius: var(--signx-radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--signx-shadow-md);
}

.signx-cta a {
  color: #fff;
}

.signx-activity {
  display: grid;
  gap: 0.75rem;
}

.signx-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--signx-radius-md);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
}

.signx-activity-body {
  flex: 1;
  display: grid;
  gap: 0.2rem;
}

.signx-approvers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.signx-approver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--signx-radius-pill);
  background: var(--surface-1);
  border: 1px solid var(--signx-border);
  font-size: 0.85rem;
  font-weight: 600;
}

.signx-applicants-list {
  display: grid;
  gap: 0.75rem;
}

.signx-applicant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--signx-radius-md);
  border: 1px solid var(--signx-border);
  background: var(--surface-0);
}

.signx-applicant-info {
  display: grid;
  gap: 0.2rem;
}

.signx-applicant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--signx-primary) 12%, transparent);
  color: var(--signx-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.signx-avatar--primary {
  background: color-mix(in srgb, var(--signx-primary) 12%, transparent);
  color: var(--signx-primary);
}

.signx-avatar--neutral {
  background: var(--surface-2);
  color: var(--text-soft);
}

.signx-icon-square,
.signx-icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid var(--signx-border);
  color: var(--signx-primary);
  background: color-mix(in srgb, var(--signx-primary) 10%, transparent);
}

.signx-icon-square {
  width: 42px;
  height: 42px;
  border-radius: var(--signx-radius-md);
}

.signx-icon-pill {
  padding: 0.35rem 0.7rem;
  border-radius: var(--signx-radius-pill);
}

.signx-icon-square--primary,
.signx-icon-pill--primary {
  color: var(--signx-primary);
  background: color-mix(in srgb, var(--signx-primary) 12%, transparent);
  border-color: color-mix(in srgb,
      var(--signx-primary) 30%,
      var(--signx-border));
}

.signx-icon-square--secondary,
.signx-icon-pill--secondary {
  color: var(--signx-secondary);
  background: color-mix(in srgb, var(--signx-secondary) 12%, transparent);
  border-color: color-mix(in srgb,
      var(--signx-secondary) 30%,
      var(--signx-border));
}

.signx-icon-square--success,
.signx-icon-pill--success {
  color: var(--signx-success);
  background: color-mix(in srgb, var(--signx-success) 12%, transparent);
  border-color: color-mix(in srgb,
      var(--signx-success) 30%,
      var(--signx-border));
}

.signx-icon-square--warning,
.signx-icon-pill--warning {
  color: var(--signx-warning);
  background: color-mix(in srgb, var(--signx-warning) 12%, transparent);
  border-color: color-mix(in srgb,
      var(--signx-warning) 30%,
      var(--signx-border));
}

.signx-icon-square--info,
.signx-icon-pill--info {
  color: var(--signx-info);
  background: color-mix(in srgb, var(--signx-info) 12%, transparent);
  border-color: color-mix(in srgb, var(--signx-info) 30%, var(--signx-border));
}

.signx-icon-square--neutral,
.signx-icon-pill--neutral {
  color: var(--text-soft);
  background: var(--surface-2);
  border-color: var(--signx-border);
}

.signx-icon-square--danger,
.signx-icon-pill--danger {
  color: var(--signx-danger);
  background: color-mix(in srgb, var(--signx-danger) 12%, transparent);
  border-color: color-mix(in srgb,
      var(--signx-danger) 30%,
      var(--signx-border));
}

.signx-callout--primary {
  border-color: color-mix(in srgb,
      var(--signx-primary) 30%,
      var(--signx-border));
  background: color-mix(in srgb, var(--signx-primary) 9%, var(--surface-0));
}

.signx-callout--success {
  border-color: color-mix(in srgb,
      var(--signx-success) 30%,
      var(--signx-border));
  background: var(--signx-success-soft);
}

.signx-callout--warning {
  border-color: color-mix(in srgb,
      var(--signx-warning) 30%,
      var(--signx-border));
  background: var(--signx-warning-soft);
}

.signx-callout--danger {
  border-color: color-mix(in srgb,
      var(--signx-danger) 30%,
      var(--signx-border));
  background: var(--signx-danger-soft);
}

.signx-callout--info {
  border-color: color-mix(in srgb, var(--signx-info) 30%, var(--signx-border));
  background: var(--signx-info-soft);
}

.signx-callout--neutral {
  border-color: var(--signx-border);
  background: var(--surface-1);
}

.signx-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.signx-table-responsive .table {
  margin-bottom: 0;
}

.signx-thead {
  background: var(--surface-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  font-weight: 700;
}

.signx-text-xxs {
  font-size: 0.7rem;
}

.signx-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.signx-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.signx-empty-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.signx-steps {
  display: grid;
  gap: 0.75rem;
}

.signx-step-line {
  height: 2px;
  background: var(--signx-border);
  flex: 1;
}

.signx-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--signx-primary);
}

.signx-step-label {
  font-weight: 700;
  color: var(--text-strong);
}

.signx-step-meta,
.signx-step-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.signx-timeline-card {
  border: 1px solid var(--signx-border);
  border-radius: var(--signx-radius-md);
  background: var(--surface-0);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
}

.signx-timeline-content {
  color: var(--text-base);
}

.signx-timeline-dot,
.signx-timeline-marker {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--signx-primary);
}

.signx-timeline-mini {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.signx-toast-ico {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--signx-primary) 12%, transparent);
  color: var(--signx-primary);
}

.signx-toast-msg {
  font-size: 0.9rem;
  color: var(--text-base);
}

.signx-toast-x {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0;
}

.signx-workflow {
  display: grid;
  gap: 0.75rem;
}

.signx-workflow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
}

.signx-workflow-step-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--signx-radius-md);
  background: color-mix(in srgb, var(--signx-primary) 12%, transparent);
  color: var(--signx-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.signx-workflow-step-label {
  font-weight: 700;
  color: var(--text-strong);
}

.signx-workflow-step-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.signx-workflow-connector {
  height: 2px;
  background: var(--signx-border);
}

[dir="rtl"] .signx-border-end {
  border-left: 1px solid var(--signx-border);
  border-right: 0;
}

.signx-border-end {
  border-right: 1px solid var(--signx-border);
}

/* Alias variants for callouts */
.signx-callout--primary,
.signx-callout--success,
.signx-callout--warning,
.signx-callout--danger,
.signx-callout--info,
.signx-callout--neutral {
  border-radius: var(--signx-radius-lg);
}

/* ============================================================
   Unified Button System (Bootstrap compatible, pill-first)
   ============================================================ */
.btn {
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-font-size: 0.95rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--signx-radius-pill);
  --bs-btn-border-width: 1px;
  --bs-btn-focus-shadow-rgb: var(--signx-primary-rgb);
  border-radius: var(--signx-radius-pill);
  font-weight: var(--bs-btn-font-weight);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  box-shadow: var(--signx-shadow-sm);
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast),
    border-color var(--fast),
    color var(--fast);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--signx-shadow-sm);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--signx-ring);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  box-shadow: none;
}

/* Size variants */
.btn-sm {
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-font-size: 0.85rem;
}

.btn-lg {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-font-size: 1rem;
}

/* Icon buttons */
.btn-icon,
.btn.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--signx-radius-md);
}

.btn-icon.btn-sm,
.btn.btn-icon.btn-sm {
  width: 2.1rem;
  height: 2.1rem;
}

.btn-icon.btn-lg,
.btn.btn-icon.btn-lg {
  width: 3rem;
  height: 3rem;
}

.btn-signx-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.btn-signx-lg {
  padding: 0.75rem 1.4rem;
  font-size: 1rem;
}

.btn-signx-xl {
  padding: 0.9rem 1.7rem;
  font-size: 1.05rem;
}

.btn-signx-pill {
  border-radius: var(--signx-radius-pill);
}

.btn-signx-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--signx-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-signx-block {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* Primary + aliases */
.btn-primary,
.btn-signx,
.btn-primary-lite,
.btn-network-primary,
.btn-network-primary-sm,
.btn-nizam {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lms-border);
  background: var(--lms-surface);
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.76);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.btn-primary:hover,
.btn-signx:hover,
.btn-primary-lite:hover,
.btn-network-primary:hover,
.btn-network-primary-sm:hover,
.btn-nizam:hover {
  background-image: linear-gradient(135deg,
      var(--signx-primary-700) 0%,
      var(--signx-primary) 100%);
}

/* Secondary */
.btn-secondary,
.btn-signx-secondary {
  --bs-btn-bg: var(--signx-secondary);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-secondary) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-secondary) 85%, #111827);
  --bs-btn-hover-border-color: var(--signx-secondary);
  --bs-btn-active-bg: var(--signx-secondary);
  --bs-btn-color: #fff;
  background-color: var(--signx-secondary);
  background-image: var(--secondary-gradient);
  color: #fff;
}

/* Success / Warning / Danger / Info */
.btn-success,
.btn-signx-success {
  --bs-btn-bg: var(--signx-success);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-success) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-success) 85%, #047857);
  --bs-btn-hover-border-color: var(--signx-success);
  --bs-btn-active-bg: var(--signx-success);
  --bs-btn-color: #fff;
  background-color: var(--signx-success);
  background-image: linear-gradient(135deg,
      var(--signx-success) 0%,
      color-mix(in srgb, var(--signx-success) 70%, white) 100%);
  color: #fff;
}

.btn-warning,
.btn-signx-warning {
  --bs-btn-bg: var(--signx-warning);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-warning) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-warning) 85%, #b45309);
  --bs-btn-hover-border-color: var(--signx-warning);
  --bs-btn-active-bg: var(--signx-warning);
  --bs-btn-color: #111827;
  background-color: var(--signx-warning);
  background-image: linear-gradient(135deg,
      var(--signx-warning) 0%,
      color-mix(in srgb, var(--signx-warning) 70%, white) 100%);
  color: #111827;
}

.btn-danger,
.btn-signx-danger {
  --bs-btn-bg: var(--signx-danger);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-danger) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-danger) 85%, #b91c1c);
  --bs-btn-hover-border-color: var(--signx-danger);
  --bs-btn-active-bg: var(--signx-danger);
  --bs-btn-color: #fff;
  background-color: var(--signx-danger);
  background-image: linear-gradient(135deg,
      var(--signx-danger) 0%,
      color-mix(in srgb, var(--signx-danger) 70%, white) 100%);
  color: #fff;
}

.btn-info,
.btn-signx-info {
  --bs-btn-bg: var(--signx-info);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-info) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: color-mix(in srgb, var(--signx-info) 85%, #1d4ed8);
  --bs-btn-hover-border-color: var(--signx-info);
  --bs-btn-active-bg: var(--signx-info);
  --bs-btn-color: #fff;
  background-color: var(--signx-info);
  background-image: linear-gradient(135deg,
      var(--signx-info) 0%,
      color-mix(in srgb, var(--signx-info) 70%, white) 100%);
  color: #fff;
}

.btn-dark,
.btn-signx-dark {
  --bs-btn-bg: var(--signx-gray-800);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-gray-800) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-gray-900);
  --bs-btn-hover-border-color: var(--signx-gray-900);
  --bs-btn-active-bg: var(--signx-gray-900);
  --bs-btn-color: #fff;
  background-color: var(--signx-gray-800);
  background-image: linear-gradient(135deg,
      var(--signx-gray-800) 0%,
      var(--signx-gray-900) 100%);
  color: #fff;
}

.btn-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lms-border);
  background: var(--lms-surface);
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.76);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s,
    background 0.15s;
}

/* Outline variants */
.btn-outline-primary,
.btn-outline-signx,
.btn-signx-outline,
.btn-network-outline {
  --bs-btn-color: var(--signx-primary);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-primary) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-primary);
  --bs-btn-hover-border-color: var(--signx-primary);
  --bs-btn-hover-color: #fff;
  background: transparent;
  color: var(--signx-primary);
  box-shadow: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--signx-secondary);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-secondary) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-secondary);
  --bs-btn-hover-border-color: var(--signx-secondary);
  --bs-btn-hover-color: #fff;
  background: transparent;
  box-shadow: none;
}

.btn-outline-success {
  --bs-btn-color: var(--signx-success);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-success) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-success);
  --bs-btn-hover-border-color: var(--signx-success);
  --bs-btn-hover-color: #fff;
  background: transparent;
  box-shadow: none;
}

.btn-outline-warning {
  --bs-btn-color: var(--signx-warning);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-warning) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-warning);
  --bs-btn-hover-border-color: var(--signx-warning);
  --bs-btn-hover-color: #111827;
  background: transparent;
  box-shadow: none;
}

.btn-outline-danger {
  --bs-btn-color: var(--signx-danger);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-danger) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-danger);
  --bs-btn-hover-border-color: var(--signx-danger);
  --bs-btn-hover-color: #fff;
  background: transparent;
  box-shadow: none;
}

.btn-outline-info {
  --bs-btn-color: var(--signx-info);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-info) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-info);
  --bs-btn-hover-border-color: var(--signx-info);
  --bs-btn-hover-color: #fff;
  background: transparent;
  box-shadow: none;
}

.btn-outline-dark {
  --bs-btn-color: var(--signx-gray-800);
  --bs-btn-border-color: color-mix(in srgb,
      var(--signx-gray-800) 60%,
      var(--signx-border-color));
  --bs-btn-hover-bg: var(--signx-gray-800);
  --bs-btn-hover-border-color: var(--signx-gray-800);
  --bs-btn-hover-color: #fff;
  background: transparent;
  box-shadow: none;
}

/* Link buttons */
.btn-link {
  --bs-btn-border-width: 0;
  color: var(--signx-primary);
  box-shadow: none;
  padding: 0.35rem 0.45rem;
}

.btn-link:hover {
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}

/* Ghost / soft / subtle / chip (legacy) */
.btn-ghost,
.btn-signx-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--signx-primary);
  box-shadow: none;
}

.btn-ghost:hover,
.btn-signx-ghost:hover {
  background: color-mix(in srgb, var(--signx-primary) 10%, transparent);
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

.btn-soft-primary {
  background: color-mix(in srgb, var(--signx-primary) 10%, transparent);
  border-color: color-mix(in srgb,
      var(--signx-primary) 30%,
      var(--signx-border-color));
  color: var(--signx-primary);
  box-shadow: none;
}

.btn-subtle,
.btn-lite {
  background: var(--surface-0);
  border-color: var(--signx-border);
  color: var(--text-strong);
}

.btn-chip {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

/* Network button aliases */
.btn-network-sm,
.btn-network-action {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.btn-lite.btn-sm,
.btn-primary-lite.btn-sm,
.btn-ghost.btn-sm,
.btn-soft-primary.btn-sm,
.btn-subtle.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

/* Loading state */
.btn-loading,
.btn-signx-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::before,
.btn-signx-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

.btn-outline-primary.btn-loading::before,
.btn-outline-secondary.btn-loading::before,
.btn-outline-success.btn-loading::before,
.btn-outline-warning.btn-loading::before,
.btn-outline-danger.btn-loading::before,
.btn-outline-info.btn-loading::before,
.btn-outline-dark.btn-loading::before {
  border-color: rgba(79, 70, 229, 0.35);
  border-top-color: currentColor;
}

/* Responsive Typography */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2.5rem;
  }

  .display-5 {
    font-size: 2rem;
  }

  .display-6 {
    font-size: 1.5rem;
  }
}

/* Print Styles */
@media print {
  .dashboard-container {
    padding: 0;
  }

  .kpi-card,
  .module-card,
  .stat-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #dee2e6;
  }
}

/* ------------------------------------------------------------------
           3. Layout: shell, navbar, sidebar, content
           Naming: `signx-` prefix for components to avoid collisions with Bootstrap
           ------------------------------------------------------------------ */

/* App shell layout */
.signx-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--signx-bg-body);
}

.signx-sidebar {
  width: var(--sidebar-width);
  background: var(--signx-surface);
  border-right: 1px solid var(--bs-border-color);
  padding: var(--signx-space-md);
  box-shadow: var(--signx-shadow-sm);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1025;
  overflow-y: auto;
  transition: width 0.3s ease;
}

.signx-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: var(--signx-space-sm);
  margin-bottom: var(--signx-space-md);
  border-bottom: 1px solid var(--bs-border-color);
}

.signx-sidebar .nav-link {
  color: var(--signx-700);
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
}

.signx-sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.06), transparent);
  color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.06);
}

.signx-sidebar .nav-link:hover {
  background-color: rgba(79, 70, 229, 0.05);
}

.signx-sidebar .sidebar-header {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signx-500);
  padding: 0.75rem 0.75rem 0.25rem;
  margin-top: 1rem;
}

.signx-content {
  margin-left: var(--sidebar-width);
  padding: var(--signx-space-lg);
  min-height: calc(100vh - var(--header-height));
  background-color: var(--background-white);
  transition: all 0.3s ease;
  flex: 1;
}

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

body.sidebar-collapsed .signx-content {
  margin-left: var(--sidebar-collapsed);
}

body.sidebar-collapsed .signx-sidebar .brand span,
body.sidebar-collapsed .signx-sidebar .nav-link span,
body.sidebar-collapsed .signx-sidebar .sidebar-header {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

body.sidebar-collapsed .signx-sidebar .nav-link {
  justify-content: center;
}

@media (max-width: 992px) {
  .signx-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    position: fixed;
  }

  body.signx-sidebar-open .signx-sidebar {
    transform: translateX(0);
  }

  .signx-content {
    margin-left: 0;
  }
}

/* Topbar */
.signx-navbar {
  background: var(--signx-surface);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
}

.signx-navbar .brand img {
  height: 36px;
}

/* ------------------------------------------------------------------
           4. Cards & Surfaces (light-weight, Bootstrap-compatible)
           ------------------------------------------------------------------ */
.signx-card,
.card {
  background: var(--signx-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--signx-radius-md);
  box-shadow: var(--signx-shadow-sm);
  margin-bottom: 1rem;
}

.signx-card>.card-body,
.card>.card-body {
  padding: 1rem;
}

.signx-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.75rem 1rem;
  font-weight: 600;
}

/* Compact card utility */
.signx-card--compact {
  padding: 0.6rem;
}

/* Elevated */
.signx-card--elevated {
  box-shadow: var(--signx-shadow-md);
}

/* ------------------------------------------------------------------
           5. SignX Button System — Professional, Cohesive Button Styles
           ------------------------------------------------------------------ */

/* Base Button with CSS Variables */
.btn-signx {
  --btn-bg: var(--bs-primary);
  --btn-color: #fff;
  --btn-border: transparent;
  --btn-radius: 12px;
  --btn-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
  --btn-hover-bg: linear-gradient(135deg, var(--bs-primary), #4f46e5);
  --btn-hover-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
  --btn-hover-scale: 1.02;
  --btn-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --btn-padding: 0.625rem 1.25rem;
  --btn-font-size: 0.9375rem;
  --btn-line-height: 1.5;

  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: 600;
  line-height: var(--btn-line-height);
  box-shadow: var(--btn-shadow);
  transition: var(--btn-transition);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  min-height: 2.875rem;
}

/* Hover Effect with Ripple Animation */
.btn-signx:hover {
  background: var(--btn-hover-bg);
  box-shadow: var(--btn-hover-shadow);
  transform: translateY(-2px) scale(var(--btn-hover-scale));
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-signx:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 70%);
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 0;
  animation: btn-ripple 0.6s ease-out;
}

@keyframes btn-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.5;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Active State */
.btn-signx:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
  transition: all 0.1s ease;
}

/* Disabled State */
.btn-signx:disabled,
.btn-signx.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
  transform: none !important;
  box-shadow: none !important;
}

/* Focus State */
.btn-signx:focus {
  outline: 0;
  box-shadow:
    0 0 0 4px rgba(79, 70, 229, 0.25),
    var(--btn-shadow);
}

/* Button Sizes */
.btn-signx-sm {
  --btn-padding: 0.375rem 0.875rem;
  --btn-font-size: 0.8125rem;
  --btn-radius: 10px;
  min-height: 2.25rem;
  font-weight: 500;
}

.btn-signx-lg {
  --btn-padding: 0.875rem 1.5rem;
  --btn-font-size: 1.0625rem;
  --btn-radius: 14px;
  --btn-hover-scale: 1.03;
  min-height: 3.25rem;
}

/* ------------------------------------------------------------------
           7. Tables — light, readable, responsive behaviour
   ------------------------------------------------------------------ */
.signx-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--signx-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--signx-radius-md);
  overflow: hidden;
}

.signx-table thead th {
  background: var(--signx-surface-2);
  color: var(--signx-900);
  padding: 0.6rem 0.75rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.signx-table tbody td {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--signx-700);
}

.signx-table.table-striped tbody tr:nth-of-type(odd) td {
  background: rgba(79, 70, 229, 0.03);
}

@media (max-width: 767.98px) {
  .signx-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------------
           8. Badges, pills & chips
  ------------------------------------------------------------------ */
.signx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--signx-radius-pill);
  font-weight: 600;
  font-size: 0.78rem;
}

.signx-badge--soft {
  background: var(--signx-surface-2);
  color: var(--signx-700);
  border: 1px solid var(--bs-border-color);
}

.signx-badge--success {
  background: rgba(16, 185, 129, 0.08);
  color: var(--signx-success);
}

.signx-badge--danger {
  background: rgba(239, 68, 68, 0.08);
  color: var(--signx-danger);
}

/* status dot */
.signx-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 0.45rem;
}

.signx-dot--success {
  background: var(--signx-success);
}

.signx-dot--warning {
  background: var(--signx-warning);
}

/* ------------------------------------------------------------------
           9. Alerts / Toasts / Modals
           Keep modest overrides — use Bootstrap classes with `.signx-` variants
     ------------------------------------------------------------------ */
.alert.signx {
  border-radius: var(--signx-radius-md);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--signx-shadow-sm);
}

.toast.signx {
  border-radius: var(--signx-radius-md);
  border: 1px solid var(--bs-border-color);
  background: var(--signx-surface);
}

.modal-content.signx {
  border-radius: var(--signx-radius-lg);
  border: 1px solid var(--bs-border-color);
}

/* ------------------------------------------------------------------
           10. Utilities (small set to complement Bootstrap utilities)
           These are intentionally narrow and conflict-minimized.
   ------------------------------------------------------------------ */
.signx-hidden {
  display: none !important;
}

.signx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.signx-stack {
  display: flex;
  gap: var(--signx-space-sm);
}

.signx-gap-sm {
  gap: var(--signx-space-sm);
}

.signx-gap-md {
  gap: var(--signx-space-md);
}

.signx-text-soft {
  color: var(--signx-500);
}

.signx-text-strong {
  color: var(--signx-900);
  font-weight: 700;
}

/* ------------------------------------------------------------------
           12. Small components: metrics, cards, chart holder
  ------------------------------------------------------------------ */
.signx-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-radius: var(--signx-radius-md);
  background: linear-gradient(180deg,
      var(--signx-surface-2),
      var(--signx-surface));
  border: 1px solid var(--bs-border-color);
}

.signx-metric .label {
  color: var(--signx-500);
  font-size: 0.82rem;
  font-weight: 600;
}

.signx-metric .value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--signx-900);
}

.signx-chart-card {
  border-radius: var(--signx-radius-lg);
  padding: 0.5rem;
  background: var(--signx-surface);
  border: 1px solid var(--bs-border-color);
}

/* ============================================================
           XIS Avatar System - Professional & Scalable
           ============================================================ */

/* Base Avatar with CSS Variables */
.avatar {
  --avatar-bg: var(--signx-gray-200);
  --avatar-color: var(--signx-gray-800);
  --avatar-border: 2px solid transparent;
  --avatar-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --avatar-size: 2.25rem;
  --avatar-font-size: calc(var(--avatar-size) * 0.45);
  --avatar-border-radius: 999px;
  --avatar-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-border-radius);
  background-color: var(--avatar-bg);
  background-image: var(--avatar-gradient, none);
  border: var(--avatar-border);
  color: var(--avatar-color);
  font-weight: 600;
  font-size: var(--avatar-font-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--avatar-shadow);
  transition: var(--avatar-transition);
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--font-family-sans-serif);
}

/* Avatar Image */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Avatar Initials (fallback when image fails) */
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: inherit;
  color: inherit;
  font-weight: inherit;
}

/* Size Variations */
.avatar-xs {
  --avatar-size: 1.25rem;
  --avatar-border: 1px solid transparent;
  --avatar-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.avatar-sm {
  --avatar-size: 1.6rem;
  --avatar-border: 1px solid transparent;
  --avatar-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.avatar-md {
  --avatar-size: 2.25rem;
  /* Default size */
}

.avatar-lg {
  --avatar-size: 3rem;
  --avatar-border: 2px solid #fff;
  --avatar-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.avatar-xl {
  --avatar-size: 4rem;
  --avatar-border: 3px solid #fff;
  --avatar-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Status Indicators */
.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20%;
  height: 20%;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: var(--signx-gray-400);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.avatar-status-online {
  background-color: var(--signx-success);
}

.avatar-status-offline {
  background-color: var(--signx-gray-400);
}

.avatar-status-busy {
  background-color: var(--signx-danger);
}

/* Avatar Groups */
.avatar-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.avatar-group .avatar {
  margin-left: -0.75rem;
  border: 2px solid #fff;
  position: relative;
  transition: transform 0.2s ease;
}

.avatar-group .avatar:hover {
  transform: translateY(-3px);
  z-index: 2;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* ======================================================
           Dashboard Specific Styles
   ======================================================= */

/* Page Header */
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--signx-space-md);
  margin-bottom: var(--signx-space-lg);
  position: relative;
  z-index: 10;
}

.dashboard-header-main h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--signx-900);
}

.dashboard-header-main p {
  color: var(--signx-500);
  margin-bottom: 0;
}

.dashboard-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* KPI Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--signx-space-md);
  margin-bottom: var(--signx-space-lg);
}

.kpi-card {
  background: var(--signx-surface);
  border-radius: var(--signx-radius-md);
  border: 1px solid var(--bs-border-color);
  padding: var(--signx-space-md);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--signx-shadow-md);
}

.kpi-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.kpi-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--signx-500);
  margin-bottom: 0;
}

.kpi-card-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--signx-900);
  line-height: 1.2;
}

.kpi-card-change {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.kpi-card-change.positive {
  color: var(--signx-success);
}

.kpi-card-change.negative {
  color: var(--signx-danger);
}

/* Content Grid */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--signx-space-md);
}

.content-card {
  background: var(--signx-surface);
  border-radius: var(--signx-radius-md);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.content-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--signx-shadow-lg);
}

.card-header {
  padding: var(--signx-space-md);
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--signx-surface-2);
}

.card-body {
  padding: var(--signx-space-md);
}

.card-footer {
  padding: var(--signx-space-md);
  border-top: 1px solid var(--bs-border-color);
  background: var(--signx-surface-2);
}

/* Activity Feed */
.activity-feed {
  list-style: none;
  padding: 0;
  margin: 0;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: var(--signx-space-sm) 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-avatar {
  margin-right: var(--signx-space-sm);
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-text {
  margin-bottom: 0.25rem;
  color: var(--signx-700);
}

.activity-time {
  font-size: 0.75rem;
  color: var(--signx-500);
}

/* Tabs */
.signx-tabs {
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: var(--signx-space-lg);
}

.signx-tabs .nav-link {
  border: none;
  background: transparent;
  color: var(--signx-500);
  font-weight: 500;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.signx-tabs .nav-link:hover {
  color: var(--signx-700);
}

.signx-tabs .nav-link.active {
  color: var(--signx-primary);
  border-bottom-color: var(--signx-primary);
  background-color: transparent;
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--signx-space-sm);
}

.stat-item {
  text-align: center;
  padding: var(--signx-space-sm);
  background: var(--signx-surface);
  border-radius: var(--signx-radius-sm);
  border: 1px solid var(--bs-border-color);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--signx-900);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--signx-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Notification Badge */
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--signx-danger);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--signx-surface);
}

/* Tooltip */
.tooltip {
  position: relative;
}

.tooltip .tooltip-text {
  visibility: hidden;
  background-color: var(--signx-800);
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 0.5rem;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--signx-800) transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Progress Bars */
.progress-container {
  margin-bottom: 0.5rem;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--signx-700);
}

.progress-bar {
  height: 8px;
  background-color: var(--signx-100);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--signx-primary), var(--signx-info));
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Search Box */
.search-box {
  position: relative;
  max-width: 300px;
}

.search-box input {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  border-radius: var(--signx-radius-pill);
  border: 1px solid var(--bs-border-color);
  background: var(--signx-surface);
  color: var(--signx-700);
  font-size: 0.875rem;
}

.search-box input:focus {
  outline: none;
  border-color: var(--signx-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--signx-500);
}

/* Responsive */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-header-actions {
    margin-top: 1rem;
  }
}

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

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out both;
}

/* Professional Stats Grid */
.professional-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.stats-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border-left: 4px solid;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.stats-card-primary {
  border-left-color: var(--signx-primary);
}

.stats-card-success {
  border-left-color: var(--signx-success);
}

.stats-card-warning {
  border-left-color: var(--signx-warning);
}

.stats-card-info {
  border-left-color: var(--signx-info);
}

.stats-card-danger {
  border-left-color: var(--signx-danger);
}

.stats-card-secondary {
  border-left-color: var(--signx-secondary);
}

.stats-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.stats-card-primary .stats-icon {
  background: rgba(var(--signx-primary-rgb), 0.1);
  color: var(--signx-primary);
}

.stats-card-success .stats-icon {
  background: rgba(var(--signx-success-rgb), 0.1);
  color: var(--signx-success);
}

.stats-card-warning .stats-icon {
  background: rgba(var(--signx-warning-rgb), 0.1);
  color: var(--signx-warning);
}

.stats-card-info .stats-icon {
  background: rgba(var(--signx-info-rgb), 0.1);
  color: var(--signx-info);
}

.stats-card-danger .stats-icon {
  background: rgba(var(--signx-danger-rgb), 0.1);
  color: var(--signx-danger);
}

.stats-card-secondary .stats-icon {
  background: rgba(var(--signx-secondary-rgb), 0.1);
  color: var(--signx-secondary);
}

.stats-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stats-label {
  font-size: 0.875rem;
  color: var(--signx-600);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.stats-subtext {
  font-size: 0.75rem;
  color: var(--signx-500);
}

.stats-subtext .text-success {
  color: var(--signx-success);
}

.stats-subtext .text-warning {
  color: var(--signx-warning);
}

.stats-subtext .text-danger {
  color: var(--signx-danger);
}

.stats-subtext .text-info {
  color: var(--signx-info);
}

/* Advanced Metrics */
.advanced-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.metrics-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.metrics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.metrics-title {
  font-weight: 600;
  color: var(--signx-700);
  display: flex;
  align-items: center;
}

.metrics-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.metrics-body {
  border-top: 1px solid var(--signx-200);
  padding-top: 1rem;
}

.metrics-label {
  font-size: 0.875rem;
  color: var(--signx-600);
  margin-bottom: 0.25rem;
}

.metrics-subtext {
  font-size: 0.75rem;
  color: var(--signx-500);
}

/* Alert List */
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: var(--signx-50);
  border-left: 4px solid;
}

.alert-item-danger {
  border-left-color: var(--signx-danger);
  background: rgba(var(--signx-danger-rgb), 0.05);
}

.alert-item-warning {
  border-left-color: var(--signx-warning);
  background: rgba(var(--signx-warning-rgb), 0.05);
}

.alert-item-info {
  border-left-color: var(--signx-info);
  background: rgba(var(--signx-info-rgb), 0.05);
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.alert-item-danger .alert-icon {
  background: rgba(var(--signx-danger-rgb), 0.1);
  color: var(--signx-danger);
}

.alert-item-warning .alert-icon {
  background: rgba(var(--signx-warning-rgb), 0.1);
  color: var(--signx-warning);
}

.alert-item-info .alert-icon {
  background: rgba(var(--signx-info-rgb), 0.1);
  color: var(--signx-info);
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  color: var(--signx-800);
  margin-bottom: 0.25rem;
}

.alert-text {
  font-size: 0.875rem;
  color: var(--signx-600);
  margin-bottom: 0.25rem;
}

.alert-meta {
  font-size: 0.75rem;
  color: var(--signx-500);
  display: flex;
  align-items: center;
}

/* Module Status */
.module-status-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.module-status-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--signx-50);
  border-radius: 8px;
}

.module-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.module-info {
  flex: 1;
}

.module-name {
  font-weight: 600;
  color: var(--signx-800);
  margin-bottom: 0.25rem;
}

.module-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.status-active {
  background: rgba(var(--signx-success-rgb), 0.1);
  color: var(--signx-success);
}

.status-inactive {
  background: rgba(var(--signx-muted-rgb), 0.1);
  color: var(--signx-muted);
}

.pending-count {
  font-size: 0.75rem;
  color: var(--signx-warning);
}

/* Quick Actions Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.quick-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: var(--signx-50);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.quick-action-item:hover {
  background: var(--signx-100);
  transform: translateY(-2px);
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.quick-action-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--signx-700);
}

/* Footer */
.dashboard-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--signx-200);
}

.footer-links a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--signx-primary);
}

/* ============================================================
   Global Interaction Stability
   ============================================================ */
.dropdown-menu {
  z-index: 1080;
}

.main-header .dropdown-menu {
  z-index: 1090;
}

.select2-container--open,
.select2-container--open .select2-dropdown,
.bootstrap-select .dropdown-menu,
.ts-dropdown,
.choices__list--dropdown {
  z-index: 1085;
}

.secondary-sidebar-backdrop,
.signx-offcanvas-backdrop,
.modal-backdrop,
.offcanvas-backdrop {
  pointer-events: none;
}

.secondary-sidebar-backdrop.show,
body.secondary-sidebar-open .secondary-sidebar-backdrop,
.signx-offcanvas-backdrop.show,
.modal-backdrop.show,
.offcanvas-backdrop.show {
  pointer-events: auto;
}

.tab-content,
.tab-pane {
  overflow: visible;
}

.table-responsive .dropdown-menu {
  z-index: 1090;
}

/* ============================================================
   4) ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

/* ── Focus-Visible Additions ─────────────────────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring, rgba(79, 70, 229, 0.25));
  outline-offset: var(--focus-ring-offset, 2px);
}

.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--signx-primary);
  box-shadow: var(--signx-ring);
  outline: none;
}

.nav-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--signx-radius-sm);
}

.dropdown-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: -2px;
  background-color: var(--signx-info-soft);
}

.pagination .page-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  z-index: 3;
}

.badge:focus-visible,
.chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.modal .btn-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: none;
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   5) PRINT STYLES (Consolidated)
   ============================================================ */

/* ── Print Styles ────────────────────────────────────────── */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .signx-sidebar,
  .signx-topbar,
  .btn,
  .form-actions-sticky,
  nav,
  footer,
  .no-print {
    display: none !important;
  }

  .signx-main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  table {
    border-collapse: collapse;
  }

  table th,
  table td {
    border: 1px solid #ccc;
    padding: 0.5rem;
  }

  a[href]::after {
    content: " ("attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }

  .badge {
    border: 1px solid #333;
  }
}