/**
 * NotesAi explorer — navy floating workspace; filters on the blue field,
 * one white table card for list mode (GitHub/Linear density).
 *
 * Note: LifenotesNoteExplorer adds `.lne-panel` to #notesaiExplorerHost itself.
 */

#notesaiViewExplorer {
    background: linear-gradient(165deg, #243854 0%, #2e4465 55%, #334155 100%);
    overflow: auto;
    color: #f1f5f9;
}

#notesaiExplorerHost.lne-panel,
#notesaiViewExplorer .lne-panel {
    --lne-bg: transparent;
    --lne-text: #f1f5f9;
    --lne-text-secondary: #94a3b8;
    --lne-border: rgba(255, 255, 255, 0.12);
    --lne-control-bg: rgba(255, 255, 255, 0.08);
    --lne-control-border: rgba(255, 255, 255, 0.16);
    --lne-accent: #667eea;
    --lne-accent-text: #fff;
    --lne-card-bg: #ffffff;
    --lne-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    --lne-card-shadow-hover: 0 6px 20px rgba(15, 23, 42, 0.18);

    box-sizing: border-box;
    width: 90%;
    max-width: 1280px;
    height: auto;
    min-height: 100%;
    margin: 0 auto;
    padding: 20px 0 28px;
    color: var(--lne-text);
    background: transparent;
    overflow: visible;
    color-scheme: dark;
}

/* Filters sit on the navy field — outside the white card */
#notesaiExplorerHost.lne-panel .lne-toolbar,
#notesaiViewExplorer .lne-panel .lne-toolbar {
    border-bottom: none;
    padding: 4px 0 14px;
}

#notesaiExplorerHost.lne-panel .lne-search-row,
#notesaiViewExplorer .lne-panel .lne-search-row {
    gap: 8px;
}

#notesaiExplorerHost.lne-panel .lne-filter-label,
#notesaiViewExplorer .lne-panel .lne-filter-label {
    color: #94a3b8;
}

#notesaiExplorerHost.lne-panel .lne-search,
#notesaiViewExplorer .lne-panel .lne-search {
    height: 34px;
}

#notesaiExplorerHost.lne-panel .lne-btn,
#notesaiViewExplorer .lne-panel .lne-btn {
    height: 34px;
}

#notesaiExplorerHost.lne-panel .lne-date,
#notesaiExplorerHost.lne-panel .lne-sort,
#notesaiExplorerHost.lne-panel .lne-search input,
#notesaiExplorerHost.lne-panel .lne-tag-chip,
#notesaiExplorerHost.lne-panel .lne-btn-ghost,
#notesaiExplorerHost.lne-panel .lne-layout-btn,
#notesaiViewExplorer .lne-panel .lne-date,
#notesaiViewExplorer .lne-panel .lne-sort,
#notesaiViewExplorer .lne-panel .lne-search input,
#notesaiViewExplorer .lne-panel .lne-tag-chip,
#notesaiViewExplorer .lne-panel .lne-btn-ghost,
#notesaiViewExplorer .lne-panel .lne-layout-btn {
    color: var(--lne-text);
}

#notesaiExplorerHost.lne-panel .lne-tag-chip,
#notesaiViewExplorer .lne-panel .lne-tag-chip {
    color: var(--lne-text-secondary);
}

#notesaiExplorerHost.lne-panel .lne-tag-chip.active,
#notesaiViewExplorer .lne-panel .lne-tag-chip.active {
    color: var(--lne-accent-text);
}

#notesaiExplorerHost.lne-panel .lne-layout-btn.is-active,
#notesaiViewExplorer .lne-panel .lne-layout-btn.is-active {
    background: rgba(255, 255, 255, 0.16);
    color: #f8fafc;
    box-shadow: none;
}

#notesaiExplorerHost.lne-panel .lne-search input::placeholder,
#notesaiViewExplorer .lne-panel .lne-search input::placeholder {
    color: #94a3b8;
}

/* Results grow with page scroll */
#notesaiExplorerHost.lne-panel .lne-results,
#notesaiViewExplorer .lne-panel .lne-results {
    flex: none;
    min-height: 0;
    overflow: visible;
    padding: 0;
}

/* One floating white card for the data grid */
#notesaiExplorerHost.lne-panel .lne-table-card,
#notesaiViewExplorer .lne-panel .lne-table-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 36px rgba(8, 15, 30, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0 0;
    color: #1e293b;
    color-scheme: light;
}

#notesaiExplorerHost.lne-panel .lne-table-card .lne-empty,
#notesaiViewExplorer .lne-panel .lne-table-card .lne-empty {
    color: #64748b;
    padding: 48px 24px;
}

#notesaiExplorerHost.lne-panel .lne-table thead th,
#notesaiViewExplorer .lne-panel .lne-table thead th {
    background: #ffffff;
    top: 0;
}

/* Card gallery mode still uses white note cards on navy */
#notesaiExplorerHost.lne-panel .lne-results--card,
#notesaiViewExplorer .lne-panel .lne-results--card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding-top: 4px;
}

@media (max-width: 768px) {
    #notesaiExplorerHost.lne-panel,
    #notesaiViewExplorer .lne-panel {
        width: calc(100% - 24px);
        padding: 12px 0 20px;
    }
}