/* SalesPal Design Tokens */
:root {
  --sp-green: #43B02A;
  --sp-green-dark: #3a9a24;
  --sp-blue: rgb(38, 156, 224);
  --sp-blue-dark: rgb(0, 62, 127);
  --sp-red: #dc3545;
  --sp-amber: #ffc107;
  --sp-bg: #f5f5f5;
  --sp-text: #333;
  --sp-text-secondary: #666;
  --sp-text-muted: #888;
  --sp-border: #e0e0e0;
  --sp-radius-lg: 12px;
  --sp-radius-md: 8px;
  --sp-radius-sm: 6px;
  --sp-shadow: 0 4px 16px rgba(0,0,0,0.08);
  --sp-shadow-hover: 0 8px 24px rgba(0,0,0,0.15);
  --sp-sat: env(safe-area-inset-top, 0px);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

html {
  height: -webkit-fill-available;
}

body {
  background-color: #f5f5f5;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  color: var(--sp-text);
}

/* Typography */
.sp-h1 { font-size: 1.75rem; font-weight: 600; }
.sp-h2 { font-size: 1.5rem; font-weight: 600; }
.sp-h3 { font-size: 1.25rem; font-weight: 700; }
.sp-h4 { font-size: 1.1rem; font-weight: 600; }
.sp-h5 { font-size: 1.1rem; font-weight: 600; }
.sp-h6 { font-size: 0.95rem; font-weight: 600; }

.sp-text-muted { color: #888; }
.sp-text-secondary { color: #666; }
.sp-text-center { text-align: center; }
.sp-text-start { text-align: left; }
.sp-text-end { text-align: right; }
.sp-text-success { color: var(--sp-green); }
.sp-text-danger { color: var(--sp-red); }
.sp-text-warning { color: var(--sp-amber); }

.sp-fw-bold { font-weight: 700; }
.sp-fw-semibold { font-weight: 600; }
.sp-small { font-size: 0.875rem; }
.sp-fs-6 { font-size: 0.875rem; }

/* Spacing: margin-bottom */
.sp-mb-0 { margin-bottom: 0; }
.sp-mb-1 { margin-bottom: 0.25rem; }
.sp-mb-2 { margin-bottom: 0.5rem; }
.sp-mb-3 { margin-bottom: 1rem; }
.sp-mb-4 { margin-bottom: 1.5rem; }

/* Spacing: margin-top */
.sp-mt-0 { margin-top: 0; }
.sp-mt-1 { margin-top: 0.25rem; }
.sp-mt-2 { margin-top: 0.5rem; }
.sp-mt-3 { margin-top: 1rem; }

/* Spacing: margin-end (right in LTR) */
.sp-me-1 { margin-right: 0.25rem; }
.sp-me-2 { margin-right: 0.5rem; }

/* Spacing: padding */
.sp-p-0 { padding: 0; }
.sp-p-1 { padding: 0.25rem; }
.sp-p-2 { padding: 0.5rem; }
.sp-p-3 { padding: 1rem; }
.sp-p-4 { padding: 1.5rem; }

/* Spacing: padding y-axis */
.sp-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.sp-py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.sp-py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.sp-py-5 { padding-top: 3rem; padding-bottom: 3rem; }

/* Spacing: padding x-axis */
.sp-px-3 { padding-left: 1rem; padding-right: 1rem; }

/* Display */
.sp-hidden { display: none; }
.sp-block { display: block; }

/* Misc */
.sp-w-100 { width: 100%; }
.sp-border { border: 1px solid var(--sp-border); }
.sp-rounded { border-radius: var(--sp-radius-md); }
.sp-shadow { box-shadow: var(--sp-shadow); }
.sp-overflow-y { overflow-y: auto; }
.sp-overflow-x { overflow-x: auto; }
.sp-border-bottom { border-bottom: 1px solid var(--sp-border); }
.sp-h-100 { height: 100%; }
.sp-min-vh-100 { min-height: 100vh; }
.sp-no-underline { text-decoration: none; }