/* Work Item Manager Feature CSS Index (scoped, per-component) */
@import url("./css/components/cards.css");
@import url("./css/components/card-interactions.css");
@import url("./css/utilities/responsive.css");
@import url("./theme.css");

@import url("./components/Common/buttons.css");
@import url("./components/Toolbar/main-toolbar.css");
@import url("./components/ViewSwitcher/view-switcher.css");
@import url("./components/KanbanBoard/kanban-board.css");
@import url("./components/ListView/list-view.css");
@import url("./components/Modals/workitem-modal.css");
@import url("./components/UserProfile/user-profile.css");
@import url("./components/Filters/filters-toolbar.css");
@import url("./components/ProjectSelector/project-selector.css");
@import url("./components/Sidebar/sidebar.css");
@import url("./components/Sprint/sprint-header.css");
@import url("./components/Trash/TrashManager.css");
@import url("./components/Projects/project-manager.css");

/* View toggles — CSS guards to prevent accidental hiding by inline styles or injected CSS */
/* Default: show Kanban, hide List/Calendar */
body.feature-workitemmanager .pref_workitemmanager #kanbanBoard {
    display: block;
    visibility: visible;
}
body.feature-workitemmanager .pref_workitemmanager #listView {
    display: none;
}
body.feature-workitemmanager .pref_workitemmanager #calendarView {
    display: none;
}

/* When Kanban is active (via button state), ensure Kanban shows and others hide */
body.feature-workitemmanager
    .pref_workitemmanager:has(
        .view-switcher .view-btn[data-view="kanban"].active
    )
    #kanbanBoard {
    display: block !important;
    visibility: visible !important;
}
body.feature-workitemmanager
    .pref_workitemmanager:has(
        .view-switcher .view-btn[data-view="kanban"].active
    )
    #listView,
body.feature-workitemmanager
    .pref_workitemmanager:has(
        .view-switcher .view-btn[data-view="kanban"].active
    )
    #calendarView {
    display: none !important;
}

/* When List is active */
body.feature-workitemmanager
    .pref_workitemmanager:has(.view-switcher .view-btn[data-view="list"].active)
    #listView {
    display: block !important;
}
body.feature-workitemmanager
    .pref_workitemmanager:has(.view-switcher .view-btn[data-view="list"].active)
    #kanbanBoard,
body.feature-workitemmanager
    .pref_workitemmanager:has(.view-switcher .view-btn[data-view="list"].active)
    #calendarView {
    display: none !important;
}

/* When Calendar is active */
body.feature-workitemmanager
    .pref_workitemmanager:has(
        .view-switcher .view-btn[data-view="calendar"].active
    )
    #calendarView {
    display: block !important;
}
body.feature-workitemmanager
    .pref_workitemmanager:has(
        .view-switcher .view-btn[data-view="calendar"].active
    )
    #kanbanBoard,
body.feature-workitemmanager
    .pref_workitemmanager:has(
        .view-switcher .view-btn[data-view="calendar"].active
    )
    #listView {
    display: none !important;
}

/* Calendar host layout: full-width and full-height */
.feature-workitemmanager .main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#calendarView {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* allow children to shrink within 100vh */
}
#calendarView .calendar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* critical for nested scroll areas */
    width: 100%;
    height: 100%;
    background: var(--panel);
    padding: 0;
}

/* Ensure calendar main has the same background as sidebar */
#calendarView .calendar-main {
    background: var(--panel) !important;
}

/* Calendar unified styles (scoped to feature) */
body.feature-workitemmanager
    .pref_workitemmanager
    #calendarView
    .workItem-calendar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    width: 100%;
    overflow: hidden;
}
body.feature-workitemmanager
    .pref_workitemmanager
    #calendarView
    .workItem-calendar-row:hover {
    opacity: 0.85;
}
body.feature-workitemmanager
    .pref_workitemmanager
    #calendarView
    .workItem-calendar-row
    .workItem-key-chip {
    flex-shrink: 0;
    display: inline-block;
    background: #0a0c10;
    color: white;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.2;
    border: 1px solid #0a0c10;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    margin: 0;
}
body.feature-workitemmanager
    .pref_workitemmanager
    #calendarView
    .workItem-calendar-row
    .workItem-key-chip:hover {
    background: #374151;
    border-color: #374151;
}
body.feature-workitemmanager
    .pref_workitemmanager
    #calendarView
    .workItem-calendar-row
    .workItem-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
    color: #374151;
}
body.feature-workitemmanager
    .pref_workitemmanager
    #calendarView
    .workItem-key-chip {
    display: inline-block;
    background: #0a0c10;
    color: white;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.2;
    border: 1px solid #0a0c10;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
}
body.feature-workitemmanager
    .pref_workitemmanager
    #calendarView
    .workItem-key-chip:hover {
    background: #374151;
    border-color: #374151;
}
/* Ensure any badges in calendars match the same chip styling */
body.feature-workitemmanager .pref_workitemmanager #calendarView .badge,
body.feature-workitemmanager .pref_workitemmanager #calendarView .badge-task {
    display: inline-block;
    background: var(--wi-workitem-label-bg);
    color: var(--wi-workitem-label-text);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.2;
    border: 1px solid var(--wi-workitem-label-border);
}