// ───────────────────────────────────────────────────────────
// Huio Control Panel — Inline UI Styles (cp-styles.jsx)
// ───────────────────────────────────────────────────────────

const appStyles = {
  authWrapper: {
    minHeight: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '24px',
    boxSizing: 'border-box'
  },
  authCard: {
    width: '100%',
    maxWidth: '400px',
    padding: '36px',
    background: 'var(--hu-bg-card)',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  authLogo: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: '20px'
  },
  authSubText: {
    textAlign: 'center',
    marginBottom: '24px'
  },
  pinDotsContainer: {
    display: 'flex',
    justifyContent: 'center',
    gap: '16px',
    marginBottom: '32px'
  },
  pinDot: {
    width: '14px',
    height: '14px',
    borderRadius: '50%',
    border: '2px solid var(--hu-fg-3)',
    transition: 'all 150ms ease'
  },
  keypadGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: '12px',
    width: '100%',
    marginBottom: '24px'
  },
  keypadBtn: {
    height: '56px',
    border: '1px solid var(--hu-border)',
    borderRadius: 'var(--hu-r-md)',
    background: 'var(--hu-bg-elev)',
    color: 'var(--hu-fg)',
    fontSize: '20px',
    fontWeight: '600',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transition: 'all 100ms ease',
    ':active': {
      transform: 'scale(0.95)',
      background: 'var(--hu-border-strong)'
    }
  },
  keypadBtnSpecial: {
    height: '56px',
    border: '0',
    background: 'transparent',
    color: 'var(--hu-fg-2)',
    fontSize: '14px',
    fontWeight: '600',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transition: 'all 100ms ease'
  },
  authFooter: {
    marginTop: '12px'
  },
  appWrapper: {
    minHeight: '100vh',
    display: 'flex'
  },
  mainContainer: {
    marginLeft: '260px',
    flexGrow: 1,
    display: 'flex',
    flexDirection: 'column',
    minHeight: '100vh',
    boxSizing: 'border-box'
  },
  contentWrapper: {
    flexGrow: 1,
    padding: '32px',
    boxSizing: 'border-box'
  },
  viewWrapper: {
    maxWidth: '1200px',
    margin: '0 auto',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    gap: '24px'
  },
  welcomeBanner: {
    marginBottom: '8px'
  },
  metricsGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
    gap: '20px'
  },
  splitLayout: {
    display: 'grid',
    gridTemplateColumns: '2fr 1fr',
    gap: '24px',
    alignItems: 'start'
  },
  logsCard: {
    padding: '24px'
  },
  logsList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '12px',
    maxHeight: '300px',
    overflowY: 'auto'
  },
  logRow: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    fontSize: '13px',
    borderBottom: '1px solid var(--hu-border)',
    paddingBottom: '8px'
  },
  logTime: {
    fontFamily: 'var(--hu-mono)',
    color: 'var(--hu-fg-3)'
  },
  logBadge: (type) => {
    let color = 'var(--hu-stone)';
    let bg = 'rgba(110,103,87,0.1)';
    if (type === 'success') {
      color = 'var(--hu-forest)';
      bg = 'rgba(79,107,61,0.1)';
    } else if (type === 'error') {
      color = 'var(--hu-rust)';
      bg = 'rgba(168,65,42,0.08)';
    } else if (type === 'system') {
      color = 'var(--hu-ochre)';
      bg = 'rgba(193,148,51,0.12)';
    }
    return {
      fontSize: '9px',
      fontWeight: 'bold',
      padding: '2px 6px',
      borderRadius: 'var(--hu-r-pill)',
      color,
      background: bg,
      letterSpacing: '0.05em'
    };
  },
  logText: {
    color: 'var(--hu-fg-2)'
  },
  healthCard: {
    padding: '24px'
  },
  healthMetricsList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '18px'
  },
  healthItem: {
    display: 'flex',
    flexDirection: 'column',
    gap: '6px'
  },
  healthLabel: {
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: '12px',
    fontWeight: '600',
    color: 'var(--hu-fg-2)'
  },
  healthValue: {
    fontFamily: 'var(--hu-mono)',
    color: 'var(--hu-fg)'
  },
  tableStyle: {
    width: '100%',
    borderCollapse: 'collapse',
    textAlign: 'left'
  },
  tableHeaderRow: {
    background: 'var(--hu-bg-elev)',
    borderBottom: '1px solid var(--hu-border-strong)'
  },
  tableTh: {
    padding: '16px 20px',
    fontSize: '11px',
    fontWeight: '600',
    textTransform: 'uppercase',
    color: 'var(--hu-fg-2)',
    letterSpacing: '0.05em'
  },
  tableRowStyle: {
    borderBottom: '1px solid var(--hu-border)'
  },
  tableTd: {
    padding: '16px 20px',
    fontSize: '13px',
    color: 'var(--hu-fg)',
    verticalAlign: 'middle'
  },
  roleChip: (role) => {
    const isOrg = role === 'organizer' || role === 'both';
    return {
      display: 'inline-flex',
      fontSize: '11px',
      fontWeight: '600',
      padding: '2px 8px',
      borderRadius: 'var(--hu-r-pill)',
      background: isOrg ? 'rgba(184,92,56,0.1)' : 'rgba(79,107,61,0.1)',
      color: isOrg ? 'var(--hu-terra)' : 'var(--hu-forest)'
    };
  },
  planLabel: (plan) => {
    let color = 'var(--hu-fg-2)';
    if (plan === 'organizer_pro' || plan === 'basic_assistant') color = 'var(--hu-terra)';
    if (plan === 'organizer_business' || plan === 'premium_auto') color = 'var(--hu-ochre)';
    if (plan === 'free_trial' || plan === 'trial_pro_30d') color = 'var(--hu-forest)';
    return {
      fontWeight: '600',
      fontSize: '12px',
      color
    };
  },
  verificationBadge: (status) => {
    let bg = 'rgba(110,103,87,0.1)';
    let color = 'var(--hu-fg-2)';
    if (status === 'verified') {
      bg = 'rgba(79,107,61,0.1)';
      color = 'var(--hu-forest)';
    } else if (status === 'pending') {
      bg = 'rgba(193,148,51,0.12)';
      color = 'var(--hu-ochre)';
    } else if (status === 'rejected') {
      bg = 'rgba(168,65,42,0.08)';
      color = 'var(--hu-rust)';
    }
    return {
      display: 'inline-flex',
      fontSize: '10px',
      fontWeight: 'bold',
      padding: '2px 8px',
      borderRadius: 'var(--hu-r-pill)',
      background: bg,
      color,
      letterSpacing: '0.04em'
    };
  },
  groupStatusBadge: (status) => {
    let bg = 'rgba(110,103,87,0.1)';
    let color = 'var(--hu-fg-2)';
    if (status === 'active') {
      bg = 'rgba(79,107,61,0.1)';
      color = 'var(--hu-forest)';
    }
    return {
      display: 'inline-flex',
      fontSize: '11px',
      fontWeight: '600',
      padding: '2px 8px',
      borderRadius: 'var(--hu-r-pill)',
      background: bg,
      color
    };
  },
  slotStatusBadge: (status) => {
    let bg = 'rgba(79,107,61,0.1)';
    let color = 'var(--hu-forest)';
    if (status === 'dead') {
      bg = 'rgba(168,65,42,0.08)';
      color = 'var(--hu-rust)';
    } else if (status === 'withdrawn') {
      bg = 'rgba(193,148,51,0.12)';
      color = 'var(--hu-ochre)';
    }
    return {
      display: 'inline-flex',
      fontSize: '10px',
      fontWeight: '700',
      padding: '2px 8px',
      borderRadius: 'var(--hu-r-pill)',
      background: bg,
      color,
      letterSpacing: '0.04em'
    };
  },
  emptyCard: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '48px',
    textAlign: 'center',
    color: 'var(--hu-fg-3)'
  },
  cccdGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
    gap: '24px'
  },
  cccdCard: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    padding: '20px'
  },
  cccdCardHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '16px'
  },
  cccdCardBody: {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
    marginBottom: '20px'
  },
  cccdDetailItem: {
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: '13px'
  },
  cccdDetailLabel: {
    color: 'var(--hu-fg-2)'
  },
  cccdDetailValue: {
    fontWeight: '600',
    color: 'var(--hu-fg)'
  },
  cccdCardActions: {
    display: 'flex',
    gap: '12px'
  },
  modalCccdWrapper: {
    display: 'flex',
    flexDirection: 'column'
  },
  cccdSplit: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
    gap: '20px'
  },
  rejectInputGroup: {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
    marginBottom: '20px'
  },
  textInput: {
    padding: '12px 16px',
    border: '1px solid var(--hu-border-strong)',
    background: 'var(--hu-bg-elev)',
    color: 'var(--hu-fg)',
    borderRadius: 'var(--hu-r-md)',
    fontFamily: 'inherit',
    fontSize: '14px',
    outline: 'none',
    boxSizing: 'border-box',
    width: '100%',
    transition: 'border-color 150ms ease',
    ':focus': {
      borderColor: 'var(--hu-terra)'
    }
  },
  modalActions: {
    display: 'flex',
    justifyContent: 'flex-end',
    gap: '12px'
  },
  settingsForm: {
    display: 'flex',
    flexDirection: 'column',
    gap: '16px'
  },
  inputGroup: {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  },
  formActions: {
    display: 'flex',
    justifyContent: 'flex-end',
    gap: '12px',
    marginTop: '8px'
  }
};

window.CP_STYLES = appStyles;