/* ═══════════════════════════════════════════════════════════════════
   OLEK AI STUDIO — UTILITY CLASSES v1.0
   ═══════════════════════════════════════════════════════════════════
   Data-driven: derived from 1775 inline styles in index.php.
   Every class replaces a high-frequency style="" pattern.
   All values reference tokens.css — zero hardcoded colors.

   SECTIONS:
   1. Text:   color, size, weight, alignment
   2. Badge:  status pills, channel tags, count badges
   3. Button: primary, ghost, danger, sizes
   4. Surface: card, panel, section, overlay
   5. Border: subtle, default, accent
   6. Layout: flex patterns, spacing, visibility
   ═══════════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  1. TEXT — Color · Size · Weight · Alignment                     ║
   ║  Replaces: 460+ inline styles                                    ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Color ────────────────────────────────────────────────────────── */
.text-primary   { color: var(--text-primary) }
.text-secondary { color: var(--text-secondary) }
.text-muted     { color: var(--text-muted) }
.text-faint     { color: var(--text-faint) }
.text-accent    { color: var(--primary-text) }
.text-on-fill   { color: var(--text-on-primary) }

.text-success   { color: var(--success) }
.text-danger    { color: var(--danger) }
.text-warning   { color: var(--warning) }
.text-info      { color: var(--info) }

/* ── Size ─────────────────────────────────────────────────────────── */
.text-2xs { font-size: var(--text-2xs) }   /*  9px  */
.text-xs  { font-size: var(--text-xs) }    /* 10px  */
.text-sm  { font-size: var(--text-sm) }    /* 11px  */
.text-base{ font-size: var(--text-base) }  /* 13px  */
.text-md  { font-size: var(--text-md) }    /* 14px  */
.text-lg  { font-size: var(--text-lg) }    /* 17px  */
.text-xl  { font-size: var(--text-xl) }    /* 22px  */
.text-2xl { font-size: var(--text-2xl) }   /* 26px  */
.text-3xl { font-size: var(--text-3xl) }   /* 30px  */

/* ── Weight ───────────────────────────────────────────────────────── */
.font-medium { font-weight: 500 }
.font-semibold { font-weight: 600 }
.font-bold   { font-weight: 700 }
.font-black  { font-weight: 800 }

/* ── Alignment ────────────────────────────────────────────────────── */
.text-center { text-align: center }
.text-right  { text-align: right }
.text-left   { text-align: left }

/* ── Compound labels (highest-frequency combos) ───────────────────
   style="font-size:10px;color:var(--t3)"      → .label-xs     (×95)
   style="font-size:9px;color:var(--t3)"       → .label-2xs    (×29)
   style="font-size:11px;color:var(--t2)"      → .label-sm     (×17)
   style="font-size:11px;color:var(--t3)"      → .label-sm-muted (×12)
   style="font-size:12px;color:var(--t2)"      → .label-base   (×6)
   ──────────────────────────────────────────────────────────────── */
.label-2xs     { font-size: var(--text-2xs); color: var(--text-muted) }
.label-xs      { font-size: var(--text-xs);  color: var(--text-muted) }
.label-sm      { font-size: var(--text-sm);  color: var(--text-secondary) }
.label-sm-muted{ font-size: var(--text-sm);  color: var(--text-muted) }
.label-base    { font-size: var(--text-base); color: var(--text-secondary) }

/* ── Section headers ──────────────────────────────────────────────── */
.section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.heading-sm { font-size: var(--text-base); font-weight: 700; letter-spacing: -.02em }
.heading-md { font-size: var(--text-lg);   font-weight: 700; letter-spacing: -.02em }
.heading-lg { font-size: var(--text-xl);   font-weight: 700; letter-spacing: -.03em }

/* ── Mono ─────────────────────────────────────────────────────────── */
.font-mono { font-family: var(--font-mono); letter-spacing: .02em }

/* ── Truncation ───────────────────────────────────────────────────── */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  2. BADGES — Status · Channel · Count                           ║
   ║  Replaces: badge inline patterns + channel dots                  ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Base badge: MOVED to app.css (component, not utility) ──── */

