// Shared UI primitives for CredNX dashboard.
// All colors source from CSS custom properties in colors_and_type.css
// so the entire UI re-themes automatically when [data-theme] flips.

// ——— Icons (Lucide-style, 1.75px stroke) ———
const I = {
  logout: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>,
  upload: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>,
  fileText: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>,
  users: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  layers: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>,
  settings: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>,
  download: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>,
  check: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>,
  checkCircle: (p={}) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>,
  x: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  chevronDown: (p={}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="6 9 12 15 18 9"/></svg>,
  chevronRight: (p={}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="9 18 15 12 9 6"/></svg>,
  plus: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
  search: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>,
  arrowRight: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  arrowLeft: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>,
  mail: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
  lock: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>,
  building: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01"/></svg>,
  trash: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>,
  refresh: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>,
  eye: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>,
  moreH: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>,
  bank: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="3" y1="21" x2="21" y2="21"/><path d="M3 10h18M5 6l7-3 7 3M5 10v11M19 10v11M9 10v11M15 10v11"/></svg>,
  creditCard: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>,
  receipt: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 2v20l3-2 3 2 3-2 3 2 3-2 3 2V2l-3 2-3-2-3 2-3-2-3 2-3-2z"/><line x1="8" y1="9" x2="16" y2="9"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="12" y2="17"/></svg>,
  trendUp: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>,
  user: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
  help: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></svg>,
  alert: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>,
  sun: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>,
  moon: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>,
  home: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 9.5L12 3l9 6.5V20a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></svg>,
  bell: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>,
  calendar: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  clock: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  sparkles: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3l1.9 4.6L18 9.5l-4.1 2L12 16l-1.9-4.5L6 9.5l4.1-1.9z"/><path d="M19 16l.6 1.4L21 18l-1.4.6L19 20l-.6-1.4L17 18l1.4-.6z"/></svg>,
  activity: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>,
  command: (p={}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>,
  filter: (p={}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>,
  zap: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
  chart: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>,
  key: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 2l-9.6 9.6a6 6 0 1 1-3 3L18 11l3 3"/></svg>,
  webhook: (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M18 16.98h-5.99c-1.66 0-3.13-1.31-3.31-2.95a3.5 3.5 0 0 1 1.84-3.45M11 8.99V11M5.5 8.5L9 11M14 11l3.5-2.5M14 16.98l-3.5-3.5"/></svg>,
};

// ——— Google G logo (kept verbatim for Google sign-in) ———
const GoogleG = (p={}) => (
  <svg width="18" height="18" viewBox="0 0 24 24" {...p}>
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
    <path fill="#FBBC05" d="M5.84 14.1A6.97 6.97 0 0 1 5.47 12c0-.73.13-1.44.37-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.43 3.45 1.18 4.93l3.66-2.83z"/>
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"/>
  </svg>
);

// ——— Brand Logo (matches the website's SVG mark) ———
// `tone="dark"` forces lime/cream rendering for dark surfaces (sidebar, footer-style panels).
const BrandLogo = ({ height = 28, variant = 'full', tone = 'auto', style = {} }) => {
  const uid = React.useId ? React.useId() : `lg-${Math.random().toString(36).slice(2, 8)}`;
  const isFull = variant === 'full';
  const aspect = isFull ? 405 / 84 : 83 / 83;
  const viewBox = isFull ? '0 0 405 84' : '0 0 83 83';
  const width = Math.round(height * aspect);
  // For "dark" tone (always-dark surfaces) wrap output in [data-theme="dark"]
  // so CSS variables resolve to dark-theme values regardless of global theme.
  const wrapStyle = tone === 'dark'
    ? { display: 'inline-flex', alignItems: 'center', ...style }
    : { display: 'inline-flex', alignItems: 'center', ...style };
  const dataTheme = tone === 'dark' ? 'dark' : undefined;
  return (
    <span style={wrapStyle} data-theme={dataTheme} aria-label="CredNX">
      <svg width={width} height={height} viewBox={viewBox} xmlns="http://www.w3.org/2000/svg" role="img">
        <defs>
          <linearGradient id={`l1-${uid}`} x1="67" y1="37" x2="67" y2="68" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="hsl(var(--primary-glow))"/>
            <stop offset="100%" stopColor="hsl(var(--primary))"/>
          </linearGradient>
          <linearGradient id={`l2-${uid}`} x1="17" y1="17" x2="65" y2="22" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="hsl(var(--primary-glow))"/>
            <stop offset="60%" stopColor="hsl(var(--primary))"/>
            <stop offset="100%" stopColor="hsl(var(--primary) / 0.9)"/>
          </linearGradient>
        </defs>
        <g style={{ transformBox: 'fill-box', transformOrigin: 'center' }}>
          <path d="M69.0322 67.6021C62.3308 63.2287 55.075 60.4683 55.075 60.4683C51.9488 61.9205 48.3736 62.0757 45.1531 60.9339C54.0385 69.4035 61.9095 70.8447 67.1809 69.4146C67.8183 68.8326 68.4391 68.2284 69.0322 67.6021Z" fill="hsl(var(--accent))"/>
          <path d="M40.1256 57.6911C35.0483 52.4309 29.4332 46.4888 24.5222 41.4336C20.3982 37.1932 20.3483 30.4585 24.4279 26.1738C25.8968 24.6273 27.7149 23.613 29.6383 23.1196C16.3684 24.1284 9.61156 31.2401 5.06632 38.773C4.94992 40.1144 4.90558 41.478 4.93883 42.8582C5.3989 62.5856 21.4901 78.6713 41.2176 79.1369C51.2337 79.3753 60.3685 75.6448 67.1864 69.4201C62.1368 69.3425 54.4708 67.7128 45.1586 60.9393C43.3128 60.2853 41.589 59.2044 40.1312 57.6967L40.1256 57.6911Z" fill="hsl(var(--primary))"/>
          <path d="M79.2978 41.9602C79.2978 40.2918 79.1869 38.6455 78.9707 37.0381C72.8735 43.3515 65.3406 51.1117 58.9717 57.6967C57.8188 58.8885 56.494 59.8142 55.075 60.4738C55.075 60.4738 60.2244 65.3904 69.0322 67.6076C75.39 60.9338 79.2978 51.9099 79.2978 41.9658V41.9602Z" fill={`url(#l1-${uid})`}/>
          <path d="M67.6742 17.4381C68.356 16.7231 68.3338 15.5812 67.6132 14.8994C61.261 8.90746 52.7913 5.13824 43.4459 4.80566C44.6819 5.24356 54.0329 11.3297 67.2806 17.8483L67.6742 17.4326V17.4381Z" fill="hsl(var(--primary-glow))"/>
          <path d="M30.9576 22.8482C30.8966 22.8593 30.8356 22.8704 30.7691 22.887C31.3068 22.8094 31.85 22.754 32.3987 22.754C35.1203 22.754 37.853 23.7573 39.9815 25.786L48.3292 33.7291C49.4489 34.7933 51.2171 34.749 52.2814 33.6293L67.2751 17.8596C58.6114 10.3211 44.6764 5.25484 43.4403 4.81695C42.9969 4.80032 42.5535 4.78369 42.11 4.78369C25.6363 4.78369 11.6736 15.4983 6.78466 30.3312C23.1364 21.8616 30.952 22.8538 30.952 22.8538L30.9576 22.8482Z" fill={`url(#l2-${uid})`}/>
          <path d="M29.6326 23.1142C30.0095 23.02 30.3864 22.9424 30.7689 22.8814C30.8299 22.8703 30.8908 22.8537 30.9574 22.8426C30.9574 22.8426 21.7616 17.8428 6.79 30.3201C5.90313 33.0139 5.31003 35.8409 5.0606 38.762C10.0936 32.637 18.1254 25.6085 29.6326 23.1086V23.1142Z" fill="hsl(var(--primary-deep))"/>
        </g>
        {isFull && (
          <g>
            <path d="M86.6253 77.1964V8.38623H115.05C120.202 8.38623 124.648 9.31579 128.388 11.1749C132.152 13.0117 135.052 15.6547 137.091 19.1042C139.129 22.5313 140.148 26.5967 140.148 31.3005C140.148 36.0716 139.106 40.1258 137.023 43.4633C134.94 46.7784 131.984 49.3095 128.153 51.0566C124.323 52.7813 119.787 53.6437 114.546 53.6437H96.5705V40.5402H111.455C113.963 40.5402 116.058 40.2154 117.738 39.5658C119.44 38.8939 120.728 37.8859 121.602 36.5419C122.475 35.1756 122.912 33.4285 122.912 31.3005C122.912 29.1726 122.475 27.4143 121.602 26.0256C120.728 24.6144 119.44 23.5616 117.738 22.8673C116.035 22.1505 113.941 21.7921 111.455 21.7921H103.257V77.1964H86.6253ZM125.365 45.748L142.5 77.1964H124.357L107.557 45.748H125.365Z" fill="currentColor"/>
            <path d="M149.27 77.1964V8.38623H197.249V21.8929H165.901V36.0044H194.796V49.5446H165.901V63.6897H197.249V77.1964H149.27Z" fill="currentColor"/>
            <path d="M233.099 77.1964H207.665V8.38623H233.065C240.076 8.38623 246.113 9.76378 251.175 12.5189C256.26 15.2516 260.179 19.1938 262.935 24.3456C265.69 29.475 267.067 35.6124 267.067 42.7577C267.067 49.9254 265.69 56.0852 262.935 61.237C260.202 66.3888 256.293 70.3422 251.209 73.0973C246.124 75.83 240.087 77.1964 233.099 77.1964ZM224.296 63.0177H232.461C236.313 63.0177 239.572 62.3681 242.238 61.069C244.926 59.7475 246.953 57.6083 248.319 54.6516C249.708 51.6726 250.402 47.7079 250.402 42.7577C250.402 37.8075 249.708 33.8652 248.319 30.931C246.93 27.9743 244.881 25.8464 242.171 24.5472C239.483 23.2257 236.168 22.5649 232.225 22.5649H224.296V63.0177Z" fill="currentColor"/>
            <path d="M334.466 8.38623V77.1964H326.402L288.906 23.1697H288.234V77.1964H279.902V8.38623H287.966L325.596 62.5473H326.268V8.38623H334.466Z" fill="currentColor"/>
            <path d="M341 77L346.421 77L368 43.5L346.421 8L341.115 8L362.688 43L341 77Z" fill="hsl(var(--accent))"/>
            <path d="M349 77L359.204 77L381 43.5L359.204 8L349.217 8L371 43L349 77Z" fill="hsl(var(--accent))"/>
            <path d="M359.171 8.38574L376.912 37.0118L377 38L395.189 8.38574H405L383.327 43L405 77.1959H395.189L377.449 49.1074H376.912L359.171 77.1959H349.361L371.5 43L349.361 8.38574H359.171Z" fill="currentColor"/>
          </g>
        )}
      </svg>
    </span>
  );
};

// Compact wordmark used inline; inherits theme from current data-theme scope.
const Wordmark = ({ size = 20, style = {} }) => (
  <span style={{ display:'inline-flex', alignItems:'center', color:'hsl(var(--fg))', ...style }}>
    <BrandLogo height={size} variant="full"/>
  </span>
);

// ——— Theme toggle (drop into TopBar) ———
function ThemeToggle({ size = 36 }) {
  const [theme, setTheme] = React.useState(
    () => (typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') || 'light' : 'light')
  );
  const flip = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    document.documentElement.classList.add('theme-transition');
    document.documentElement.setAttribute('data-theme', next);
    try { localStorage.setItem('crednx_theme', next); } catch {}
    setTheme(next);
    setTimeout(() => document.documentElement.classList.remove('theme-transition'), 360);
  };
  const dark = theme === 'dark';
  return (
    <button
      onClick={flip}
      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
      title={dark ? 'Light mode' : 'Dark mode'}
      style={{
        width: size, height: size, borderRadius: size/2,
        border: '1px solid hsl(var(--border))',
        background: 'hsl(var(--surface))',
        color: 'hsl(var(--fg))',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', transition: 'background 150ms, border-color 150ms',
      }}
      onMouseEnter={e => e.currentTarget.style.background = 'hsl(var(--surface-2))'}
      onMouseLeave={e => e.currentTarget.style.background = 'hsl(var(--surface))'}>
      {dark ? <I.sun/> : <I.moon/>}
    </button>
  );
}

// ——— Atoms ———
const Button = ({children, variant='primary', size='md', icon, iconRight, onClick, disabled, type='button', style, full}) => {
  const sizes = {
    sm: {h:32, px:14, fs:13},
    md: {h:40, px:18, fs:14},
    lg: {h:48, px:22, fs:15},
  }[size];
  const variants = {
    primary:   { bg:'hsl(var(--primary))',  color:'hsl(var(--primary-fg))', border:'1px solid transparent', shadow:'var(--shadow-brand)', hoverBg:'hsl(var(--primary-glow))' },
    secondary: { bg:'hsl(var(--surface))',  color:'hsl(var(--fg))',         border:'1px solid hsl(var(--border))', shadow:'var(--shadow-xs)', hoverBg:'hsl(var(--surface-2))' },
    ghost:     { bg:'transparent',          color:'hsl(var(--fg))',         border:'1px solid transparent', shadow:'none', hoverBg:'hsl(var(--surface-2))' },
    danger:    { bg:'hsl(var(--surface))',  color:'hsl(var(--danger))',     border:'1px solid hsl(var(--danger) / 0.35)', shadow:'var(--shadow-xs)', hoverBg:'hsl(var(--danger-bg))' },
    dark:      { bg:'hsl(var(--surface-deep))', color:'hsl(var(--surface-deep-fg))', border:'1px solid transparent', shadow:'var(--shadow-md)', hoverBg:'hsl(var(--primary-glow))' },
    accent:    { bg:'hsl(var(--accent))',   color:'hsl(var(--accent-fg))',  border:'1px solid transparent', shadow:'var(--shadow-glow-lime)', hoverBg:'hsl(var(--accent-glow))' },
  }[variant];
  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>{setHover(false);setPress(false)}}
      onMouseDown={()=>setPress(true)} onMouseUp={()=>setPress(false)}
      style={{
        display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
        height:sizes.h, padding:`0 ${sizes.px}px`, fontSize:sizes.fs, fontWeight:600,
        borderRadius: 999, cursor: disabled?'not-allowed':'pointer', fontFamily:'inherit',
        background: hover && !disabled ? variants.hoverBg : variants.bg,
        color: variants.color, border: variants.border,
        boxShadow: press? 'var(--shadow-xs)' : variants.shadow,
        transform: press?'scale(0.98)':'scale(1)',
        transition:'transform 120ms, background 200ms, box-shadow 200ms, color 200ms',
        opacity: disabled?0.5:1, width: full?'100%':'auto', letterSpacing:'-0.01em',
        ...(style||{})
      }}>
      {icon}{children}{iconRight}
    </button>
  );
};

const Input = ({label, icon, hint, error, value, onChange, type='text', placeholder, right}) => (
  <label style={{display:'block'}}>
    {label && <div style={{fontSize:13, fontWeight:500, color:'hsl(var(--fg))', marginBottom:6}}>{label}</div>}
    <div style={{position:'relative', display:'flex', alignItems:'center', height:44, border:`1px solid ${error?'hsl(var(--danger))':'hsl(var(--border))'}`, borderRadius:12, background:'hsl(var(--surface))', transition:'border-color 150ms, box-shadow 150ms'}}
      onFocus={e=>{e.currentTarget.style.boxShadow='0 0 0 3px hsl(var(--ring) / 0.2)'; e.currentTarget.style.borderColor='hsl(var(--ring))';}}
      onBlur={e=>{e.currentTarget.style.boxShadow='none'; e.currentTarget.style.borderColor=error?'hsl(var(--danger))':'hsl(var(--border))';}}>
      {icon && <span style={{paddingLeft:12, color:'hsl(var(--fg-subtle))', display:'flex'}}>{icon}</span>}
      <input type={type} value={value} onChange={onChange} placeholder={placeholder}
        style={{flex:1, border:'none', outline:'none', height:'100%', padding:icon?'0 12px 0 10px':'0 14px', fontSize:14, fontFamily:'inherit', color:'hsl(var(--fg))', background:'transparent', borderRadius:12}}/>
      {right && <span style={{paddingRight:12}}>{right}</span>}
    </div>
    {hint && <div style={{fontSize:12, color: error ? 'hsl(var(--danger))' : 'hsl(var(--fg-muted))', marginTop:6}}>{hint}</div>}
  </label>
);

const Badge = ({children, tone='neutral', size='md', style}) => {
  const tones = {
    neutral: { bg:'hsl(var(--surface-2))',   color:'hsl(var(--fg))',         border:'hsl(var(--border))' },
    brand:   { bg:'hsl(var(--accent-soft))', color:'hsl(var(--primary))',    border:'hsl(var(--accent) / 0.35)' },
    success: { bg:'hsl(var(--success-bg))',  color:'hsl(var(--success-fg))', border:'hsl(var(--success) / 0.3)' },
    warning: { bg:'hsl(var(--warning-bg))',  color:'hsl(var(--warning-fg))', border:'hsl(var(--warning) / 0.3)' },
    danger:  { bg:'hsl(var(--danger-bg))',   color:'hsl(var(--danger-fg))',  border:'hsl(var(--danger) / 0.3)' },
    accent:  { bg:'hsl(var(--accent))',      color:'hsl(var(--accent-fg))',  border:'transparent' },
    gold:    { bg:'hsl(var(--gold-soft))',   color:'hsl(var(--gold))',       border:'hsl(var(--gold) / 0.3)' },
  }[tone] || { bg:'hsl(var(--surface-2))', color:'hsl(var(--fg))', border:'hsl(var(--border))' };
  const sz = size==='sm'?{fs:11, h:20, px:8, r:6}:{fs:12, h:24, px:10, r:999};
  return <span style={{display:'inline-flex', alignItems:'center', gap:4, height:sz.h, padding:`0 ${sz.px}px`, fontSize:sz.fs, fontWeight:500, color:tones.color, background:tones.bg, border:`1px solid ${tones.border}`, borderRadius:sz.r, letterSpacing:'0.01em', whiteSpace:'nowrap', ...(style||{})}}>{children}</span>;
};

const Card = ({children, padding=24, style, className}) => (
  <div className={className} style={{background:'hsl(var(--surface))', border:'1px solid hsl(var(--border))', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-sm)', padding, color:'hsl(var(--fg))', ...style}}>{children}</div>
);

// Avatar — accepts either a CSS color string OR a CSS var token. Defaults to deep forest.
const Avatar = ({name, size=32, color}) => {
  const initials = (name||'?').split(' ').map(p=>p[0]).slice(0,2).join('').toUpperCase();
  const bg = color || 'hsl(var(--primary))';
  // Pick contrasting fg — if user passed a hex/hsl we can't introspect, so default to inverse fg
  const fg = 'hsl(var(--primary-fg))';
  return <div style={{width:size, height:size, borderRadius:size/2, background:bg, color:fg, display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:size*0.38, fontWeight:600, flexShrink:0, letterSpacing:'0.02em'}}>{initials}</div>;
};

const Divider = ({v}) => v ? <div style={{width:1, alignSelf:'stretch', background:'hsl(var(--border))'}}/> : <div style={{height:1, background:'hsl(var(--border))'}}/>;

const Spinner = ({size=16, color}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={{animation:'cx-spin 0.8s linear infinite'}}>
    <circle cx="12" cy="12" r="9" stroke={color || 'hsl(var(--primary))'} strokeWidth="3" fill="none" strokeDasharray="42" strokeDashoffset="12" strokeLinecap="round" opacity="0.9"/>
  </svg>
);

// ——— Currency context (unchanged — used by reports for IDR formatting) ———
const CurrencyCtx = React.createContext({ code: 'IDR', symbol: 'Rp', locale: 'id-ID' });
const useCurrency = () => React.useContext(CurrencyCtx);
const fmtAmt = (value, cur) => {
  const { symbol, locale } = cur || { symbol: 'Rp', locale: 'id-ID' };
  return `${symbol} ${Math.abs(Number(value) || 0).toLocaleString(locale)}`;
};

Object.assign(window, {
  I, GoogleG, BrandLogo, Wordmark, ThemeToggle,
  Button, Input, Badge, Card, Avatar, Divider, Spinner,
  CurrencyCtx, useCurrency, fmtAmt
});
