@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* Import image protection styles */
@import './styles/image-protection.css';

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

@layer base {
  :root {
    /* Theme CSS Variables */
    --color-primary: #5C8762;
    --color-primary-light: #7aa583;
    --color-primary-dark: #4a6f4f;
    --color-accent: #22c55e;
    --color-background: #fafafa;
    --color-text: #171717;
    --font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, sans-serif;
    --heading-font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, sans-serif;
    --border-radius: 0.5rem;
    --font-size-base: 16px;
    --shadow-default: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Surface colors (for cards, inputs, etc.) */
    --color-surface: #ffffff;
    --color-surface-border: #e5e5e5;
    --color-muted-text: #737373;

    /* Tailwind RGB values for primary color */
    --tw-color-primary: 92 135 98;
    --radius: 0.5rem;
  }

  * {
    font-family: var(--font-family);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-base);
    @apply antialiased;
    overflow-x: hidden;
  }
  
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--background-pattern);
    background-size: var(--background-pattern-size);
    opacity: 1;
    pointer-events: none;
    z-index: -1;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-neutral-100;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-400;
  }

  .dark ::-webkit-scrollbar-track {
    @apply bg-neutral-800;
  }

  .dark ::-webkit-scrollbar-thumb {
    @apply bg-neutral-600;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-500;
  }
}