/* ── Status badges ────────────────────────────────────────────────── */
.badge-primary {
  background: var(--primary-a12);
  color: var(--primary-text);
}
.badge-success {
  background: var(--success-subtle);
  color: var(--success);
}
.badge-success-strong {
  background: var(--success-subtle-strong);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-subtle);
  color: var(--warning);
}
.badge-danger {
  background: var(--danger-subtle);
  color: var(--danger);
}
.badge-info {
  background: var(--info-subtle);
  color: var(--info);
}
.badge-orange {
  background: var(--orange-subtle);
  color: var(--orange-400);
}
.badge-pink {
  background: var(--pink-subtle);
  color: var(--pink-400);
}
.badge-muted {
  background: var(--muted-subtle);
  color: var(--text-muted);
}

/* ── Solid badges (white text on fill) ────────────────────────────── */
.badge-solid-primary {
  background: var(--primary);
  color: var(--text-on-primary);
}
.badge-solid-success {
  background: var(--success);
  color: var(--text-on-warning);
}
.badge-solid-danger {
  background: var(--danger);
  color: var(--text-on-primary);
}

/* ── Channel badges ───────────────────────────────────────────────── */
.badge-whatsapp {
  background: var(--channel-whatsapp-subtle);
  color: var(--channel-whatsapp);
}
.badge-telegram {
  background: var(--channel-telegram-subtle);
  color: var(--channel-telegram);
}
.badge-instagram {
  background: var(--channel-instagram-subtle);
  color: var(--channel-instagram);
}
.badge-email {
  background: var(--channel-email-subtle);
  color: var(--channel-email);
}

/* ── Count badge (unread counters) ────────────────────────────────── */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  3. BUTTONS — Primary · Ghost · Danger · Sizes                  ║
   ║  Replaces: inline button patterns                                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Base (shared) ────────────────────────────────────────────────── */

/* ── Sizes ────────────────────────────────────────────────────────── */
.btn-md {
  padding: 10px 18px;
  font-size: var(--text-base);
}
.btn-xs {
  padding: 4px 10px;
  font-size: var(--text-xs);
}
.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 15px;
}

/* ── Primary (gradient fill, white text) ──────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-active));
  color: var(--text-on-primary);
  box-shadow: var(--primary-glow-sm);
}
.btn-primary:hover {
  box-shadow: var(--primary-glow);
  transform: translateY(-1px);
}

/* ── Primary flat (solid, no gradient) ────────────────────────────── */
.btn-primary-flat {
  background: var(--primary);
  color: var(--text-on-primary);
}
.btn-primary-flat:hover {
  background: var(--primary-hover);
}

/* ── Ghost (glass background) ─────────────────────────────────────── */
.btn-ghost {
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(var(--glass-blur-sm));
}
.btn-ghost:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* ── Danger ────────────────────────────────────────────────────────── */
.btn-danger {
  background: linear-gradient(135deg, var(--danger), var(--danger-bold));
  color: var(--text-on-primary);
  box-shadow: 0 2px 12px var(--danger-subtle);
}

/* ── Success ──────────────────────────────────────────────────────── */
.btn-success {
  background: linear-gradient(135deg, var(--success), var(--success-bold));
  color: var(--text-on-warning);
  box-shadow: 0 2px 12px var(--success-subtle);
}

/* ── Text button (minimal) ────────────────────────────────────────── */
.btn-text {
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 12px;
}
.btn-text:hover { color: var(--text-primary) }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  4. SURFACES — Card · Panel · Section · Overlay                  ║
   ║  Replaces: glass/backdrop/border/radius inline combos            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Card/Panel/Elevated: MOVED to app.css (glass components) ── */


/* ── Section (collapsible content blocks) ─────────────────────────── */

/* ── Inset (sunken area: chat bg, code blocks) ────────────────────── */
.surface-inset {
  background: var(--surface-1);
  border-radius: var(--radius-md);
}


/* ── Overlay (modal/drawer backdrops) ─────────────────────────────── */

/* ── Background tints ─────────────────────────────────────────────── */
.bg-base    { background: var(--bg-base) }
.bg-primary { background: var(--primary-a8) }
.bg-primary-strong { background: var(--primary-a18) }
.bg-success { background: var(--success-subtle) }
.bg-warning { background: var(--warning-subtle) }
.bg-danger  { background: var(--danger-subtle) }
.bg-info    { background: var(--info-subtle) }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  5. BORDERS                                                      ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.border-subtle  { border: 1px solid var(--border-subtle) }
.border-default { border: 1px solid var(--border-default) }
.border-strong  { border: 1px solid var(--border-strong) }
.border-accent  { border: 1px solid var(--primary-a25) }
.border-success { border: 1px solid var(--success-border) }
.border-danger  { border: 1px solid var(--danger-border) }
.border-warning { border: 1px solid var(--warning-border) }

