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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.nav-link {
    transition: color 0.3s ease;
}

.nav-link.active {
    color: rgb(3 105 161/var(--tw-text-opacity,1)); /* Highlight kleur */
}

.table {
    display: grid;
    grid-template-columns: repeat(5, 2fr) 1fr;
    column-gap: 2rem;
    align-items: bottom;
    padding: 1rem;
    border-bottom: 1px solid #ccc;
}

.pagy-nav.pagination {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

.page.next a {
    @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev a {
    @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.next.disabled {
    @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-gray-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev.disabled {
    @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-gray-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page a, .page.gap {
    @apply bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.page.active {
    @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}
/*
 * 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.
 *


 */

:root {
    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

/* Dark mode styles that work with both system preference and class toggle */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .map-tiles {
        filter: var(--map-tiles-filter, none);
    }
}

/* For when dark mode is forced via class */
.dark .map-tiles {
    filter: var(--map-tiles-filter, none);
}