@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
}

:root {
  --tg-bg-color: #ffffff;
  --tg-text-color: #000000;
  --tg-hint-color: #999999;
  --tg-link-color: #2481cc;
  --tg-button-color: #2481cc;
  --tg-button-rgb: 36 129 204; /* RGB of #2481cc - needed for opacity variants */
  --tg-button-text-color: #ffffff;
  --tg-secondary-bg-color: #efeff3;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--tg-secondary-bg-color);
  color: var(--tg-text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100dvh;
  overscroll-behavior: none;
}

#root {
  min-height: 100dvh;
}

/* Scrollbar - thin, blends into background, no layout impact on mobile */
::-webkit-scrollbar {
  width: 3px;
  background: transparent;
}

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

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tg-hint-color) 45%, transparent);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--tg-button-color) 70%, transparent);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tg-hint-color) 45%, transparent) transparent;
}

/* Smooth scroll */
* {
  scroll-behavior: smooth;
}

@layer components {
  .card {
    @apply bg-tg-bg rounded-2xl p-4 shadow-sm;
  }

  .section-header {
    @apply text-xs font-semibold uppercase tracking-wide text-tg-hint px-4 pt-2 pb-1;
  }

  .list-item {
    @apply bg-tg-bg px-4 py-3 flex items-center gap-3;
  }

  .list-item:not(:last-child) {
    @apply border-b border-tg-secondary-bg;
  }
}