.border-bottom  { border-bottom: 1px solid var(--border-subtle) }
.border-top     { border-top: 1px solid var(--border-subtle) }

/* ── Radius ───────────────────────────────────────────────────────── */
.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) }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  6. LAYOUT — Flex · Spacing · Visibility                        ║
   ║  Replaces: 200+ display:flex and spacing inlines                 ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Flex patterns ────────────────────────────────────────────────── */
.flex        { display: flex }
.flex-col    { display: flex; flex-direction: column }
.flex-center { display: flex; align-items: center; justify-content: center }
.flex-between{ display: flex; justify-content: space-between; align-items: center }
.flex-wrap   { flex-wrap: wrap }
.flex-1      { flex: 1 }
.flex-1-min0 { flex: 1; min-width: 0 }
.flex-shrink-0 { flex-shrink: 0 }
.items-center{ align-items: center }
.items-start { align-items: flex-start }
.items-end   { align-items: flex-end }
.justify-end { justify-content: flex-end }
.self-end    { align-self: flex-end }

/* ── Gap ──────────────────────────────────────────────────────────── */
.gap-2xs { gap: var(--space-2xs) }  /* 2px */
.gap-xs  { gap: var(--space-xs) }   /* 4px */
.gap-sm  { gap: var(--space-sm) }   /* 6px */
.gap-md  { gap: var(--space-md) }   /* 8px */
.gap-base{ gap: var(--space-base) } /* 12px */
.gap-lg  { gap: var(--space-lg) }   /* 16px */

/* ── Margin bottom ────────────────────────────────────────────────── */
.mb-0    { margin-bottom: 0 }
.mb-xs   { margin-bottom: var(--space-xs) }   /* 4px  */
.mb-sm   { margin-bottom: var(--space-sm) }   /* 6px  */
.mb-md   { margin-bottom: var(--space-md) }   /* 8px  */
.mb-base { margin-bottom: var(--space-base) } /* 12px */
.mb-lg   { margin-bottom: var(--space-lg) }   /* 16px */

/* ── Margin top ───────────────────────────────────────────────────── */
.mt-0    { margin-top: 0 }
.mt-xs   { margin-top: var(--space-xs) }
.mt-sm   { margin-top: var(--space-sm) }
.mt-md   { margin-top: var(--space-md) }
.mt-base { margin-top: var(--space-base) }

/* ── Padding ──────────────────────────────────────────────────────── */
.p-sm   { padding: var(--space-sm) }
.p-md   { padding: var(--space-md) }
.p-base { padding: var(--space-base) }
.p-lg   { padding: var(--space-lg) }
.p-xl   { padding: var(--space-xl) }

/* ── Visibility ───────────────────────────────────────────────────── */
.hidden  { display: none !important }
.visible { display: block }

/* ── Overflow ─────────────────────────────────────────────────────── */
.overflow-auto   { overflow-y: auto; -webkit-overflow-scrolling: touch }
.overflow-hidden { overflow: hidden }

/* ── Width ────────────────────────────────────────────────────────── */
.w-full { width: 100% }

/* ── Cursor ───────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  7. COMPOSITE — High-frequency multi-property combos             ║
   ║  Replaces: the most repeated inline style combinations           ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Row: flex between with bottom border (data rows) ─────────────── */

/* ── KPI value display ────────────────────────────────────────────── */
.kpi-value {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.kpi-value-lg {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: 500;
}

/* ── Active/selected state modifier ───────────────────────────────── */
.is-active {
  background: var(--primary-a8);
  color: var(--primary-text);
}
.is-active-strong {
  background: var(--primary-a18);
  color: var(--primary-text);
  border-color: var(--primary-a30);
}

/* ── Focus ring ───────────────────────────────────────────────────── */
.focus-ring:focus {
  border-color: var(--primary-a40);
  box-shadow: 0 0 0 3px var(--primary-a8);
  outline: none;
}

/* ── Hover lift ───────────────────────────────────────────────────── */
.hover-lift {
  transition: transform .2s, box-shadow .2s;
}
.hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* ── Primary gradient text ────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-text), var(--info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}