/* ============================================
   DORADESK - STYLES
   Custom styles for the dashboard
   ============================================ */

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color, #6366f1);
}

/* GridStack Overrides */
.grid-stack {
    background: transparent;
}

.grid-stack-item-content {
    border-radius: 1rem;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Glassmorphism base */
.glass-panel {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dynamic Accent Color */
:root {
    --accent-color: #6366f1;
}

.text-accent {
    color: var(--accent-color);
}

.bg-accent {
    background-color: var(--accent-color);
}

.border-accent {
    border-color: var(--accent-color);
}

.hover\:bg-accent:hover {
    background-color: var(--accent-color);
}

.focus\:border-accent:focus {
    border-color: var(--accent-color);
}

.focus\:ring-accent:focus {
    --tw-ring-color: var(--accent-color);
}

/* Handles & Animations */
.ui-resizable-handle {
    opacity: 0;
    transition: opacity 0.2s;
}

.grid-stack-item:hover .ui-resizable-handle {
    opacity: 1;
}

.toast-enter {
    transform: translateY(100%);
    opacity: 0;
}

.toast-enter-active {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bookmarks responsive grid using container queries */
.grid-stack-item[gs-id="bookmarks"] .grid-stack-item-content {
    container-type: inline-size;
}

.bookmarks-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@container (min-width: 400px) {
    .bookmarks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 600px) {
    .bookmarks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (min-width: 800px) {
    .bookmarks-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (min-width: 1000px) {
    .bookmarks-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Bookmarks container with CSS Grid */
.bookmarks-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    height: 100%;
    align-content: start;
}

.bookmark-category {
    grid-column: span var(--cat-w, 1);
    grid-row: span var(--cat-h, 1);
    min-height: 0;
}

.category-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.category-card .category-apps {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Loading spinner */
.mdi-spin {
    animation: mdi-spin 1s infinite linear;
}

@keyframes mdi-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-hero {
    background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-hero:hover {
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}