/*
 * click4ble.com — Global CSS utilities
 *
 * This file supplements the inline Tailwind config and CDN classes.
 * Keep additions minimal — prefer Tailwind utility classes in HTML.
 */

:root {
  --color-primary: #1d4ed8;
  --color-on-primary: #ffffff;
  --color-primary-container: #1d4ed8;
  --color-on-primary-container: #cad3ff;
  --color-inverse-primary: #b7c4ff;
  --color-primary-fixed: #dce1ff;
  --color-primary-fixed-dim: #b7c4ff;
  --color-on-primary-fixed: #001551;
  --color-on-primary-fixed-variant: #0039b5;
  --color-secondary: #10b981;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #6cf8bb;
  --color-on-secondary-container: #00714d;
  --color-secondary-fixed: #6ffbbe;
  --color-secondary-fixed-dim: #4edea3;
  --color-on-secondary-fixed: #002113;
  --color-on-secondary-fixed-variant: #005236;
  --color-tertiary: #2c2abc;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #4648d4;
  --color-on-tertiary-container: #d1d1ff;
  --color-tertiary-fixed: #e1e0ff;
  --color-tertiary-fixed-dim: #c0c1ff;
  --color-on-tertiary-fixed: #07006c;
  --color-on-tertiary-fixed-variant: #2f2ebe;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-background: #f8f9fa;
  --color-on-background: #191c1d;
  --color-surface: #f8f9fa;
  --color-surface-dim: #d9dadb;
  --color-surface-bright: #f8f9fa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4f5;
  --color-surface-container: #edeeef;
  --color-surface-container-high: #e7e8e9;
  --color-surface-container-highest: #e1e3e4;
  --color-on-surface: #191c1d;
  --color-on-surface-variant: #434655;
  --color-surface-variant: #e1e3e4;
  --color-surface-tint: #2151da;
  --color-outline: #747686;
  --color-outline-variant: #c4c5d7;
  --color-inverse-surface: #2e3132;
  --color-inverse-on-surface: #f0f1f2;

  --gradient-start: #1d4ed8;
  --gradient-end: #3b82f6;
}

.dark {
  --color-primary: #1d4ed8;
  --color-on-primary: #ffffff;
  --color-primary-container: #1d4ed8;
  --color-on-primary-container: #cad3ff;
  --color-inverse-primary: #b7c4ff;
  --color-primary-fixed: #dce1ff;
  --color-primary-fixed-dim: #b7c4ff;
  --color-on-primary-fixed: #001551;
  --color-on-primary-fixed-variant: #0039b5;
  --color-secondary: #9ca3af;
  --color-on-secondary: #111827;
  --color-secondary-container: #4b5563;
  --color-on-secondary-container: #f9fafb;
  --color-secondary-fixed: #e5e7eb;
  --color-secondary-fixed-dim: #9ca3af;
  --color-on-secondary-fixed: #111827;
  --color-on-secondary-fixed-variant: #374151;
  --color-tertiary: #d1d5db;
  --color-on-tertiary: #111827;
  --color-tertiary-container: #4b5563;
  --color-on-tertiary-container: #f3f4f6;
  --color-tertiary-fixed: #e5e7eb;
  --color-tertiary-fixed-dim: #d1d5db;
  --color-on-tertiary-fixed: #111827;
  --color-on-tertiary-fixed-variant: #374151;
  --color-error: #fca5a5;
  --color-on-error: #7f1d1d;
  --color-error-container: #991b1b;
  --color-on-error-container: #fee2e2;
  --color-background: #303030;
  --color-on-background: #f3f4f6;
  --color-surface: #303030;
  --color-surface-dim: #303030;
  --color-surface-bright: #484848;
  --color-surface-container-lowest: #1f1f1f;
  --color-surface-container-low: #2a2a2a;
  --color-surface-container: #3c3c3c;
  --color-surface-container-high: #484848;
  --color-surface-container-highest: #555555;
  --color-on-surface: #f3f4f6;
  --color-on-surface-variant: #9ca3af;
  --color-surface-variant: #484848;
  --color-surface-tint: #e5e7eb;
  --color-outline: #555555;
  --color-outline-variant: #3c3c3c;
  --color-inverse-surface: #f3f4f6;
  --color-inverse-on-surface: #1f2937;

  --gradient-start: #9ca3af;
  --gradient-end: #374151;
}

/* ── Font baseline ───────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Hide scrollbar (cross-browser) while preserving scroll functionality ── */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE / Edge */
  scrollbar-width:    none; /* Firefox  */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Opera */
}

/* ── Chat scroll — 4 px wide custom scrollbar ───────────────────────────── */
.chat-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c4c5d7 transparent; /* outline-variant on transparent track */
}
.chat-scroll::-webkit-scrollbar       { width: 4px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb {
  background-color: #c4c5d7;
  border-radius:    9999px;
}

/* ── Material Symbols Outlined — base variation settings ────────────────── */
.material-symbols-outlined {
  font-family:              'Material Symbols Outlined';
  font-weight:              normal;
  font-style:               normal;
  font-size:                24px;
  line-height:              1;
  letter-spacing:           normal;
  text-transform:           none;
  display:                  inline-block;
  white-space:              nowrap;
  word-wrap:                normal;
  direction:                ltr;
  font-variation-settings:  'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing:   antialiased;
}

/* ── Spinner animation and classes ───────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Ad Price tag styling — always Emerald Green in all themes ───────────────── */
.ad-price {
  color: #10b981 !important;
}