/* 
 * Project Note Subtasks Component
 * 
 * Styles for the subtask display area that appears in project notes
 * via CodeMirror decorations in live preview mode. Uses BEM methodology.
 */

.project-note-subtasks.project-subtasks-widget {
    display: block !important;
    width: 100% !important;
    margin: 1.5em 0 2em 0;
    padding: 1em;
    border: 1px dashed var(--background-modifier-border-hover);
    border-radius: var(--radius-s);
    clear: both;
    z-index: 10; /* Higher z-index to allow dropdowns to appear above other content */

    /* Allow filter dropdowns to extend beyond widget boundaries */
    overflow: visible !important;
}

.tasknotes-plugin .project-note-subtasks__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.8em 0;
}

.tasknotes-plugin .project-note-subtasks__title {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    color: var(--text-normal);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: color 0.2s ease;
    
    /* Prevent text cursor and editing */
    caret-color: transparent;
    outline: none;
    -webkit-user-modify: read-only;
    -moz-user-modify: read-only;

    /* Better number formatting for completion stats */
    font-variant-numeric: tabular-nums;
}

/* Use consistent button system */
.tasknotes-plugin .project-note-subtasks__new-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    box-shadow: none;
    font-size: 0.8em;
    font-weight: 400;
}

.tasknotes-plugin .project-note-subtasks__new-btn:hover {
    background: var(--tn-interactive-hover);
    color: var(--text-normal);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .project-note-subtasks__title:hover {
    color: var(--text-accent);
}

.tasknotes-plugin .project-note-subtasks__title::before {
    content: "▼";
    margin-right: 0.5em;
    font-size: 0.8em;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

.tasknotes-plugin .project-note-subtasks__title.collapsed::before {
    transform: rotate(-90deg);
}

/* Content container that holds both filter bar and task list */
.tasknotes-plugin .project-note-subtasks__content {
    overflow: visible; /* Allow filter dropdowns to extend outside */
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    max-height: none;
    position: relative;
    z-index: 20; /* Higher than widget container */
}

.tasknotes-plugin .project-note-subtasks__content.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide content when collapsed */
}

/* Filter bar container */
.tasknotes-plugin .project-note-subtasks__filter {
    margin-bottom: 1em;
    position: relative;
    z-index: 30; /* Highest z-index for filter components */
    
    /* Allow filter dropdowns to extend beyond boundaries */
    overflow: visible;
    
    /* Prevent cursor and selection issues */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    caret-color: transparent;
}

.tasknotes-plugin .project-note-subtasks__list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    
    /* Prevent cursor and selection issues */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    caret-color: transparent;
}

/* Group headers for when tasks are grouped */
.tasknotes-plugin .project-note-subtasks__group-header {
    margin: 1em 0 0.5em 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tn-spacing-xs, 0.5em);
}

.tasknotes-plugin .project-note-subtasks__group-header:first-child {
    margin-top: 0;
}

.tasknotes-plugin .project-note-subtasks__group-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0.3em 0;
    border-bottom: 1px solid var(--background-modifier-border);
    display: flex;
    align-items: center;
}

/* Count element within group titles and main title */
.tasknotes-plugin .project-note-subtasks__group-title .agenda-view__item-count,
.tasknotes-plugin .project-note-subtasks__title .agenda-view__item-count {
    margin-left: auto;
    margin-right: 0;
}

.tasknotes-plugin .project-note-subtasks__group {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    margin-bottom: 0.5em;
}

/* Collapsible group functionality */
.tasknotes-plugin .project-note-subtasks__group-section {
    margin-bottom: 1em;
}

.tasknotes-plugin .project-note-subtasks__group-section.is-collapsed .task-cards {
    display: none;
}

/* Toggle button styles (match TaskListView) */
.tasknotes-plugin .task-group-toggle {
    background: none;
    border: none;
    padding: 0.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
}

.tasknotes-plugin .task-group-toggle:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .task-group-toggle svg,
.tasknotes-plugin .task-group-toggle .chevron,
.tasknotes-plugin .task-group-toggle .chevron path {
    color: var(--text-normal);
    transition: transform 0.2s ease;
}

.tasknotes-plugin .task-group-toggle svg,
.tasknotes-plugin .task-group-toggle .chevron path {
    stroke: currentColor;
}

/* Chevron rotation for expanded state */
.tasknotes-plugin .task-group:not(.is-collapsed) .task-group-toggle svg,
.tasknotes-plugin .task-group:not(.is-collapsed) .task-group-toggle .chevron {
    transform: rotate(90deg);
}

.tasknotes-plugin .task-group.is-collapsed .task-group-toggle svg,
.tasknotes-plugin .task-group.is-collapsed .task-group-toggle .chevron {
    transform: rotate(0deg);
}

.tasknotes-plugin .project-note-subtasks__task {
    /* Task card wrapper */
    margin-bottom: 0.3em;
    
    /* Prevent cursor and selection issues */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    caret-color: transparent;
}

.tasknotes-plugin .project-note-subtasks__task .task-card {
    /* Enhance task card for subtask display */
    background-color: var(--background-primary);
    border-left: 3px solid var(--accent-color);
    padding: 0.6em 0.8em;
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
}

.tasknotes-plugin .project-note-subtasks__task .task-card:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tasknotes-plugin .project-note-subtasks__task .task-card--completed {
    opacity: 0.7;
    border-left-color: var(--text-muted);
}

.tasknotes-plugin .project-note-subtasks__task .task-card--completed:hover {
    opacity: 0.9;
}

/* Responsive design */
@media (max-width: 768px) {
    .tasknotes-plugin .project-note-subtasks {
        margin: 1em 0;
        padding: 0.8em;
    }
    
    .tasknotes-plugin .project-note-subtasks__title {
        font-size: 1em;
        margin-bottom: 0.6em;
    }
    
    .tasknotes-plugin .project-note-subtasks__list {
        gap: 0.3em;
    }
    
    .tasknotes-plugin .project-note-subtasks__task .task-card {
        padding: 0.5em 0.6em;
    }
}

/* Ensure FilterBar components have proper z-index within subtask widget */
.tasknotes-plugin .project-note-subtasks__filter .filter-bar__main-box {
    z-index: 1000 !important; /* Override FilterBar's default z-index */
}

.tasknotes-plugin .project-note-subtasks__filter .filter-bar__view-selector-dropdown {
    z-index: 1000 !important; /* Override FilterBar's default z-index */
}

/* Ensure the filter bar is properly contained but allows dropdowns to extend */
.tasknotes-plugin .project-note-subtasks__filter .advanced-filter-bar {
    position: relative;
    z-index: inherit;
}

/* Ensure all filter bar dropdowns can appear above other content */
.tasknotes-plugin .project-note-subtasks__filter .filter-bar__top-controls {
    position: relative;
    z-index: 50;
}

/* Dark mode adjustments */
.theme-dark .tasknotes-plugin .project-note-subtasks {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-border);
}

.theme-dark .tasknotes-plugin .project-note-subtasks__task .task-card {
    background-color: var(--background-primary);
    border-left-color: var(--accent-color);
}

.theme-dark .tasknotes-plugin .project-note-subtasks__task .task-card--completed {
    border-left-color: var(--text-muted);
}
