/* Override Filament's default font loading to prevent external font requests */
/* This prevents CORS issues with fonts.bunny.net */

/* System font stack optimized for Greek and Latin characters */
:root {
    --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Apply the system font stack to the body and override any external font loading */
html,
body {
    font-family: var(--font-family-sans) !important;
    font-feature-settings: "liga" 1, "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ensure all Filament components use the system font stack */
.fi-body,
.fi-page,
.fi-main,
.fi-sidebar,
.fi-navbar,
.fi-topbar,
.fi-main-content,
.fi-sidebar-nav,
.fi-brand {
    font-family: var(--font-family-sans) !important;
}

/* Form elements */
input, 
textarea, 
select, 
button,
.fi-input,
.fi-select,
.fi-textarea,
.fi-btn,
.fi-fo-field-wrp,
.fi-form {
    font-family: var(--font-family-sans) !important;
}

/* Navigation, labels, and content */
.fi-sidebar-nav-item-label,
.fi-navigation-item-label,
.fi-table-cell,
.fi-form-field-label,
.fi-section-header-heading,
.fi-page-heading,
.fi-badge,
.fi-dropdown,
.fi-tabs,
.fi-modal {
    font-family: var(--font-family-sans) !important;
}

/* Tables and data display */
.fi-ta-table,
.fi-ta-row,
.fi-ta-cell,
.fi-ta-header-cell,
.fi-table,
.fi-table-row,
.fi-table-cell {
    font-family: var(--font-family-sans) !important;
}

/* Monospace elements */
code,
pre,
.fi-code,
.fi-pre {
    font-family: var(--font-family-mono) !important;
}

/* Handle Greek text specifically */
:lang(el),
[lang="el"],
.fi-body[lang="el"],
html[lang="el"] {
    font-family: var(--font-family-sans) !important;
}

/* Override any external font loading attempts */
* {
    font-family: inherit !important;
}

/* Block external font requests by overriding @font-face declarations */
@font-face {
    font-family: 'Inter';
    src: local('system-ui');
    unicode-range: U+0000-FFFF;
}

/* Prevent any link tags from loading external fonts */
link[href*="fonts.bunny.net"],
link[href*="fonts.googleapis.com"] {
    display: none !important;
}

/* Ensure consistent font weights */
.fi-sidebar-nav-item-label {
    font-weight: 500 !important;
}

.fi-page-heading {
    font-weight: 600 !important;
}

.fi-section-header-heading {
    font-weight: 600 !important;
}

/* Additional overrides for common Filament classes */
.fi-simple-layout,
.fi-auth,
.fi-login,
.fi-resource,
.fi-pages {
    font-family: var(--font-family-sans) !important;
}

/* Logo styling - add gray border */
.fi-logo,
.fi-brand img,
.fi-sidebar-header img,
.fi-topbar img[src*="logo"] {
    border: 1px solid #6b7280 !important;
    border-radius: 4px;
}

/* Food image selection dropdown styling */
.fi-select-option,
.fi-fo-select-option {
    padding: 8px !important;
    min-height: 60px !important;
}

.fi-select-option img,
.fi-fo-select-option img {
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}

/* Ensure image previews in dropdowns render properly */
.fi-fo-select .fi-select__option,
.fi-fo-select .choices__item,
.fi-fo-select .choices__list--dropdown .choices__item {
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 8px !important;
}

.fi-fo-select .choices__list--dropdown {
    max-height: 300px;
    overflow-y: auto;
}

/* Style for food image previews in table */
.fi-ta-image {
    border: 1px solid #e5e7eb;
}

/* Custom food image selector styling */
.food-image-selector .image-option {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.food-image-selector .image-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.food-image-selector .image-option.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.food-image-selector img {
    border-radius: 4px;
}

/* Responsive grid adjustments - 6 per row on desktop, 3 on mobile */
.food-image-selector .grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, 1fr); /* 3 on mobile */
}

@media (min-width: 768px) {
    .food-image-selector .grid {
        grid-template-columns: repeat(4, 1fr); /* 4 on tablet */
    }
}

@media (min-width: 1024px) {
    .food-image-selector .grid {
        grid-template-columns: repeat(6, 1fr); /* 6 on desktop */
    }
}

/* Image preview modal styling */
[x-cloak] {
    display: none !important;
}