/* ============================================
   STYLES THAT TAILWIND CAN'T HANDLE
   (Scrollbar, nav active state, view toggle,
    FullCalendar overrides, D3 tree, animations)
   ============================================ */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2d3041; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #5c6078; }

/* Nav active state */
.nav-btn.active { background: #6366f1 !important; color: white !important; }

/* View toggle (only .active views are shown) */
.view { display: none; }
.view.active { display: block; }

/* Category tree sidebar items */
.category-tree { list-style: none; }
.cat-item {
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #8b8fa3;
    transition: all 0.2s ease;
}
.cat-item:hover { background: #2d3041; color: #e4e6ed; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: none;
    background: none;
    color: #5c6078;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: color 0.2s ease;
}
.cat-toggle:hover { color: #e4e6ed; }
.cat-toggle svg { transition: transform 0.2s ease; }
.cat-toggle.collapsed svg { transform: rotate(-90deg); }
.cat-children.collapsed { display: none; }
.cat-count {
    margin-left: auto;
    background: #242736;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #5c6078;
}
.cat-edit {
    display: none;
    margin-left: 4px;
    padding: 2px;
    border: none;
    background: none;
    color: #5c6078;
    cursor: pointer;
}
.cat-item:hover .cat-edit { display: inline-flex; }
.cat-edit svg { width: 14px; height: 14px; }
.cat-children { list-style: none; padding-left: 18px; }

/* Task cards */
.task-card {
    background: #242736;
    border: 1px solid #2d3041;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.task-card:hover { background: #2d3041; }
.task-card[data-priority="critical"] { border-left-color: #ef4444; }
.task-card[data-priority="high"] { border-left-color: #f97316; }
.task-card[data-priority="medium"] { border-left-color: #6366f1; }
.task-card[data-priority="low"] { border-left-color: #64748b; }

.task-checkbox {
    width: 20px; height: 20px;
    border: 2px solid #2d3041;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.task-checkbox:hover { border-color: #6366f1; }
.task-checkbox.checked { background: #10b981; border-color: #10b981; }
.task-checkbox.checked::after { content: '✓'; color: white; font-size: 12px; font-weight: 700; }

.task-info { flex: 1; min-width: 0; }
.task-name { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-card.completed .task-name { text-decoration: line-through; color: #5c6078; }
.task-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 0.75rem; color: #5c6078; }
.task-meta-item { display: flex; align-items: center; gap: 4px; }
.task-meta-item svg { width: 12px; height: 12px; }

/* Badges */
.badge { padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.badge-critical { background: rgba(239,68,68,0.15); color: #ef4444; }
.badge-high { background: rgba(249,115,22,0.15); color: #f97316; }
.badge-medium { background: rgba(99,102,241,0.15); color: #6366f1; }
.badge-low { background: rgba(100,116,139,0.15); color: #64748b; }
.badge-overdue { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Empty states */
.empty-state { text-align: center; padding: 40px 20px; color: #5c6078; }

/* Progress bars */
.progress-item { display: flex; align-items: center; gap: 12px; }
.progress-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.progress-info { flex: 1; min-width: 0; }
.progress-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 6px; }
.progress-bar-bg { height: 6px; background: #2d3041; border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }

/* Calendar height */
.calendar-height { height: calc(100vh - 60px - 72px); }

/* FullCalendar dark theme overrides */
.fc {
    --fc-border-color: #2d3041;
    --fc-page-bg-color: #1a1d27;
    --fc-neutral-bg-color: #242736;
    --fc-list-event-hover-bg-color: #2d3041;
    --fc-today-bg-color: rgba(99,102,241,0.08);
    --fc-event-text-color: white;
}
.fc .fc-toolbar-title { font-size: 1.1rem; color: #e4e6ed; }
.fc .fc-button {
    background: #242736 !important; border-color: #2d3041 !important;
    color: #e4e6ed !important; font-size: 0.8rem !important; text-transform: capitalize !important;
}
.fc .fc-button:hover { background: #2d3041 !important; }
.fc .fc-button-active { background: #6366f1 !important; border-color: #6366f1 !important; }
.fc .fc-col-header-cell { color: #8b8fa3; font-size: 0.8rem; }
.fc .fc-daygrid-day-number { color: #8b8fa3; font-size: 0.8rem; padding: 4px 8px; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color: #6366f1; font-weight: 700; }
.fc .fc-event { border-radius: 4px !important; padding: 2px 6px !important; font-size: 0.75rem !important; border: none !important; cursor: pointer; }
.fc .fc-timegrid-slot { height: 40px; }
.fc .fc-timegrid-axis, .fc .fc-timegrid-slot-label { color: #5c6078; font-size: 0.75rem; }

/* Tree view */
.tree-height { height: calc(100vh - 60px - 110px); }
#tree-container svg { width: 100%; height: 100%; }
#tree-container .node circle { fill: #242736; stroke-width: 2px; cursor: pointer; transition: all 0.2s ease; }
#tree-container .node circle:hover { filter: brightness(1.3); }
#tree-container .node text { fill: #e4e6ed; font-size: 13px; }
#tree-container .link { fill: none; stroke: #2d3041; stroke-width: 1.5px; }
#tree-container .task-dot { r: 5; cursor: pointer; }

/* Toast animations */
.toast {
    background: #242736; border: 1px solid #2d3041; border-radius: 8px;
    padding: 12px 20px; font-size: 0.85rem; color: #e4e6ed;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    max-width: 350px;
}
.toast.success { border-left: 3px solid #10b981; }
.toast.error { border-left: 3px solid #ef4444; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Sidebar responsive */
@media (max-width: 767px) {
    #sidebar-toggle { display: inline-flex !important; }

    /* Sidebar backdrop */
    #sidebar-backdrop.active { display: block !important; }

    /* Prevent mobile zoom on input focus */
    input, select, textarea { font-size: 16px !important; }

    /* FullCalendar mobile toolbar stacking */
    .fc .fc-toolbar { flex-direction: column; gap: 8px; }
    .fc .fc-toolbar-title { font-size: 0.95rem; }
    .fc .fc-button { font-size: 0.7rem !important; padding: 4px 8px !important; }

    /* Task meta wrapping */
    .task-meta { flex-wrap: wrap; gap: 6px; }

    /* Toast narrower on mobile */
    .toast { max-width: calc(100vw - 32px); }

    /* Task modal — bottom sheet on mobile */
    #task-modal {
        align-items: flex-end !important;
    }
    #task-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
    }
}