/* src/styles/global.css */
@import "tailwindcss";

/* 1. Reci Tailwindu v4 da skenira Flowbite komponente unutar node_modules */
@source "../../node_modules/flowbite/**/*.js";

/* 2. Učitaj Flowbite plugin koristeći v4 sintaksu */
@plugin "flowbite/plugin";

@theme {
  --color-canvas-base: var(--app-canvas-base);
  --color-canvas-elevated: var(--app-canvas-elevated);
  --color-canvas-deep: var(--app-canvas-deep);
  
  --color-brand-primary: var(--app-brand-primary);
  --color-brand-accent: var(--app-brand-accent);
  --color-brand-accent-bright: var(--app-brand-accent-bright);
  
  --color-text-main: var(--app-text-main);
  --color-text-muted: var(--app-text-muted);
  --color-border-hairline: var(--app-border-hairline);

  /* Registracija globalne animacije */
  --animate-blob-float: blobFloat 10s ease-in-out infinite;
  
  @keyframes blobFloat {
    0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); }
    50% { transform: translateY(-20px) scale(1.02) rotate(1deg); }
  }
}

/* 🌙 DARK MOD: Kada 'html' element dobije klasu .dark, varijable poprimaju Blade Runner estetiku */
@variant dark (&:where(.dark, .dark *));

/* ==============================================================================
   🚀 DRY UTILITY KOMPONENTE (Tailwind v4 Sintaksa)
   ============================================================================== */

/* Stvaramo unificiranu bazu gumba koja radi kroz Astro i Preact */
@utility btn-erp {
  @apply inline-flex items-center justify-center font-sans font-bold uppercase tracking-wider text-xs px-4 py-2.5 rounded-md shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Primarni gumb (Popravljen s ispravnom v4 prozirnošću na hoveru) */
@utility btn-erp-primary {
  /* ✅ POPRAVLJENO: bg-brand-primary/90 postavlja prozirnost izravno na boju tijekom hover stanja */
  @apply btn-erp bg-brand-primary text-white hover:bg-brand-primary/90 active:scale-[0.98];
}

/* Opcionalni Outline gumb */
@utility btn-erp-outline {
  @apply btn-erp border border-border-hairline text-text-muted hover:bg-canvas-deep;
}

/* Modal blur efekt — blurira main content, ali ne i Navbar */
#main-content {
  transition: filter 0.2s ease;
}
body.modal-open #main-content {
  filter: blur(4px);
}