/* =============================================================
   SELLGENIUS.AI — BASE STYLES
   base.css — Version 1.0

   Import order: tokens.css FIRST, then base.css
   This file resets browser defaults and sets the global
   foundation that every page builds on top of.
   ============================================================= */


/* ---------------------------------------------------------------
   MODERN CSS RESET
   Removes inconsistent browser defaults cleanly
--------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------
   TYPOGRAPHY BASE
--------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-6xl); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-4xl); font-weight: var(--weight-extrabold); }
h3 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h5 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

strong, b {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ---------------------------------------------------------------
   LINKS
--------------------------------------------------------------- */

a {
  color: var(--color-text-purple);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-purple-400);
}

a:focus-visible {
  outline: 2px solid var(--color-purple-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------
   LISTS
--------------------------------------------------------------- */

ul, ol {
  list-style: none;
}

/* ---------------------------------------------------------------
   IMAGES AND MEDIA
--------------------------------------------------------------- */

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------
   FORM ELEMENTS RESET
--------------------------------------------------------------- */

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

input, textarea, select {
  width: 100%;
}

textarea {
  resize: vertical;
}

/* ---------------------------------------------------------------
   SCROLLBAR — CUSTOM STYLED
   Matches the dark purple theme
--------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-4);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-purple-800);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-4) var(--color-bg);
}

/* ---------------------------------------------------------------
   SELECTION COLOR
--------------------------------------------------------------- */

::selection {
  background: rgba(124, 58, 237, 0.3);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------------
   FOCUS VISIBLE — ACCESSIBILITY
   Keyboard navigation focus rings — always visible
--------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-purple-600);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   HORIZONTAL RULE
--------------------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* ---------------------------------------------------------------
   CODE AND PRE
--------------------------------------------------------------- */

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(124, 58, 237, 0.15);
  color: var(--color-purple-300);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: #0a0a18;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
  line-height: 1.7;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #a5b4fc;
}

/* ---------------------------------------------------------------
   TABLE BASE
--------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font);
}

thead th {
  background: var(--table-header-bg);
  color: var(--table-header-color);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  padding: var(--table-cell-padding);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  user-select: none;
  cursor: pointer;
  transition: var(--transition-color);
}

thead th:hover {
  color: var(--color-text-primary);
  background: rgba(124, 58, 237, 0.15);
}

tbody td {
  padding: var(--table-cell-padding);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: var(--transition-fast);
  cursor: pointer;
}

tbody tr:hover td {
  background: var(--table-row-hover);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------------
   UTILITY — DISPLAY
--------------------------------------------------------------- */

.hidden     { display: none !important; }
.visible    { display: block !important; }
.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.grid       { display: grid; }
.inline     { display: inline; }
.inline-flex { display: inline-flex; }

/* ---------------------------------------------------------------
   UTILITY — FLEXBOX
--------------------------------------------------------------- */

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-1         { flex: 1; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-wrap      { flex-wrap: wrap; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ---------------------------------------------------------------
   UTILITY — TEXT
--------------------------------------------------------------- */

.text-primary    { color: var(--color-text-primary); }
.text-secondary  { color: var(--color-text-secondary); }
.text-tertiary   { color: var(--color-text-tertiary); }
.text-purple     { color: var(--color-text-purple); }
.text-success    { color: var(--color-success-light); }
.text-warning    { color: var(--color-warning-light); }
.text-danger     { color: var(--color-danger-light); }
.text-info       { color: var(--color-info-light); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-regular   { font-weight: var(--weight-regular); }
.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

.uppercase  { text-transform: uppercase; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.label-caps {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-tertiary);
}

/* ---------------------------------------------------------------
   UTILITY — SPACING
--------------------------------------------------------------- */

.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.w-full { width: 100%; }

/* ---------------------------------------------------------------
   UTILITY — BACKGROUNDS
--------------------------------------------------------------- */

.bg-card    { background: var(--color-surface-1); }
.bg-surface { background: var(--color-surface-2); }
.bg-purple  { background: rgba(124, 58, 237, 0.12); }
.bg-success { background: var(--color-success-dim); }
.bg-warning { background: var(--color-warning-dim); }
.bg-danger  { background: var(--color-danger-dim); }

/* ---------------------------------------------------------------
   UTILITY — BORDERS
--------------------------------------------------------------- */

.border        { border: 1px solid var(--color-border); }
.border-subtle { border: 1px solid var(--color-border-subtle); }
.border-purple { border: 1px solid var(--color-border-purple); }
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ---------------------------------------------------------------
   UTILITY — OVERFLOW
--------------------------------------------------------------- */

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }

/* ---------------------------------------------------------------
   UTILITY — POSITION
--------------------------------------------------------------- */

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.top-0    { top: 0; }

/* ---------------------------------------------------------------
   NUMBER FORMATTING UTILITIES
   Applied to all financial and metric values
--------------------------------------------------------------- */

.kpi-value {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}

.kpi-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1-5);
}

.delta-positive {
  color: var(--color-success-light);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.delta-negative {
  color: var(--color-danger-light);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.delta-neutral {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------------
   LOADING SKELETON ANIMATION
   Used when data is loading — never show blank space
--------------------------------------------------------------- */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}

.skeleton {
  background: var(--color-surface-3);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-circle {
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   FADE IN ANIMATION
   Page and card entrance
--------------------------------------------------------------- */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.25s ease forwards;
}

/* Staggered children animation */
.animate-children > * {
  opacity: 0;
  animation: fade-in 0.25s ease forwards;
}

.animate-children > *:nth-child(1) { animation-delay: 0.05s; }
.animate-children > *:nth-child(2) { animation-delay: 0.10s; }
.animate-children > *:nth-child(3) { animation-delay: 0.15s; }
.animate-children > *:nth-child(4) { animation-delay: 0.20s; }
.animate-children > *:nth-child(5) { animation-delay: 0.25s; }
.animate-children > *:nth-child(6) { animation-delay: 0.30s; }

/* ---------------------------------------------------------------
   NUMBER COUNT UP ANIMATION
   Applied to KPI numbers when dashboard loads
--------------------------------------------------------------- */

@keyframes count-up {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-count {
  animation: count-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------------------------------------------------------------
   TOAST NOTIFICATION ANIMATION
--------------------------------------------------------------- */

@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ---------------------------------------------------------------
   PROGRESS BAR ANIMATION
   Used for budget utilization and ACoS target bars
--------------------------------------------------------------- */

@keyframes progress-fill {
  from { width: 0%; }
}

.progress-bar-animated {
  animation: progress-fill 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---------------------------------------------------------------
   RESPONSIVE — TABLET
--------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --content-padding: 24px;
  }
}

/* ---------------------------------------------------------------
   RESPONSIVE — MOBILE
--------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --content-padding: 16px;
    --card-padding: 16px;
  }

  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

/* ---------------------------------------------------------------
   PRINT STYLES
   Clean output when printing reports
--------------------------------------------------------------- */

@media print {
  body {
    background: white;
    color: black;
  }

  .no-print {
    display: none !important;
  }
}