@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-300-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-300-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-500-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-600-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-700-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-800-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-800-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-900-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/rubik/rubik-latin-900-italic.woff2") format("woff2");
}

@theme {
    --font-sans: "Rubik", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@import "tailwindcss";

/* Custom Dashboard Enhancements */
.dashboard-card {
    @apply transition-all duration-200 ease-in-out;
}

.dashboard-card:hover {
    @apply transform -translate-y-0.5 shadow-lg;
}

.table-row-hover {
    @apply transition-colors duration-150 ease-in-out;
}

.table-row-hover:hover {
    @apply bg-blue-50;
}

.search-focus {
    @apply transition-all duration-200 ease-in-out;
}

.search-focus:focus {
    @apply ring-2 ring-blue-500/50 border-blue-500 shadow-md;
}

.btn-primary {
    @apply transition-all duration-200 ease-in-out transform;
}

.btn-primary:hover {
    @apply transform -translate-y-0.5 shadow-lg;
}

.btn-primary:active {
    @apply transform translate-y-0;
}

.pagination-link {
    @apply transition-all duration-150 ease-in-out;
}

.pagination-link:hover {
    @apply bg-blue-50 border-blue-300 text-blue-700;
}

.gradient-header {
    background: linear-gradient(135deg, rgb(239 246 255) 0%, rgb(238 242 255) 100%);
}

.stats-card-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
}

.stats-card-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Loading animation for search */
.search-loading {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

/* Focus visible for accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-blue-500/50;
}