/* Custom styles for DashDork */

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* Widget drag and drop animations */
.sortable-ghost {
    opacity: 0.5 !important;
    background: #f3f4f6 !important;
    box-shadow: 0 0 0 2px #4338ca !important;
}

.sortable-drag {
    opacity: 0.8;
    transform: rotate(1deg);
}

/* Spinner animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Custom scrollbar for widgets */
.widget-content::-webkit-scrollbar {
    width: 6px;
}

.widget-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.widget-content::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 6px;
}

.widget-content::-webkit-scrollbar-thumb:hover {
    background: #4338ca;
}

/* Improved tab styles */
.dashboard-tabs .dashboard-tab {
    transition: all 0.2s ease;
}

.dashboard-tabs .dashboard-tab:hover:not(.active) {
    background-color: #f3f4f6;
}

/* Widget hover effect */
.widget {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.widget:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Widget actions visibility */
.widget-control-buttons {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.widget-header:hover .widget-control-buttons {
    opacity: 1;
}

/* Mobile widget actions default state */
.widget-actions {
    display: none !important;
}

/* Ensure icon doesn't block click on button */
.widget-actions svg { pointer-events: none; }

/* Ensure kebab dropdown is hidden by default; shown when not 'hidden' */
.widget-actions-menu {
    display: none;
}
.widget-actions-menu:not(.hidden) {
    display: block;
}

/* Responsive adjustments (match Tailwind md: <768px) */
@media (max-width: 767px) {
    .dashboard-tabs {
        flex-wrap: wrap;
    }
    
    .dashboard-tab {
        padding: 0.35rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Mobile widget actions (kebab menu) */
    .widget-header { position: relative; display: flex; align-items: center; min-height: 2.75rem; }
    .widget-control-buttons { display: none !important; }
    .widget-actions { 
        display: inline-flex !important; align-items: center; justify-content: center;
        position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%);
        width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
        color: #6b7280; background: transparent;
    }
    .widget-actions:focus { outline: 2px solid #c7d2fe; outline-offset: 2px; }
    .widget-actions-menu {
        /* Position will be set dynamically by JavaScript */
        background: var(--color-bg-surface, #fff); border: 1px solid #e5e7eb; border-radius: 0.5rem;
        min-width: 180px; max-width: calc(100vw - 2rem); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    .widget-actions-menu .item {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.75rem 1rem; min-height: 44px; font-size: 0.9375rem; /* 15px */
        color: #111827;
    }
    .widget-actions-menu .item:hover { background-color: #f9fafb; }
    .widget-actions-menu .item.delete { color: #ef4444; }
    
    /* Ensure title doesn't overlap kebab */
    .widget-header-title { padding-right: 3rem; }
    
    .tab-actions {
        position: static;
        padding: 0.5rem;
        background: none;
        width: 100%;
        justify-content: center;
        border-top: 1px solid #e5e7eb;
    }
}