/* task_template_selection.css */

/* Using a more modern font stack */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }



/* Panel styling with dark mode support */
.panel {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* To ensure child corners are rounded */
}

.panel-title {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    padding: 1rem; /* p-4 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}


.panel-content {
    padding: 0.5rem; /* p-2 */
    overflow-y: auto;
    flex-grow: 1;
}

/* Tree item base and dark mode hover/active states */
.tree-item {
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}
.tree-item:hover {
    background-color: #f3f4f6; /* gray-100 */
}
.tree-item.active {
    background-color: #3b82f6 !important; /* blue-500 */
    color: white !important;
}


/* Modal base and dark mode support */
.modal {
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(9, 30, 66, 0.54); 
    display: none; /* Hidden by default */
    justify-content: center; 
    align-items: center; 
    z-index: 1000;
}

/* Adjust main content height */
.content-area {
    height: calc(100vh - 220px); /* Approximate height, adjust as needed */
}

.filter-select {
    min-width: 200px;
}

/* Styling for drag-and-drop placeholders or feedback */
.drag-over {
    border: 2px dashed #3b82f6; /* blue-500 */
}

.placeholder {
    background-color: #e0f2fe; /* light blue, tailwind: bg-sky-100 */
    border: 1px dashed #7dd3fc; /* tailwind: border-sky-300 */
    height: 30px;
    margin: 4px 0;
}

/* Custom checkbox style for tree */
.tree-checkbox {
    margin-right: 8px;
}

/* Force tree node text to be black in light mode to override other styles */
.tree-item > span {
    color: #000;
}