@layer components {
  /* Button styles */
  .btn {
    @apply inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
    border-radius: var(--border-radius);
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: white;
    @apply hover:opacity-90 focus-visible:ring-2;
  }
  
  .btn-primary:hover {
    background-color: var(--color-primary-dark);
  }

  .btn-secondary {
    background-color: var(--color-surface-border);
    color: var(--color-text);
    @apply hover:opacity-80 focus-visible:ring-neutral-400;
  }

  .btn-outline {
    border-color: var(--color-surface-border);
    background-color: transparent;
    color: var(--color-muted-text);
    @apply border hover:opacity-80 focus-visible:ring-neutral-400;
  }

  .btn-sm {
    @apply h-9 px-3 text-sm;
  }

  .btn-md {
    @apply h-10 px-4 py-2;
  }

  .btn-lg {
    @apply h-11 px-8 text-lg;
  }

  /* Input styles - Admin inputs use explicit Tailwind colors */
  .input {
    @apply flex h-10 w-full rounded-lg border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
    @apply bg-white border-neutral-300 text-neutral-900;
  }

  .input::placeholder {
    @apply text-neutral-500;
  }

  /* Gallery-specific input that uses theme variables */
  .input-themed {
    @apply flex h-10 w-full rounded-lg border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
    background-color: var(--color-surface);
    border-color: var(--color-surface-border);
    color: var(--color-text);
  }

  .input-themed::placeholder {
    color: var(--color-muted-text);
  }

  /* Card styles - Admin cards use explicit Tailwind colors, gallery cards use CSS variables */
  .card {
    @apply rounded-xl border bg-white border-neutral-200;
    box-shadow: var(--shadow-default);
  }

  .card-hover {
    @apply card transition-all duration-200 hover:translate-y-[-2px];
  }

  /* Gallery-specific card that uses theme variables */
  .card-themed {
    @apply rounded-xl border;
    background-color: var(--color-surface);
    border-color: var(--color-surface-border);
    box-shadow: var(--shadow-default);
  }
  
  /* Headings with custom font */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
  }

  /* Container */
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl w-full;
  }

  /* Surface utility classes for gallery dark mode */
  .bg-surface {
    background-color: var(--color-surface);
  }

  .border-surface {
    border-color: var(--color-surface-border);
  }

  .text-theme {
    color: var(--color-text);
  }

  .text-muted-theme {
    color: var(--color-muted-text);
  }

  /* Image loading skeleton */
  .skeleton {
    @apply animate-pulse rounded-lg bg-neutral-200;
  }

  /* Gallery grid - Mobile optimized */
  .gallery-grid {
    @apply grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
  }

  /* Modal overlay */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm animate-fade-in;
  }

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

  .badge-success {
    @apply bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply bg-amber-100 text-amber-800;
  }

  .badge-danger {
    @apply bg-red-100 text-red-800;
  }

  /* Admin dark mode overrides (via Tailwind dark: class on html) */
  .dark .card {
    @apply bg-neutral-800 border-neutral-700;
  }

  .dark .card-themed {
    @apply bg-neutral-800 border-neutral-700;
  }

  .dark .input {
    @apply bg-neutral-800 border-neutral-700 text-neutral-100;
  }

  .dark .input::placeholder {
    @apply text-neutral-500;
  }

  .dark .input-themed {
    @apply bg-neutral-800 border-neutral-700 text-neutral-100;
  }

  .dark .input-themed::placeholder {
    @apply text-neutral-500;
  }

  .dark .skeleton {
    @apply bg-neutral-700;
  }

  .dark .badge-success {
    @apply bg-green-900/40 text-green-300;
  }

  .dark .badge-warning {
    @apply bg-amber-900/40 text-amber-300;
  }

  .dark .badge-danger {
    @apply bg-red-900/40 text-red-300;
  }

  /* Secondary and outline buttons for admin dark mode */
  .dark .btn-secondary {
    @apply bg-neutral-700 border-neutral-600 text-neutral-100;
  }

  .dark .btn-outline {
    @apply border-neutral-600 text-neutral-300;
  }

  .dark .btn-outline:hover {
    @apply bg-neutral-800;
  }

  /* Table styles for admin dark mode */
  .dark table {
    @apply bg-neutral-800;
  }

  .dark thead {
    @apply bg-neutral-900/50;
  }

  .dark th {
    @apply text-neutral-300 border-neutral-700;
  }

  .dark td {
    @apply text-neutral-200 border-neutral-700;
  }

  .dark tbody tr {
    @apply border-neutral-700;
  }

  .dark tbody tr:hover {
    @apply bg-neutral-700/50;
  }

  /* Select/dropdown for admin dark mode */
  .dark select {
    @apply bg-neutral-800 border-neutral-700 text-neutral-100;
  }

  /* Tag/chip styles for admin dark mode */
  .dark .tag,
  .dark [class*="tag-"],
  .dark .chip {
    @apply bg-neutral-700 text-neutral-200 border-neutral-600;
  }

  /* Alert/info boxes for admin dark mode */
  .dark .alert-info {
    @apply bg-blue-900/30 border-blue-800 text-blue-200;
  }

  .dark .alert-warning {
    @apply bg-amber-900/30 border-amber-800 text-amber-200;
  }

  .dark .alert-success {
    @apply bg-green-900/30 border-green-800 text-green-200;
  }

  .dark .alert-danger {
    @apply bg-red-900/30 border-red-800 text-red-200;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Text gradient */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary-800;
  }

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

  /* Custom range slider styles - Updated */
  input[type="range"].slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #d4d4d4 !important;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    position: relative;
  }

  /* Webkit browsers like Chrome/Safari */
  input[type="range"].slider::-webkit-slider-track {
    width: 100%;
    height: 8px;
    background: #d4d4d4 !important;
    border-radius: 4px;
    border: none;
  }

  input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px; /* Center the thumb vertically */
    transition: all 0.2s ease;
  }

  input[type="range"].slider::-webkit-slider-thumb:hover {
    background: var(--color-primary-dark);
    transform: scale(1.1);
  }

  /* Firefox */
  input[type="range"].slider::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #d4d4d4 !important;
    border-radius: 4px;
    border: none;
  }

  input[type="range"].slider::-moz-range-thumb {
    border: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  input[type="range"].slider::-moz-range-thumb:hover {
    background: var(--color-primary-dark);
    transform: scale(1.1);
  }

  /* IE/Edge */
  input[type="range"].slider::-ms-track {
    width: 100%;
    height: 8px;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }

  input[type="range"].slider::-ms-fill-lower {
    background: #d4d4d4;
    border-radius: 4px;
  }

  input[type="range"].slider::-ms-fill-upper {
    background: #d4d4d4;
    border-radius: 4px;
  }

  input[type="range"].slider::-ms-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0;
  }
}