/* Side Panel (Tasks) */
.task-card { height: auto; position: relative; overflow: hidden; transition: all 0.3s; padding: 1.25rem; }
.counter-badge { background-color: var(--primary); color: white; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; }
.icon-lg { font-size: 1.25rem; }
.task-items { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.task-item { display: flex; gap: 0.75rem; position: relative; }
.task-checkbox { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; border: 1px solid #D1D5DB; cursor: pointer; accent-color: var(--primary); margin-top: 0.25rem; }
.task-info { flex: 1; }
.task-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
.priority-badge { font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.priority-badge.urgent { background-color: #FEE2E2; color: #DC2626; }
.priority-badge.high { background-color: #FFEDD5; color: #EA580C; }
.priority-badge.normal { background-color: #DBEAFE; color: #2563EB; }
.priority-badge.done { background-color: #F3F4F6; color: #6B7280; }
.time { font-size: 0.625rem; color: #9CA3AF; }
.task-title { font-size: 0.875rem; font-weight: 500; margin: 0; transition: color 0.2s; }
.task-item:hover .task-title { color: var(--primary); }
.task-desc { font-size: 0.75rem; color: var(--text-muted); margin: 0.125rem 0 0.5rem 0; }
.task-tags { display: flex; gap: 0.5rem; }
.tag { font-size: 0.625rem; background-color: #F3F4F6; padding: 0.125rem 0.5rem; border-radius: 0.25rem; color: #6B7280; }
.status-wait { background-color: #FEF2F2; color: #EF4444; }
.line-through { text-decoration: line-through; }
.opacity-50 { opacity: 0.5; }
.overlay-btn { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.btn-add-task { width: 100%; margin-top: 1.5rem; padding: 0.75rem; border: 1px dashed #D1D5DB; border-radius: 0.75rem; color: #6B7280; background: none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.875rem; transition: all 0.2s; }
.btn-add-task:hover { border-color: var(--primary); color: var(--primary); }

/* Upcoming List */
.upcoming-card { margin-top: 1.5rem; }
.upcoming-list { display: flex; flex-direction: column; gap: 0.75rem; }
.upcoming-item { display: flex; align-items: center; padding: 0.75rem; background-color: var(--background-light); border-radius: 0.75rem; border-left-width: 4px; border-left-style: solid; }
.border-red { border-left-color: var(--danger); }
.border-yellow { border-left-color: var(--warning); }
.item-title { font-size: 0.875rem; font-weight: 500; }
.item-sub { font-size: 0.75rem; color: #6B7280; }
.item-amount { font-family: var(--font-sans); font-weight: 700; font-size: 0.875rem; text-align: right; }

/* Finance dashboard theme alignment: side task status colors only */
.task-card,
.upcoming-card,
.upcoming-item {
    background-color: var(--synto-surface, #ffffff) !important;
    border-color: var(--synto-line, rgba(102, 102, 102, 0.22)) !important;
    box-shadow: none !important;
}

.task-checkbox,
.btn-add-task {
    border-color: var(--synto-line, rgba(102, 102, 102, 0.22)) !important;
    accent-color: var(--synto-primary, #FF6B00) !important;
}

.priority-badge.urgent,
.priority-badge.high,
.priority-badge.normal,
.status-wait,
.tag {
    background-color: var(--synto-primary-soft, #FFF4E6) !important;
    color: var(--synto-primary-strong, #e04f05) !important;
}

.priority-badge.done {
    background-color: #F9F5F1 !important;
    color: var(--synto-muted, #666666) !important;
}

.border-red,
.border-yellow {
    border-left-color: var(--synto-primary, #FF6B00) !important;
}

.time,
.item-sub {
    color: var(--synto-muted, #666666) !important;
}