/*======================================================================
    Homarr Custom CSS - lemonlink.eu Style
    Dark Theme with Glassmorphism Effects
======================================================================*/

/*======================================================================
    1. GLOBAL STYLES & ANIMATED BACKGROUND
======================================================================*/

/* Animated gradient background */
[data-dash-component="dashboard"] {
    background: linear-gradient(-45deg, #0a0a0f, #1a1a2e, #0f172a, #1e1b4b, #0d1117);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #818cf8, #a78bfa);
}

/*======================================================================
    2. CARD/ITEM STYLES - Glassmorphism
======================================================================*/

/* Main card container */
[data-dash-component="item-wrapper"] {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

/* Card hover effect - lift and glow */
[data-dash-component="item-wrapper"]:hover {
    transform: translateY(-6px) scale(1.01) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Card active/click effect */
[data-dash-component="item-wrapper"]:active {
    transform: translateY(-2px) scale(0.99) !important;
    transition: all 0.1s ease !important;
}

/*======================================================================
    3. APP ICONS & IMAGES
======================================================================*/

/* App icon container */
[data-dash-component="app-icon"] {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

[data-dash-component="item-wrapper"]:hover [data-dash-component="app-icon"] {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 20px rgba(99, 102, 241, 0.4));
}

/* Ping indicator (online status dot) */
[data-dash-component="ping-dot"] {
    box-shadow: 0 0 10px currentColor !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

/*======================================================================
    4. TEXT & TYPOGRAPHY
======================================================================*/

/* Main text color */
[data-dash-component="dashboard"],
[data-dash-component="item-wrapper"] {
    color: #e2e8f0 !important;
}

/* Headings with gradient text */
h1, h2, h3, [data-dash-component="board-title"] {
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* App names */
[data-dash-component="app-name"] {
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Muted/secondary text */
[data-dash-component="item-description"],
.mantine-Text-root[data-size="sm"] {
    color: #94a3b8 !important;
}

/*======================================================================
    5. CLOCK WIDGET
======================================================================*/

/* Clock container */
[data-dash-component="widget-clock"] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Clock time */
[data-dash-component="widget-clock"] .mantine-Text-root {
    background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
    text-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
}

/*======================================================================
    6. WEATHER WIDGET
======================================================================*/

/* Weather widget */
[data-dash-component="widget-weather"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1)) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Temperature */
[data-dash-component="widget-weather"] .mantine-Text-root {
    color: #60a5fa !important;
    font-weight: 700 !important;
}

/*======================================================================
    7. RSS FEED WIDGET
======================================================================*/

/* RSS widget container */
[data-dash-component="widget-rss"] {
    background: rgba(15, 23, 42, 0.6) !important;
}

/* RSS feed item */
[data-dash-component="widget-rss"] .mantine-Paper-root {
    background: rgba(255, 255, 255, 0.02) !important;
    border-left: 3px solid #6366f1 !important;
    transition: all 0.2s ease;
}

[data-dash-component="widget-rss"] .mantine-Paper-root:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left-color: #8b5cf6 !important;
    transform: translateX(4px);
}

/* RSS feed title */
[data-dash-component="widget-rss"] .mantine-Text-root {
    color: #e2e8f0 !important;
}

[data-dash-component="widget-rss"] .mantine-Text-root:hover {
    color: #818cf8 !important;
}

/*======================================================================
    8. IFRAME WIDGET (for Dash.)
======================================================================*/

/* iFrame container */
[data-dash-component="widget-iframe"] {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

[data-dash-component="widget-iframe"] iframe {
    border-radius: 20px !important;
}

/*======================================================================
    9. SEARCH BAR
======================================================================*/

/* Search container */
[data-dash-component="search-bar"] {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-dash-component="search-bar"]:focus-within {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(99, 102, 241, 0.2) !important;
}

/* Search input */
[data-dash-component="search-bar"] input {
    color: #e2e8f0 !important;
}

[data-dash-component="search-bar"] input::placeholder {
    color: #64748b !important;
}

/* Search results */
[data-dash-component="search-results"] {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/*======================================================================
    10. HEADER & NAVIGATION
======================================================================*/

/* Top navigation bar */
[data-dash-component="header"] {
    background: rgba(10, 10, 15, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Board selector dropdown */
.mantine-Menu-dropdown {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/* Edit mode toolbar */
[data-dash-component="edit-mode-bar"] {
    background: rgba(99, 102, 241, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/*======================================================================
    11. BUTTONS & CONTROLS
======================================================================*/

/* Primary buttons */
.mantine-Button-root[data-variant="filled"] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
    transition: all 0.3s ease !important;
}

.mantine-Button-root[data-variant="filled"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
}

.mantine-Button-root[data-variant="filled"]:active {
    transform: translateY(0) !important;
}

/* Secondary/outline buttons */
.mantine-Button-root[data-variant="outline"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

.mantine-Button-root[data-variant="outline"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

/* Icon buttons */
.mantine-ActionIcon-root {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.2s ease !important;
}

.mantine-ActionIcon-root:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    transform: scale(1.1) !important;
}

/*======================================================================
    12. MODALS & OVERLAYS
======================================================================*/

/* Modal overlay */
.mantine-Overlay-root {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px) !important;
}

/* Modal content */
.mantine-Modal-content {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Modal header */
.mantine-Modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/*======================================================================
    13. FORM INPUTS
======================================================================*/

/* Text inputs */
.mantine-Input-wrapper input,
.mantine-TextInput-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.mantine-Input-wrapper input:focus,
.mantine-TextInput-input:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Select dropdowns */
.mantine-Select-dropdown {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/*======================================================================
    14. SPECIAL EFFECTS
======================================================================*/

/* Loading spinner */
.mantine-LoadingOverlay-overlay {
    background: rgba(10, 10, 15, 0.8) !important;
    backdrop-filter: blur(8px) !important;
}

/* Drag ghost (when dragging items) */
[data-dash-dragging="true"] {
    opacity: 0.8 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3) !important;
}

/* Grid lines in edit mode (subtle) */
[data-dash-component="grid"] {
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}

/*======================================================================
    15. RESPONSIVE ADJUSTMENTS
======================================================================*/

/* Mobile adjustments */
@media (max-width: 768px) {
    [data-dash-component="item-wrapper"] {
        border-radius: 16px !important;
    }
    
    [data-dash-component="item-wrapper"]:hover {
        transform: translateY(-3px) !important;
    }
}

/*======================================================================
    HOW TO USE THIS CSS
    
    1. Go to your Homarr board
    2. Click Settings (gear icon)
    3. Go to "Appearance" tab
    4. Find "Custom CSS" text box
    5. Paste this entire CSS
    6. Click Save
    7. Enjoy your new look!
    
    Note: This CSS works for all boards globally
======================================================================*/