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

.scrollbar-hide::-webkit-scrollbar { display: none; }

@layer components {
  /* === Boutons === */
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 font-medium rounded-lg
           transition-colors duration-150 cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-offset-1;
  }
  .btn-sm { @apply btn text-xs px-2.5 py-1.5; }
  .btn-md { @apply btn text-sm px-3 py-2; }

  .btn-primary {
    @apply bg-gray-900 text-white hover:bg-gray-800 focus:ring-gray-500;
  }
  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 focus:ring-gray-300;
  }
  .btn-ghost {
    @apply text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:ring-gray-300;
  }
  .btn-danger {
    @apply bg-red-50 text-red-600 hover:bg-red-100 focus:ring-red-400;
  }

  /* === Cards === */
  .card {
    @apply bg-white rounded-xl border border-gray-100 shadow-sm
           transition-all duration-200;
  }
  .card:hover {
    @apply border-gray-200;
  }

  /* === Badges === */
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }

  /* === Filter chips === */
  .filter-chip {
    @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium
           border border-gray-200 bg-white text-gray-600
           hover:border-gray-300 hover:bg-gray-50
           transition-colors cursor-pointer select-none;
  }
  .filter-chip-active {
    @apply border-gray-900 bg-gray-900 text-white hover:bg-gray-800 hover:border-gray-800;
  }

  /* === Mapbox override === */
  .mapboxgl-popup-content {
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
  }

  /* === Score metallic === */
  @property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  .score-gold {
    background: linear-gradient(
      135deg,
      #b8860b 0%,
      #d4a017 12%,
      #ffd700 28%,
      #fffacd 42%,
      #ffd700 55%,
      #daa520 70%,
      #b8860b 85%,
      #d4a017 100%
    );
    color: #fff;
    -webkit-text-stroke: 1px #8b6914;
    paint-order: stroke fill;
    text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  .score-silver {
    background: linear-gradient(
      135deg,
      #808080 0%,
      #a8a8a8 12%,
      #d8d8d8 28%,
      #f0f0f0 42%,
      #d8d8d8 55%,
      #b0b0b0 70%,
      #808080 85%,
      #a8a8a8 100%
    );
    color: #fff;
    -webkit-text-stroke: 1px #666;
    paint-order: stroke fill;
    text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.25);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  .score-gold,
  .score-silver {
    position: relative;
    overflow: hidden;
  }

  .score-gold::before,
  .score-silver::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
      from calc(var(--border-angle) + 135deg),
      transparent 40%,
      rgba(255, 255, 255, 0.8) 48%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.8) 52%,
      transparent 60%
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: border-rotate 3s linear infinite;
    z-index: 2;
  }

  @keyframes border-rotate {
    to { --border-angle: 360deg; }
  }

  .score-gold::after,
  .score-silver::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    mix-blend-mode: screen;
    animation: metallic-shine 6s ease-in-out infinite;
  }

  .score-gold::after {
    background: linear-gradient(
      -45deg,
      transparent 25%,
      rgba(255, 200, 50, 0.5) 40%,
      rgba(255, 255, 220, 0.9) 49%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 220, 0.9) 51%,
      rgba(255, 200, 50, 0.5) 60%,
      transparent 75%
    );
  }

  .score-silver::after {
    background: linear-gradient(
      -45deg,
      transparent 30%,
      rgba(220, 220, 230, 0.4) 46%,
      rgba(245, 245, 255, 0.5) 50%,
      rgba(220, 220, 230, 0.4) 54%,
      transparent 70%
    );
  }

  @keyframes metallic-shine {
    0% { transform: translateX(-120%); }
    15% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */